@charset "UTF-8";

#toppage #main section,
#toppage section{
max-width:940px;
height:auto;
margin:1em auto;
padding:10px;
border:solid 1px #BBB;
border-radius:0;
-webkit-box-shadow:0 0 10px 0 rgba(102,102,102,0.3);
box-shadow:0 0 10px 0 rgba(102,102,102,0.3);	
}


#nav-info{
padding:0 5px;
background-color:#FEFDEF;
}

#nav-info-inner{
position:relative;
padding-top:10px;
}

.news-area{
padding:0 5px;
}

	
/* #shopsearch
------------------------------- */
#shopsearch{
position:absolute;
right:5px;
top:92px;
width:43px;
height:76px;
margin-top:-70px;
padding-top:3px;
border:1px solid #c3c4c7;
border-bottom:none;
background:#f5f6f8;
background:-webkit-gradient(linear, left top, left bottom, from(#f5f6f8), color-stop(0.5,#e5e6e8), color-stop(0.5,#e5e6e8), to(#f5f6f8));
background:-moz-linear-gradient(top,#f5f6f8 0%, #e5e6e8 50%, #e5e6e8 50%, #f5f6f8 100%);
background:-o-linear-gradient(top,#f5f6f8 0%, #e5e6e8 50%, #e5e6e8 50%, #f5f6f8 100%);
background:-ms-linear-gradient(top,#f5f6f8 0%, #e5e6e8 50%, #e5e6e8 50%, #f5f6f8 100%);
background:linear-gradient(top,#f5f6f8 0%, #e5e6e8 50%, #e5e6e8 50%, #f5f6f8 100%);
-pie-background: linear-gradient(top,#f5f6f8 0%, #e5e6e8 50%, #e5e6e8 50%, #f5f6f8 100%);
box-shadow: 0 1px 2px #aaa;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
text-align:center;
}

#shopsearch p{
color:#339;
font-weight:700;
font-size:120%;
text-shadow: 0px 1px 0px #fff;
}

#shopsearch i{
color:#C00;
font-size:180%;
text-shadow: 0px 1px 0px #fff;
}

#shopsearch i.icon-map-marker{
font-size:180%;
}

#shopsearch i.icon-double-angle-right{
font-size:120%;
}

#shopsearch a{
display:block;
color:#666;
text-decoration:none;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}

#shopsearch a.active{
color:#999;
}


/* カウンター
------------------------------- */
#counter{
margin:0 auto;
padding:5px 0 0;
text-align:center;
font-size:100%;
}

#counter span{
padding:0 5px;
background-color:#804040;
color:#FFF;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}

#counter li{
display:inline-block;
vertical-align:middle;
}


/* 翻訳
----------------------------------------------------*/
#translate{
margin:5px auto;
text-align:center;
background-color:#FFF;
border:#FBEEBB solid 1px;
}

#translate li{
display:inline-block;
margin:0 5px 5px 5px;
padding:5px 5px 5px 35px;
font-size:100%;
}

#translate li.cn{
background:url(../images/top/cn.png) left center no-repeat;
}

#translate li.ko{
background:url(../images/top/ko.png) left center no-repeat;
}

#translate li.en{
background:url(../images/top/en.png) left center no-repeat;
}


/* トピックインフォ
------------------------------- */
.topic-info{
max-width:680px;
margin:10px auto;
text-align:center;
font-size:120%;
background-color:#F66;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}

.topic-info-02{
max-width:680px;
margin:10px auto;
text-align:center;
font-size:120%;
background-color:#F90;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}

.topic-info a,
.topic-info-02 a{
display:block;
text-decoration:none;
padding:10px;
color:#FFF;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}

.topic-info a span.bm:after,
.topic-info-02 a span.bm:after{
content:"\f118";
font-family:FontAwesome;
font-size:120%;
font-weight:normal;
}

.topic-info a span.am:after,
.topic-info-02 a span.bm:after{
content:"\f061";
font-family:FontAwesome;
font-size:120%;
font-weight:normal;
}

.topic-info a:hover, #topic-info a:focus {
text-decoration:none;
background-color:#F90;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}

.topic-info-02 a:hover, #topic-info a:focus {
text-decoration:none;
background-color:#F66;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}


/* メインイメージ
------------------------------- */
#main-image{
clear:left;
margin:5px auto;
}

#main-image a{
text-decoration:none !important;
}

#main-image dl.slide-news{
display:block;
margin:10px auto;
text-align:center;
font-size:160%;
vertical-align:middle;
border:#CCC solid 1px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#FEFBE0;
}

#main-image dl.slide-news dt{
padding:0.5em 0;
}

#main-image dl.slide-news dd{
padding:0.5em 0;
}


/* twitterバナー
-------------------------------*/
.twitter-banner{
clear:left;
margin:8px auto;
padding:5px;
text-align:center;
}

.twitter-banner a:hover{
position:relative;
top:1px;
left:1px;
}


/* セールバナー
-------------------------------*/
.sale-banner{
clear:left;
margin:8px auto;
padding:5px;
text-align:center;
}

.sale-banner a:hover{
position:relative;
top:1px;
left:1px;
}


/* インフォバナー
------------------------------- */
.info-banner{
margin:5px auto;
padding:5px;
text-align:center;
}

.info-banner a:hover{
position:relative;
top:1px;
left:1px;
}


/* ニュース
------------------------------- */
.news-area{
margin:5px 0 10px;
word-wrap:break-word;
}

.news-area h2{
margin:0 0 2px;
padding:2px 0 2px 15px;
}

.information section{
background-color:#FBF8D2;
}

.newshop section{
background-color:#FCE8C9;
}

.campaign section{
background-color:#FDE8F5;
}

.information h2{
background:url(../images/top/bg-h2-information.jpg) left center no-repeat;
color:#492525;
}

.newshop h2{
background:url(../images/top/bg-h2-newshop.jpg) left center no-repeat;
color:#FFF;
}

.campaign h2{
background:url(../images/top/bg-h2-campaign.jpg) left center no-repeat;
color:#FFF;
}

.news{
position:relative;
border:#CCC solid 1px;	
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
behavior:url(js/PIE.htc);
}

.news ul{
margin:0;
padding:0;
font-size:14px;
line-height:1.4;
list-style:none;
max-height:160px;
overflow:auto;
}

.news li{
display:block;
color:#000;
text-decoration:none;
border-bottom:solid 1px #aaa;
}

.news li.link-n{
margin:0;
padding:5px;
}

.news li{
margin:0;
padding:0;
}

.news li a{
display:block;
margin:0;
padding:5px 5px 10px 5px;
}

.news li a time{
color:#487CBB;
text-decoration:underline;
}

.news li a p{
position:relative;
margin:0;
padding:0 20px 0 0;
color:#487CBB;
text-decoration:underline;
}

.news li a p:before{
position:absolute;
right:0;
top:50%;
content:'\f054';
margin:-12px 0 0 0;
color:#888;
font-family:'FontAwesome';
font-size:16px;
line-height:1;
}

.news li a:hover{
background-color:#D6ECD5;
}


.information .news li a:hover{
background-color:#F5E8B6;
}

.newshop .news li a:hover{
background-color:#F9D29F;
}

.campaign .news li a:hover{
background-color:#FFD0E8;
}



/* eto
------------------------------- */
#etowaku{
clear:both;
position:relative;
overflow:hidden;
width:340px;
height:105px;
text-align:center;
vertical-align:middle;
}

#eto01{
position: absolute;
left:-50px;
top:0;
width:100px;
padding:10px 0px;
text-align:center;
}

#eto02{
position: absolute;
right:-50px;
top:10px;
width:100px;
padding:10px 0px;
text-align:center;
}
/* eto
------------------------------- */




h1#top-main{
margin:5px 0;
padding:5px 0 5px 20px;
background:url(../images/common/ya_orange.png) left 7px no-repeat;
border:none;
border-top:#D8D8D8 solid 1px;
border-bottom:#E7E7E7 solid 6px;
font-size:120%;
}

#top-summary{
position:relative;
padding:10px;
border:#695342 solid 2px;
background-color:#FBF7E8;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
behavior:url(js/PIE.htc);
font-size:120%;
}

#top-summary p{
padding-top:1em;
color:#400000;
}

#top-summary p:first-child{
padding-top:0;
}

#top-summary p i.first{
color:#FA7BA8;
}

#top-summary p i.second{
color:#FFBF00;
}

#top-summary p i.third{
color:#4A5DAB;
}

/* メインメニュー
------------------------------- */
.menu-area,
.job-area,
.media-area,
.building-area{
margin:5px auto 10px;
text-align:center;
font-size:140%;
background-color:#FFF;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

.menu-area{
border:#F15A25 solid 1px !important;
background-color:#FDE7DF !important;
}

.job-area{
border:#8DC540 solid 1px !important;
background-color:#EEF7E3 !important;
}

.media-area{
border:#038ACA solid 1px !important;
background-color:#E6F8FF !important;
}

.building-area{
border:#C98903 solid 1px !important;
background-color:#FFF3D9 !important;
}

.menu-area h2,
.job-area h2,
.media-area h2,
.building-area h2{
margin:0 0 10px;
padding:5px 2px;
color:#FFF;
border-radius:5px;
}

.menu-area h2{
background-color:#F15A25;
}

.job-area h2{
background-color:#8DC540;
}

.media-area h2{
background-color:#038ACA;
}

.building-area h2{
background-color:#C98903;
}


.menu-area p,
.job-area p,
.media-area p,
.building-area p{
margin:0;
padding:0;
}

.menu-area ul li,
.job-area ul li,
.media-area ul li,
.building-area ul li{
margin:5px auto 10px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

.menu-area ul li a,
.job-area ul li a,
.media-area ul li a,
.building-area ul li a{
position:relative;
display:block;
padding:10px 0;
text-decoration:none;
color:#FFF;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

.menu-area ul li a:hover,
.job-area ul li a:hover,
.media-area ul li a:hover,
.building-area ul li a:hover{
position:relative;
top:1px;
left:1px
}


.menu-area ul li a span.bm:before,
.job-area ul li a span.bm:before,
.media-area ul li a span.bm:before,
.building-area ul li a span.bm:before{
position:absolute;
left:5%;
top:31%;
font-family:'FontAwesome';
font-size:20px;
line-height:1;
}

li.search a span.bm:before{
content:'\F002';	
}

li.file a span.bm:before{
content:'\F15B';	
}

li.laptop a span.bm:before{
content:'\F109';	
}

li.envelope a span.bm:before{
content:'\F0E0';	
}

li.facebook-sign a span.bm:before{
content:'\F082';	
}

li.edit-sign a span.bm:before{
content:'\F14B';	
}

li.building a span.bm:before{
content:'\F0F7';	
}

li.legal a span.bm:before{
content:'\F0E3';
}


.menu-area ul li a span.am:after,
.job-area ul li a span.am:after,
.media-area ul li a span.am:after,
.building-area ul li a span.am:after{
position:absolute;
right:5%;
top:35%;
content:'\f054';
font-family:'FontAwesome';
font-size:18px;
line-height:1;
}



.shop-category div{
display:inline-block;
width:18%;/* ４ジャンル */
width:14%;/* ５ジャンル */
width:22%;/* ６ジャンル */
height:auto;
margin:1%;
padding:1px;
border:#F90 solid 2px;
border-radius:8px;
background-color:#FFF;
}

.shop-category div:hover{
position:relative;
top:1px;
left:1px
}

.media-category div{
display:inline-block;
width:30%;
width:18%;
height:auto;
margin:1%;
padding:0;
}

.media-category div:hover{
position:relative;
top:1px;
left:1px
}



/* 店舗関連メニュー
------------------------------- */
.menu-area li a{
background-color:#CC3333;
}



/* 求人関連メニュー
------------------------------- */
.job-area li a{
background-color:#517951;
}

.job-area dl{
margin-bottom:1em;
}

.job-area dt{
font-size:70%;
}

.job-area dt i{
color:#033;
}

.job-area dd:hover{
position:relative;
top:1px;
left:1px
}


/* メディア関連メニュー
------------------------------- */
.media-area li a{
background-color:#006;
}


/* 建築関連メニュー
------------------------------- */
.building-area li a{
background-color:#9C4E27;
}


/* その他メニュー
------------------------------- */
.other-info{
margin:10px 0;
padding:1em;
text-align:center;
background-color:#F2F1EC;
border-radius:6px;
}

.other-info div{
display:block;
height:auto;
margin:10px auto;
text-align:center;
}

.other-info div:hover{
position:relative;
top:1px;
left:1px
}



@media all and (min-width:640px) {

/* eto
------------------------------- */
#etowaku{
width:600px;
height:105px;
}
/* eto
------------------------------- */


#nav-info{
padding:0;
}

#nav-info-inner{
padding-top:0;
padding-bottom:10px;
}

.news-area{
padding:0;
}

#shopsearch{
display:none;
}

/* カウンター
------------------------------- */
#counter{
clear:left;
margin:0;
padding:5px 20px 5px 5px;
text-align:right;
}

#counter li{
margin:0 3px;
}

/* 翻訳
----------------------------------------------------*/
#translate{
float:right;
margin:0 0 5px 0;
padding:0 5px 0;
vertical-align:top;
border:#FBEEBB solid 1px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px
}

#translate h2{
float:left;
padding:0.5em;
}

#translate ul{
float:right;
}


/* トピックインフォ
------------------------------- 
#topic-info{
position:absolute;
top:0;
left:5px;
}
*/


/* メインイメージ
------------------------------- */
#main-image{
clear:none;
margin:10px auto 0;/*トピックインフォバナー有り*/
margin:0 auto;/*トピックインフォバナー無し*/
max-width:700px;
}

#main-image dl.slide-news{
font-size:300%;
}


/* ニュース
------------------------------- */
.news-area{
float:left;
width:32%;
margin:0 0 20px 5px;
}

.news{
padding:5px;
}

.news ul{
max-height:280px;
height:280px;
overflow:auto;
}



/* メインメニュー
------------------------------- */
.menu-area ul li,
.building-area ul li{
display:inline-block;
width:45%;
height:auto;
margin:1%;
}

/*
.job-area ul li{
display:inline-block;
width:80%;
height:auto;
margin:1%;
}

.job-area dl{
display:inline-block;
width:30%;
height:auto;
margin:1%;
}


*/


.media-area ul li{
display:inline-block;
width:28%;
width:18%;
height:auto;
margin:1%;
}

.media-area ul li a span.bc{
display:none;
}



/* その他メニュー
------------------------------- */

#other-info-area{
display:flex;
max-width:1000px;
margin-left:auto;
margin-right:auto;
}

#other-info-area .other-info{
flex:1;
margin:1em;
}

#other-info-area .other-info div{
min-width:260px;
height:auto;
margin:3px 1em 10px;
}



}


@media all and (min-width:700px) {
/* eto
------------------------------- */
#etowaku{
width:660px;
height:105px;
}
}

@media all and (min-width:800px) {
/* eto
------------------------------- */
#etowaku{
width:760px;
height:105px;
}
}

@media all and (min-width:900px) {
/* eto
------------------------------- */
#etowaku{
width:860px;
height:105px;
}
}



/*メディアクエリ
-----------------------------------------------------------------*/
@media all and (min-width:960px) {

/* eto
------------------------------- */
#etowaku{
width:930px;
height:105px;
}




#nav-info{
margin:0 0 10px;
padding:5px 0 0;
box-shadow: 0 1px 2px #AAA;
}

#nav-info-inner{
max-width:940px;
margin:0 auto;
}


/* カウンター
------------------------------- */
#counter{
position:absolute;
top:5px;
left:0;
}

/* トピックインフォ
------------------------------- 

#topic-info{
position:absolute;
top:-5px;
left:0;
width:380px;
}


#topic-info{
position:absolute;
top:320px;
left:0;
width:380px;
}
*/


/* メインイメージ
------------------------------- */
#main-image{
margin:10px 20px 0 0;/* トピックインフォバナー有り*/
margin:0 10px 0 0;/* トピックインフォバナー無し*/
float:left;
width:400px;
}

#main-image dl.slide-news{
font-size:160%;
}


/* セールバナー
-------------------------------*/
.info-banner{
clear:left;
margin:0;
}


/* インフォエリア
---------------------------------------------*/
#info-area{
float:right;
width:53.5%;
margin:0;
}



/* インフォバナー
-------------------------------*/
.info-banner{

/* 年末年始スペース */
margin-top:80px;

margin:5px 0;
}



/* セールバナー
-------------------------------
.sale-banner{
margin-top:80px;/* 年末年始スペース
margin-bottom:0;/* 年末年始スペース
}
*/

/* ツイッターバナー
-------------------------------
.twitter-banner{
margin-top:0;/* 年末年始スペース
}
*/

/* ニュース
------------------------------- */
.news-area{
float:left;
width:32%;
margin:0 0 20px 5px;
}

.news{
padding:5px;
}

.news ul{
height:300px;
overflow:auto;
}





/* メインメニュー
------------------------------- */
.m01{
display:inline-block;
text-align:center;
padding-top:0.6em;

display:flex;

}

.m02{
display:inline-block;
text-align:center;

display:flex;
}


.m01 section,
.m02 section{
flex:1;
}


.menu-area,
.job-area{
display:inline-block;
width:44%;
min-height:360px;
margin:1% !important;
vertical-align:top;
}

.media-area,
.building-area{
display:inline-block;
width:44%;
min-height:250px;
margin:1% !important;
vertical-align:top;
}


.media-area ul li,
.building-area ul li{
display:inline-block;
width:90%;
height:auto;
margin:1%;
}



}