@charset "utf-8";
/* index
--------------------------------------------------------------*/
#top{
width: 100%;
padding: 10px 0;
}
#top .leftbox{
float: left;
width: 304px;
height: 305px;
}
#top .rightbox{
float: right;
width: 640px;
}
#top .top100per{
width: 100% !important;
}
#top .caption{
height: 90px;
overflow: hidden;
padding: 5px 10px;
color: #00822d;
background: #fff;
border: solid 2px #00822d;
border-top: solid 2px #00822d;
line-height: 120%;
display:none;
}
#top .caption span{
font-weight: bold;
display: block;
}
#top #bx-pager{
width: 100%;
overflow: hidden;
}
#top #bx-pager div{
display: block;
float: left;
margin-right:5.2px;
}
#top #bx-pager a{
display: block;
height: 70px;
overflow: hidden;
border-top: solid 2px transparent;
border-left: solid 2px transparent;
border-right: solid 2px transparent;
}
#top #bx-pager a img{
margin-top: 0;
}
#top #bx-pager a.active{
border-top: solid 2px #00822d;
border-left: solid 2px #00822d;
border-right: solid 2px #00822d;
}
/*
#top #bx-pager a.active:before {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #00822d;
top: -20px;
content: "";
position: absolute;
left: 75px;
}*/
#top #bx-pager div p{
display: table;
text-align: center;
width: 100%;
height: 50px;
color: #666666;
background: #fff;
}
#top #bx-pager div p.active{
background: #00822d;
color: #fcfcfc;
}
#top #bx-pager div p span{
display: table-cell;
vertical-align: middle;
font-weight:normal;
}
#top .slidebox-mini a:first-child{
margin-left:5px;
}
#top .slidebox-mini a{
margin-right: 5px;
}
#top .osirase-bnr{
width:948px;
margin:0 1px 25px 1px;
clear:both;
overflow:hidden;
}
#top .osirase-bnr li{
width:470px;
margin:10px 2px 0 2px;
float:left;
overflow:hidden;
}
#top .osirase-bnr li img{
max-width:100%;
height:auto;
}
#top .osirase-bnr li.sp_view{display:none;}
#top #shops-area{margin-bottom:35px;}
/**
*mapbox
*/
.mapbox_wrapper{
background: #ffffff url("../../img/common/bg_dotted.jpg");
margin-bottom:10px;
}
.mapbox_wrapper .mapbox{
background: url("../../img/page/top/img_japan_map.gif") left top no-repeat;
width: 304px;
height: 350px;
}
.mapbox_wrapper .mapboxul{
position: relative;
}
.mapbox_wrapper .mapbox .btn_chiiki{
display: block;
padding: 5px;
border: solid 1px #ccc;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.mapbox_wrapper .mapbox .btn_chiiki.active,
.mapbox_wrapper .mapbox .btn_chiiki:hover{
border: solid 1px #00822d;
background: #00822d;
color: #fff;
}
.mapbox_wrapper .mapbox .mapbtns{
padding: 5px;
border: solid 2px #00822d;
background: #fff;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: none;
}
.mapbox_wrapper .mapbox .mapbtns li{
float: left;
margin-left: 5px;
}
#map_hokkaido{
position: absolute;
top: 80px;
left: 180px;
z-index: 1;
}
#map_kanto{
position: absolute;
top: 230px;
left: 210px;
z-index: 1;
}
#map_kanto .mapbtns{
position: absolute;
top: 25px;
left: -100px;
overflow: hidden;
width: 180px;
}
#map_kosinetu{
position: absolute;
top: 150px;
left: 140px;
z-index: 1;
}
#map_kosinetu .mapbtns{
position: absolute;
top: 25px;
left: -10px;
overflow: hidden;
width: 180px;
}
#map_hokuriku_tokai{
position: absolute;
top: 180px;
left: 50px;
z-index: 1;
}
#map_hokuriku_tokai .mapbtns{
position: absolute;
top: 25px;
left: -10px;
overflow: hidden;
width: 180px;
}
#map_kinki{
position: absolute;
top: 260px;
left: 130px;
z-index: 1;
}
#map_kinki .mapbtns{
position: absolute;
top: 25px;
left: -20px;
overflow: hidden;
width: 180px;
}
#map_chugoku_4koku{
position: absolute;
top: 220px;
left: 10px;
z-index: 1;
}
#map_chugoku_4koku .mapbtns{
position: absolute;
top: -50px;
left: 0px;
overflow: hidden;
width: 180px;
}
#map_9shu_okinawa{
position: absolute;
top: 300px;
left: 40px;
z-index: 1;
}
#map_9shu_okinawa .mapbtns{
position: absolute;
top: -30px;
left: -10px;
overflow: hidden;
width: 180px;
}
/**
*news box
*/
.newswrap{
background: #f7f7f7;
padding-bottom:8px;
}
.news-header{
height: 70px;
}
.newswrap .newstabs{
width: 100%;
padding-bottom: 5px;
overflow: hidden;
}
.newswrap .newstabs li{
font-size: 15px;
float: left;
font-weight: bold;
width: 25%;
text-align: center;
}
.newswrap .newstabs li.news-shop a{
background: #00822d;
border-right: solid 2px #F7F7F7;
}
.newswrap .newstabs li.news-sale a{
background: #e1ba1f;
border-left: solid 2px #F7F7F7;
border-right: solid 2px #F7F7F7;
font-weight:bold;
}
.newswrap .newstabs li.news-event a{
background: #a7c936;
border-left: solid 2px #F7F7F7;
border-right: solid 2px #F7F7F7;
font-weight:bold;
}
.newswrap .newstabs li.news-media a{
background: #bbbbbb;
border-left: solid 2px #F7F7F7;
font-weight:bold;
}
.newswrap .newstabs li a{
display: block;
width: 100%;
line-height: 40px;
}
.newswrap .newstabs li a{
color: #fff;
}
.newswrap .newstabs li:hover a,
.newswrap .newstabs li.active a{
color: #00822d;
background: #f7f7f7;
font-weight:bold;
}
.news-box-wrap{
width: 620px;
height: 490px;
padding: 10px;
overflow: hidden;
/*display: none;*/
margin-bottom:15px;
}
.news-box-wrap .news-box{
width: 48%;
min-height:210px;
background: #fff;
float: left;
margin:3px 0px 3px 7px;
padding:5px;
}
.news-box-wrap .news-box .news-core{
overflow: hidden;
height: 139px;
}
.news-box-wrap .news-box .news-core .centerdimg_cat{
display: inline-block;
width: 131px;
height: 96px;
overflow: hidden;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
.news-box-wrap .news-box .news-core img{
float:left;
}
.news-box-wrap .news-box .news-core p{
display: inline;
line-height: 135%;
font-weight:normal;
}
.news-box-wrap .news-box .news-core p a{
display: inline;
}
.news-box-wrap .news-box .news-core p span{
font-size: 110%;
color: #00822d;
font-weight:normal;
}
.news-box-wrap .news-box .news-core p span:after{
content:"\A";
white-space: pre;
}
/**
*climb-box
*/
.climb-box-wrapper{
width: 100%;
}
.climb-box{
width: 19%;
position: relative;
background: #f7f7f7;
border-bottom: solid 5px #00822d;
float: left;
margin-right:1.2% !important;
}
.climb-box:last-child{margin-right:0!important;}
.climb-box .img{
width: 100%;
height: 137px;
padding: 2px 0;
background: #ccc;
}
.climb-box .img img{
max-width: 100%;
max-height: 137px;
width: auto;
height: auto;
display: block;
margin: auto;
}
.climb-box .date{
color:#a0a0a0;
padding: 2px 5px;
font-size: 90%;
}
.climb-box .disc{
color: #00822d;
padding: 2px 5px;
height: 45px;
width: 100%;
overflow: hidden;
position: relative;
/*white-space: nowrap;*/
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
/**
*chumoku-box
*/
.chumoku-box-wrapper{
width: 100%;
}
.chumoku-box{
width: 260px;
position: relative;
background: #f7f7f7;
float: left;
margin-right:3% !important;
margin-left:6% !important;
}
.chumoku-box:last-child{margin-right:0!important;}
.chumoku-box .img{
padding: 2px 0;
padding-bottom: 5px;
}
.chumoku-box .abox{
padding: 5px;
}
.chumoku-box .title{
color: #3b3b3b;
font-weight: bold;
padding: 2px 5px;
font-size: 110%;
border-left: solid 5px #00822d;
}
.chumoku-box .disc{
color: #3b3b3b;
padding-top: 5px;
width: 100%;
font-size: 90%;
overflow: hidden;
position: relative;
}
/**
*osusume-box, shopgift-box
*/
.slidebox-osusume-wrap,
.slidebox-shopgift-wrap{
background: #f7f7f7;
}
.osusume-box,
.shopgift-box{
width: 184px;
padding:4px;
background: #f7f7f7;
}
.osusume-box .abox,
.shopgift .abox{
background: #fff;
padding: 10px;
color: #3b3b3b;
min-height:110px;
}
p#PrevIcon_osusume a{
display:block;
width:25px;
height: 180px;
position:absolute;
background:url(../../img/common/arrow_l_green.png) left center no-repeat;
color:#fff;
top:60px;
left:-25px;
text-indent:-9999px;
}
p#NextIcon_osusume a{
display:block;
width:25px;
height:180px;
position:absolute;
background:url(../../img/common/arrow_r_green.png) right center no-repeat;
color:#fff;
top:60px;
right:-24px;
text-indent:-9999px;
}
p#PrevIcon_shopgift a{
display:block;
width:25px;
height: 180px;
position:absolute;
background:url(../../img/common/arrow_l_green.png) left center no-repeat;
color:#fff;
top:15px;
left:-25px;
text-indent:-9999px;
}
p#NextIcon_shopgift a{
display:block;
width:25px;
height:180px;
position:absolute;
background:url(../../img/common/arrow_r_green.png) right center no-repeat;
color:#fff;
top:15px;
right:-24px;
text-indent:-9999px;
}
.shopgift-box .img{
padding-bottom: 5px;
text-align: center;
}
.shopgift-box .img a img{
display: block;
margin: 0 auto;
}
/**
*osusume-box, shopgift-box
*/
.slidebox-sns-wrap{
background: #f7f7f7;
padding: 10px 0;
}
.sns-box{
width: 33%;
padding:0 5px;
background: #f7f7f7;
}
.sns .abox{
background: #fff;
padding: 5px;
color: #3b3b3b;
}
.sns-box .abox p{
width: 247px;
margin: 0 auto;
color: #3c3c3c;
}
p#PrevIcon_sns a{
display:block;
width:25px;
height: 180px;
position:absolute;
background:url(../../img/common/arrow_l_green.png) left center no-repeat;
color:#fff;
top:0px;
left:-25px;
text-indent:-9999px;
}
p#NextIcon_sns a{
display:block;
width:25px;
height:180px;
position:absolute;
background:url(../../img/common/arrow_r_green.png) right center no-repeat;
color:#fff;
top:0px;
right:-25px;
text-indent:-9999px;
}
.sns-box .img{
padding-bottom: 5px;
text-align: center;
}
.sns-box .img a img{
display: block;
margin: 0 auto;
}
/**
*brand-area
*/
.brand-boxul{
overflow: hidden;
}
.brand-boxul li{
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
border:solid 1px #dbdbdb;
padding-top:10px;
}
.brand-boxul li a{
display: block;
width: 156px;
font-size: 11px;
text-align: center;
vertical-align: middle;
color: #4c4c4c;
}
.brand-boxul li a:hover{
color: #4c4c4c;
opacity: 0.8;
}
.brand-boxul li a span{
display: block;
height: 50px;
min-height: 50px;
vertical-align: middle;
}
.bnr02{
margin:20px auto;
width:930px;
}
/* フィルタリングCSS */
.filter {
margin: 30px 0 10px;
}
.filter ul li{
width:195px;
float:left;
margin-right:12px;
}
.filter ul li:nth-child(5){
margin-right:0;
}
.filter :after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.filter a {
display: inline-block;
padding: 10px;
border: 2px solid #fff;
position: relative;
margin: 20px 10px 20px;
}
.filter a:hover{
text-decoration:none;
}
.boxes {
display: flex;
flex-wrap: wrap;
clear:both;
padding-bottom:20px;
}
ul.boxes li{
width: 31%;
background:#fff;
margin: 0 1% 20px 1%;
}
ul.boxes li a{
padding:0 0 20px;
display:block;
z-index:999;
}
ul.boxes li .cs{
background-color: rgba(0,0,0,0.5);
padding:0 0 20px;
display:block;
z-index:999;
}
ul.boxes li .cs:hover{
color:#065D42;
cursor:default;
}
.boxes li p.ico_support,
.boxes li p.ico_joy,
.boxes li p.ico_safety,
.boxes li p.ico_intimate{
background:#065D42;
color:#fff;
padding:3px 0;
margin:5px 0 15px 15px;
width:130px;
font-size:12px;
text-align:center;
float:left;
}
.boxes li .date{
color:#666;
margin:5px 15px;
float:right;
}
.boxes li .tit{
margin:0 0 15px 15px;
font-size:16px;
letter-spacing:1px;
font-weight:bold;
clear:both;
}
.boxes li .btn{
margin:20px 15px 0;
padding:5px 0;
text-align:center;
border:1px solid #065D42;
}
.boxes li a:hover{
text-decoration:none;
opacity:0.9;
filter: alpha(opacity=90); /* ie lt 8 */
-ms-filter: "alpha(opacity=90)"; /* ie 8 */
-moz-opacity:0.9; /* FF lt 1.5, Netscape */
-khtml-opacity: 0.9; /* Safari 1.x */
zoom:1;
}
.is-animated {
animation: .6s zoom-in;
}
@keyframes zoom-in {
0% {
transform: scale(.1);
}
100% {
transform: none;
}
}
/**
*linkbox
*/
.link-boxul{
overflow: hidden;
}
.link-boxul li{
float: left;
width: 24%;
margin: 5px 0.5%;
}
/**
*mini-osirasebox
*/
.mini-osirasebox{
width: 100%;
background: #E2F8EF;
}
.mini-osirasebox{
width: 100%;
background: #E2F8EF;
padding: 15px;
margin-bottom: 20px;
}
.mini-osirasebox-title{
color: #54bd8e;
font-size: 95%;
}
.mini-osirasebox p{
font-size: 90%;
}
/**
*���}�P�C online
*/
iframe.yamakei_sp{display:none;}
span.tit_s {
font-size: 14px;
letter-spacing: 0;
}