@charset "utf-8";

/* reset */
body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,pre,form,blockquote,fieldset,input,address,th,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,caption,address,em{ font-style:normal; font-weight:normal;}
ul,ol,li,dl,dt,dd{ list-style-type:none; list-style-position:outside;}
table{ border-spacing:0; border-collapse:collapse;}
fieldset{ border:none;}
img{ border:0;vertical-align: bottom;}
br{ letter-spacing:0;}
button,fieldset,form,input,label,legend,select,textarea,optgroup{ font-family:inherit; font-style:inherit; font-weight:inherit; font-size:100%; margin:0; padding:0; vertical-align:baseline;}
optgroup{font-style:normal;}

/* basic */
body{ font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; font-size:12px; color:#000; line-height:1.6; background-color:#FFF; -webkit-text-size-adjust: 100%;}

a{ color:#666; text-decoration:none;}

img{ width:100%; height:auto;}

/* clearfix */
.clearfix{ zoom:1;}
.clearfix:after{ content:""; display:block; clear:both;}

/* common layout */
#wrapper{}
.container{ padding-top:65px;}

/* common parts */
.btn{ display:block; border:1px solid #000; font-weight:bold; text-align:center; height:30px; line-height:30px; margin:0 auto; width:125px;}
.btn a{ display:block; color:#000;}

.back-btn{ display:block; border:1px solid #000; font-weight:bold; text-align:center; height:38px; line-height:38px; width:79px;}
.back-btn a{ display:block; color:#000;}

.icon-shop{ display:inline-block; width:32px; line-height:12px;}
.icon-news{ display:inline-block; width:34px; line-height:12px;}
.icon-media{ display:inline-block; width:37px; line-height:12px;}
.icon-new{ display:inline-block; width:32px; line-height:12px;}

.icon{display:inline-block; width:60px; line-height:12px;}


/* header */
#header{ background:#000; width:100%; z-index:1001;}
#header.fixed{ position: fixed; top:0; left:0;}
#header h1.site-logo{width:120px;margin-left: 20px;padding:12px 0;line-height:0;}
#header p#menu{width:18px;position:absolute;top:12px;right: 12px;line-height:0;z-index:10000;cursor:pointer;}
#header p#online-shop{width:22px;position:absolute;top:12px;right: 42px;line-height:0;z-index:10000;cursor:pointer;}


/* drawer-menu */
#menu-close{ width:20px; z-index:9001; position:absolute; top:20px; display:none; cursor:pointer;}
.modal_bg{ background:rgba(0,0,0,0.8); z-index:9000; width:100%; height:100%; display:none;}
#drawer-menu{ position:fixed; z-index:9999; height:100%; width:300px; transition:.3s; right:-300px; overflow: hidden; cursor:pointer;}
.menu-container{ width:300px; overflow: auto; max-height: 100%; margin-right: -100px; padding-right: 100px; -webkit-overflow-scrolling:touch;}
.global-menu{ background-color:#FFF;}
.global-menu li{ font-size:15px; font-weight:bold; border-bottom:1px solid #ddd;}
.global-menu li a{ display:block; padding:15px 15px; color:#000;}
.global-menu li a span{ display:block; background:url(../img/icon_menu_arrow.png) no-repeat right center; background-size:6px 10px;}

.sns-menu{ padding-bottom:30px; background-color:#FFF;}
.sns-menu ul{ display:table; width:100%;}
.sns-menu li{ font-size:12px; font-weight:bold; border-bottom:1px solid #ddd; display:table-cell; width:50%; vertical-align:middle; box-sizing:border-box;}
.sns-menu li:nth-child(odd){ border-right:1px solid #ddd;}
.sns-menu li a{ display:block; padding:15px 5px 15px 10px; color:#000;}
.sns-menu li span{ display:block; padding-left:25px; word-break:break-all;}
.sns-menu li span.facebook{ background:url(../img/icon_menu_facebook.png) no-repeat 0  center; background-size:16px 16px;}
.sns-menu li span.instagram{ background:url(../img/icon_menu_instagram.png) no-repeat 0  center; background-size:16px 16px;}
.sns-menu li span.blog{ background:url(../img/icon_menu_blog.png) no-repeat 0 0; background-size:18px 15px;}
.sns-menu li span.suitlibrary{ background:url(../img/icon_menu_suitlibrary.png) no-repeat 0  center; background-size:16px 16px;}
.sns-menu li span.mail-magazine{ background:url(../img/icon_menu_mail_magazine.png) no-repeat 0  center; background-size:18px 13px;}
.sns-menu li span.app{ background:url(../img/icon_menu_app.png) no-repeat 0 center; background-size:13px 16px;}
.sns-menu li span.onlineshop{ background:url(../img/icon_menu_onlineshop.png) no-repeat 0 center; background-size:18px 15px;}
.etc-menu{ padding-bottom:100%; background-color:#FFF;}
.etc-menu ul{ padding:0 0 15px 15px; background-color:#FFF;}
.etc-menu li{ font-size:12px; font-weight:bold;}
.etc-menu li a{ display:block; padding-bottom:5px; color:#000;}


/* nav-map */
.nav-map{ width:90%;/*576/640*/ margin:0 auto; padding-bottom:20px;/*55/640*/ text-align:left;}
.nav-map li{ display:inline-block; font-size:10px; color:#999;}
.nav-map li a{ color:#999;}

/* footer */
#footer{ background:#000;}
.footer-inner{ width: 85%;;/*544/640*/ margin:0 auto; padding: 7.1875% 0;/*46/640*/}
ul.footer-sns{ margin-left: -22px;/*-22/544*/}
ul.footer-sns li{ float: left; width: 12.72084%;/*72/566*/ margin-left: 3.88692%;/*22/566*/}
ul.footer-link{ padding-top: 8.45588% ;/*46/544*/}
ul.footer-link li{ float: left; width: 50%; text-align: center; padding: 10px 0;}
ul.footer-link li a{ color: #FFF;}
p.copyright{ color:#fff; font-size:10px; text-align:center; height:24px; line-height:24px;}

#page-top{ position:fixed; bottom:35px; right:10px; width:30px; z-index:999; background:#fafafa; border:1px solid #000; display:none; cursor:pointer;}
#page-top.fixed{ position: fixed;}

/* PC */
@media only screen and (min-width:641px){
	a{ transition:.3s;}
	a:hover{ opacity:0.5;}
	
	img{ width:auto; max-width:100%;}
	
	/* common layout */
	.container{ width:1024px; margin:auto; padding-top:124px;}
	
	/* common parts */
	.btn{ width:158px; height:48px; line-height:48px;}
	.btn a{ transition:.3s;}
	.btn a:hover{ background-color:#000; color:#FFF; opacity:1;}
	
	.back-btn{ width:98px;}
	.back-btn a{ transition:.3s;}
	.back-btn a:hover{ background-color:#000; color:#FFF; opacity:1;}
	
	/* header */
	#header h1.site-logo{ width:184px; padding:18px 0;}
	#header p#menu{width:26px;top:18px;right: 18px;transition:.3s;}
	#header p#menu:hover{ opacity:0.5;}
	#header p#online-shop{width:25px;top:18px;right: 60px;transition:.3s;}
	#header p#online-shop:hover{ opacity:0.5;}
	
	/* drawer-menu */
        #drawer-menu{width:280px; right:-280px;}
	#menu-close{ transition:.3s;}
	#menu-close:hover{ opacity:0.5;}
	
	/* nav-map */
	.nav-map{ width:1024px; padding-bottom:40px;}

	/* footer */
	#footer{}
	.footer-inner{ width: auto; padding: 46px 0 0 0;}
	ul.footer-sns{ margin: 0; text-align: center;}
	ul.footer-sns li{ float: none; display: inline-block; width: 40px; margin: 0 6px;}
	ul.footer-link{ text-align: center; padding-top: 20px;}
	ul.footer-link li{ float: none; width: auto; display: inline-block; margin: 0 20px; font-size: 14px;}
	p.copyright{ height: 54px; line-height: 54px;}
	
	#page-top{ bottom:45px; right:20px; width:36px;}
	
}