@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0;}
body {-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;}
/*==================================================== */
body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; color:#222222; line-height:1.8;}
::-moz-selection{background:#222222; color:#fff; text-shadow:none;}
::selection{background:#222; color:#fff; text-shadow:none; }
a:link{ color:#222222; text-decoration:underline;}
a:visited{ color:#222222; text-decoration:underline;}
a:hover{ color:#999999; text-decoration:none;}
a:active{ color:#999999;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
.clr{clear:both;}

section {clear:both; zoom:1;}
article:after,
section:after,
.clrFx:after{content:''; clear:both; display:block;}

html {font-size:62.5%;}
body {font-size:13px; font-size:1.3rem;}


/*
	BASE SET
__________________________________________________*/
body{background:#fff; padding-top:60px;}

#commonHeader {position:fixed; top:0; width:100%; z-index:900; left:0; min-width:1002px; background:#fff; border-bottom:1px solid #e4e4e4;}
.addBorder #commonHeader {border-bottom:1px solid #e4e4e4;}
.ie8 #commonHeader{min-width:1100px;}

#commonHeader section {/*max-width:1002px;*/ margin:0 auto; width:100%; padding:0 0 0 30px;}

#commonHeader #spNav {top:-9999px; position:absolute;}
#commonHeader h1 {float:left; padding:0;}
#commonHeader h1 a {display:inline-block; padding:22px 0 0;}
#commonHeader h1 a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
#commonHeader h1 img {width:100%; height:auto; max-width:262px;}
#commonHeader nav {float:right;}
#commonHeader ul , #commonHeader ul li {float:left;}

#commonHeader #pcNav {width:664px; overflow:hidden; background:url(/common/images/sprite.png) 0 -829px no-repeat; padding:10px 0 0 1px;}
#commonHeader #pcNav ul.gnav li {border-left:none; margin-right:1px; background:#fff; padding-bottom:11px;}
#commonHeader #pcNav ul.gnav li a{line-height:18px; height:40px; display:block; position:relative; width:115px; font-size:0; background:url(/common/images/sprite.png) 0px -850px no-repeat #fff;}
#commonHeader #pcNav ul.gnav li:nth-child(1) a {width:92px;  background-position:-1px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(2) a {width:82px; background-position:-94px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(3) a {width:87px; background-position:-177px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(4) a {width:87px; background-position:-265px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(5) a {width:84px; background-position:-353px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(6) a {width:70px; background-position:-438px -839px;}
#commonHeader #pcNav ul.gnav li:nth-child(7) a {width:136px; background-position:-509px -839px;}
#commonHeader #pcNav ul.gnav li a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}

#commonHeader p.toggle {position:absolute; right:0; top:0; display:none;}
#commonHeader p.toggle a{display:block; width:50px; height:50px; white-space:nowrap; text-indent:100%; overflow:hidden;}
#commonHeader p.toggle a:before{background:url(/common/images/sprite.png) 0 -50px no-repeat; background-size:500px auto; content:''; position:absolute; left:50%; top:50%; width:27px; height:28px; margin:-13px 0 0 -13px;}
#commonHeader p.toggle:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; background-color:#444;}

main {/*max-width:1002px;*/ margin:0 auto; width:100%; padding:0; left:0; min-width:1002px;}
.ie8 main{min-width:1100px;}

#pageHeading {text-align:center; font-size:0; /*background:url(/common/images/pageHeading.jpg) center center no-repeat;*/ height:150px; text-indent:-9999px; white-space:nowrap; overflow:hidden; margin-bottom:20px; position:relative; cursor:pointer;}
#pageHeading:before{content:''; background-position:left top; background-repeat:no-repeat; position:absolute; left:50%; top:50%;}
#spAsideWrap {max-width:1002px; margin:0 auto 50px;}
.ie8 #spAsideWrap{min-width:1100px;}

main section {margin:0 auto; padding:0; max-width:1002px;}
.ie8 main section{min-width:1100px; padding:0 49px;}

main section section {padding:0;}

#spAside {background:#222; position:fixed; right:-67%; width:67%; top:0; z-index:-1;}
.loadFinish main,
.loadFinish #commonHeader,
.loadFinish #spSlide,
.loadFinish #spAside {-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}

/* contents layout */
#blog {position:relative;}
#blog header {width:680px; margin:0 0 15px 11px; border-bottom:2px solid #222; padding-bottom:12px;}
#blog header h1{font-size:18px; font-size:1.8rem; line-height:24px; font-weight:bold;}
#blog aside{width:230px; position:absolute; right:11px; top:0;}
.ie8 #blog aside{width:230px; position:absolute; right:60px; top:0;}

#blog aside h2{font-size:16px; font-size:1.6rem; line-height:16px; font-weight:bold; border-bottom:2px solid #222; padding:2px 0 18px;}
#blog aside ul li a{display:block; padding:14px 0; text-decoration:none; background:url(/common/images/dotLine2.png) left bottom repeat-x;}
#blog aside ul li a:hover {color:#999; text-decoration:underline; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
#blog article{width:691px; padding:0 0 0 11px; margin-right:70px; overflow:hidden;}
#blog.archive {padding-bottom:50px;}
#blog.archive article .item a{padding:15px 0; color:#222; border-bottom:1px solid #afafaf; display:block; clear:both; zoom:1; text-decoration:none; font-size:14px; font-size:1.4rem; line-height:24px;}
#blog.archive article .item a:after{content:''; clear:both; display:block;}
#blog.archive article .item a:hover{-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
#blog.archive article .item a:hover p {color:#222;}
#blog.archive article .item a:hover h2{text-decoration:underline; color:#999;}
#blog.archive article .item p.img {float:left; font-size:0; margin:0 20px 0 0; line-height:1; width:78px; overflow:hidden;}
#blog.archive article .item p.img img  {height:50px !important; width:auto !important;}
#blog.archive article .item a:hover p.img {-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}
#blog.archive article .item h2 {zoom:1; overflow:hidden; color:#222;}
#blog.archive article .item.pdf a{padding:20px 0 20px 140px; position:relative; line-height:20px; top:-5px;}
#blog.archive article .item.pdf a p{position:absolute; left:0; top:20px; width:126px;}
#blog.archive article .item.pdf a p span {display:block; background:url(/common/images/sprite.png) -200px -50px; width:20px; height:10px; overflow:hidden; text-indent:100%; overflow:hidden; white-space:normal; position:absolute; right:7px; top:50%; margin-top:-6px;}
#blog.archive article .item.pdf h2{line-height:20px;}
#blog.archive article .item.brand a{padding:20px 0 20px 205px; position:relative; line-height:20px;}
#blog.archive article .item.brand a p{position:absolute; left:0; top:20px; width:205px; display:table; vertical-align:middle;}
#blog.archive article .item.brand a p span {line-height:20px; font-size:14px; font-size:1.4rem; display:table-cell; vertical-align:middle;}
#blog.archive article .item.brand a p span + span {width:120px; line-height:13px; font-size:12px; font-size:1.2rem; color:#999; text-align:center;}
#blog.archive article .item.brand h2{line-height:20px;}
#blog.detail {padding-bottom:30px;}
#blog.detail header {margin:0 0 37px 11px; border-bottom:none; padding-bottom:0; position:relative;}
#blog.detail header h1{font-size:18px; font-size:1.8rem; line-height:24px; font-weight:bold; margin-bottom:8px;border-bottom:2px solid #222; padding:0 0 12px;}
#blog.detail header .date {font-size:12px; font-size:1.2rem; color:#a29e9e; position:absolute; left:0; top:-22px;}
#blog.detail article img {max-width:680px;}
#blog.detail article p {font-size:13px; line-height:32px; margin-bottom:30px;}
#blog.detail .snsLinks {font-size:0; clear:both; zoom:1; padding:20px 0 0;}
#blog.detail .snsLinks:after{content:''; clear:both; display:block;}
#blog.detail .snsLinks ul li {float:left; padding:0 0 0 11px;}
#blog.detail .snsLinks ul li.tw {width:98px; overflow:hidden;}
#blog.detail .snsLinks ul li.gp {width:98px; overflow:hidden;}

#blog.detail nav {clear:both; zoom:1; padding:20px 0 0; width:680px; margin:30px 0 0 11px; border-top:1px solid #afafaf;}
#blog.detail nav:after{content:''; clear:both; display:block;}
#blog.detail nav ul {text-align:center; position:relative;}
#blog.detail nav ul li {display:inline-block; font-size:14px; font-size:1.4rem; height:40px; line-height:38px; border:1px solid #222;}
#blog.detail nav ul li.prev{position:absolute; left:0; top:0;}
#blog.detail nav ul li.next{position:absolute; right:0; top:0;}
#blog.detail nav ul li.hover {border:1px solid #e4e4e4;}
#blog.detail nav ul li a {text-decoration:none; display:block; position:relative; background:#222; color:#fff; padding:0 20px;}
#blog.detail nav ul li a:hover {background:#fff; border-color:#e4e4e4; color:#222; text-decoration:none; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;}
#blog.detail nav ul li.prev a span.inner {display:inline-block; padding:0 0 0 12px; position:relative;}
#blog.detail nav ul li.next a span.inner {display:inline-block; padding:0 12px 0 0; position:relative;}
#blog.detail nav ul li.prev a span.inner:before{content:''; width:0; height:0; border-style:solid; border-width:3px 6px 3px 0; border-color: transparent #fff transparent transparent ; position:absolute; left:0; top:50%; margin:-3px 0 0 0;}
#blog.detail nav ul li.next a span.inner:before{content:''; width:0; height:0; border-style:solid; border-width:3px 0 3px 6px; border-color: transparent transparent transparent #fff; position:absolute; right:0; top:50%; margin:-3px 0 0 0;}
#blog.detail nav ul li a:hover:before {-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;}
#blog.detail nav ul li.prev a:hover span.inner:before{border-color: transparent #222 transparent transparent;}
#blog.detail nav ul li.next a:hover span.inner:before{border-color: transparent transparent transparent #222;}

#blog.detail nav ul li.non {border:none !important;}

/* footer */
#pcFooter {background:#e6e6e6; position:relative; padding:34px 0 0; overflow:hidden; min-width:1002px;}
.ie8 #pcFooter {min-width:1100px;}
#pcFooter section {max-width:1002px; position:relative; padding:0 0 0 2px; overflow:hidden;}
.ie8 #pcFooter section {min-width:1100px;}

#pcFooter h1 {width:264px; /*float:left;*/ position:absolute; left:46px; top:0px;}
#pcFooter h1 img {width:213px;}
#pcFooter h1 a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}
#pcFooter section div {float:left; width:227px; padding:0; line-height:26px; margin-left:18px;}
#pcFooter section div h2 {color:#666; font-size:12px; font-size:1.2rem; font-weight:bold; border-bottom:1px solid #d2d2d2; margin:0 0 11px; padding-bottom:4px;}
#pcFooter section div ul li a{color:#222; font-size:12px; font-size:1.2rem; line-height:26px;}
#pcFooter section div ul li a:hover {color:#999; text-decoration:underline;}

#pcFooter ul {float:left; font-size:12px; font-size:1.2rem; min-width:150px; padding-right:20px; padding-bottom:30px;}
#pcFooter ul li {line-height:26px;}
#pcFooter ul li a{text-decoration:none;}
#pcFooter ul li a:hover{text-decoration:underline;}
#pcFooter ul.blank li a {position:relative; padding-left:18px;}
#pcFooter ul.blank li a:before{content:''; width:11px; height:10px; background:url(/common/images/sprite.png) -150px -50px no-repeat; position:absolute; left:0; top:50%; margin:-5px 0 0 0;}

#pcFooter .copyRights {background:#222; width:100%; display:block; color:#e6e6e6; font-size:12px; font-size:1.2rem; height:50px; line-height:50px;}
#pcFooter .copyRights .wrap {min-width:1002px;  margin:0 auto; padding:0 11px; position:relative;}
.ie8 #pcFooter .copyRights .wrap {min-width:1100px;}
#pcFooter .copyRights p.footerLogo {margin:20px 0 0;}
#pcFooter .copyRights p.footerLogo a{background:url(/common/images/sprite.png) -400px -400px no-repeat; width:198px; height:12px; display:block; overflow:hidden; font-size:0;}
#pcFooter .copyRights p.footerLogo {float:left;}
#pcFooter .copyRights ul {position:relative;}
#pcFooter .copyRights ul:before{content:''; position:absolute; right:-10px; top:20px; background:#666860; width:1px; height:14px;}
#pcFooter .copyRights ul {padding:20px 0 0;}
#pcFooter .copyRights ul li {float:left;}
#pcFooter .copyRights ul li {border-left:1px solid #666860; line-height:14px; margin-left:10px; padding-left:10px;}
#pcFooter .copyRights small { text-align:right; position:absolute; right:68px; top:2px; font-size:9px; font-size:0.9rem;font-family:Arial, Helvetica, sans-serif;}
#pcFooter .copyRights ul li a{color:#f2f2f2;}

#pcFooter .pagetop {position:absolute; right:0; top:0; width:50px; height:50px;}
#pcFooter .pagetop a{display:block; font-size:0; width:50px; height:50px; white-space:nowrap; overflow:hidden; text-indent:100%; background:#444; position:relative;}
#pcFooter .pagetop a:before{content:''; background:url(/common/images/sprite.png) -250px 0 no-repeat; width:15px; height:9px; position:absolute; left:50%; top:50%; margin:-4px 0 0 -7px; z-index:10;}
#pcFooter .pagetop a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; background-color:#999;}

#spFooter {background:#e6e6e6; position:relative; display:none;}
#spFooter .pagetop {line-height:35px; height:35px;}
#spFooter .pagetop a{height:35px; display:block; white-space:nowrap; width:100%; overflow:hidden; background:#b1b0b0; text-indent:100%; position:relative;}
#spFooter .pagetop a:before{content:''; background:url(/common/images/sprite.png) -100px -75px no-repeat; position:absolute; left:50%; top:50%; width:19px; height:12px; background-size:500px auto; margin:-6px 0 0 -10px;}
#spFooter .pagetop a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; background-color:#222;}

#spFooter h2{background:#f4f4f4; font-size:15px; line-height:45px; font-weight:bold; padding:0 15px;}
#spFooter .ln li a{height:40px; display:block; border-bottom:1px solid #f2f2f2; line-height:40px; padding:0 15px 0 25px; text-decoration:none; font-weight:bold; position:relative; color:#222; font-size:13px; font-size:1.3rem;}
#spFooter .ln li a:before{content:''; width:8px; height:13px; position:absolute; right:15px; top:50%; margin-top:-7px; background:url(/common/images/sprite.png) -125px -50px no-repeat; background-size:500px auto;}
#spFooter .ln li a:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; background-color:#fff;}
#spFooter .ln li.blank a:before{content:''; width:15px; height:12px; position:absolute; right:15px; top:50%; margin-top:-6px; background:url(/common/images/sprite.png) -350px -150px no-repeat; background-size:500px auto;}
#spFooter .other {text-align:center; margin:0 10px; padding:20px 0 0;}
#spFooter .other + .other {padding:0;}
#spFooter .other li {line-height:23px; display:inline;}
#spFooter .other li a{position:relative; text-decoration:none; display:inline-block; padding:0 4px;}
#spFooter .other li a:before{content:''; position:absolute; left:0; top:50%; background:#222; width:1px; height:13px; margin-top:-7px;}
#spFooter .other li:last-child a:after{content:''; position:absolute; right:0; top:50%; background:#222; width:1px; height:13px; margin-top:-7px;}

#spFooter .copyRights {background:#222; width:100%; display:block; color:#e6e6e6; font-size:9px; font-size:0.9rem; height:75px; margin-top:30px; text-align:center; padding:20px 0 0;}
#spFooter .copyRights .footerLogo {margin-bottom:10px;}
#spFooter .copyRights .footerLogo a {display:block; position:relative; height:12px; font-size:0; overflow:hidden;}
#spFooter .copyRights .footerLogo a:before{content:''; display:block; background:url(/common/images/sprite.png) -200px -225px no-repeat; background-size:500px auto; width:193px; height:12px; overflow:hidden; font-size:0; left:50%; top:0; position:absolute; margin-left:-97px;}
#spFooter small {text-align:center;}

.zoomimagecolse {background:url(/common/images/close.png) left top no-repeat; width:50px; height:50px; cursor:pointer;}

@media screen and (min-width:781px) and (max-width:1070px){
#pcFooter .copyRights .wrap {min-width:1002px;  margin:0 auto;}
.ie8 #pcFooter .copyRights .wrap {min-width:1100px;}
/*
#pcFooter .copyRights ul {font-size:10px; font-size:1rem;}
#pcFooter .pagetop {display:none;}
#pcFooter .copyRights small {right:30px;}
*/
#pcFooter .copyRights ul {font-size:10px; font-size:1rem;}
#pcFooter .copyRights small {-webkit-transform:scale(0.85); top:1px; right:inherit; left:677px; text-align:left;}

}

@media screen and (max-width:780px){
body{background:#f2f2f2; padding-top:100px;}
.addBorder #commonHeader {border-bottom:none;}

#commonHeader, main {min-width:inherit;}
#commonHeader #pcNav {top:-9999px; position:absolute;}
#commonHeader #spNav {top:0; position:static;}
#commonHeader section {padding:0;}
#commonHeader h1{background:#fff; width:100%; height:50px; line-height:50px; padding:4px 0 0 15px;}
#commonHeader h1 img {width:auto; height:13px;}
#commonHeader h1 a{padding-top:0;}
#commonHeader #spNav {clear:both; zoom:1; background:#2f2f2f; width:100%;}
#commonHeader #spNav ul {float:none; display:table; width:100%;}
#commonHeader #spNav ul li {display:table-cell; float:none; width:33%;}
#commonHeader #spNav ul li + li {border-left:1px solid #484747;}
#commonHeader #spNav ul li a{color:#fff; text-decoration:none; display:block; text-align:center; height:50px; line-height:50px; font-weight:bold; font-size:12px; font-size:1.2rem; border-top:1px solid #222; border-bottom:1px solid #222;}
#commonHeader #spNav ul li a:hover {color:#222; background:#fff; border-bottom-color:#e4e4e4; border-top-color:#e4e4e4;
-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;}

#commonHeader p.toggle {display:block;}
#commonHeader p.toggle:before{content:''; width:27px; height:3px; background:#CBCBCB; position:absolute; left:12px; top:10px; z-index:0;
/*-webkit-transition:0.1s ease; -moz-transition:0.1s ease; -ms-transition:0.1s ease; -o-transition:0.1s ease; transition:0.1s ease;*/}
#commonHeader p.toggle:after {content:''; width:27px; height:3px; background:#CBCBCB; position:absolute; left:12px; top:26px; z-index:0; opacity:1;
/*-webkit-transition:0.1s ease; -moz-transition:0.1s ease; -ms-transition:0.1s ease; -o-transition:0.1s ease; transition:0.1s ease;*/}
#commonHeader p.toggle a{z-index:100; position:relative;}
#commonHeader p.toggle a:after{content:''; width:27px; height:3px; background:#CBCBCB; position:absolute; left:12px; top:18px; z-index:30;
/*-webkit-transition:0.1s ease; -moz-transition:0.1s ease; -ms-transition:0.1s ease; -o-transition:0.1s ease; transition:0.1s ease;*/}

html.open #commonHeader p.toggle:before{left:12px; top:18px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
html.open #commonHeader p.toggle:after {left:12px; top:18px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
html.open #commonHeader p.toggle a:after{opacity:0;}

main section {margin:0 auto; padding:0 7px;}
main section section {padding:0;}
#pageHeading {height:auto; text-indent:0; margin-bottom:0;}
#pageHeading img {width:100%; height:auto; max-width:640px;}
#pageHeading:before{display:none;}

#spAsideWrap {margin:0 auto 50px;}

/* side menu */
#wrap {width:100%; position:relative; max-width:780px; min-width:320px; margin:0 auto;}
#spAside {height:100%;}
main{-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; left:0; position:relative;}
#commonHeader{-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; left:0;}
#spAside {z-index:999;}
#spAside ul li a {color:#fff; font-size:15px; font-size:1.2rem; height:45px; line-height:45px; padding:0 15px; text-decoration:none; position:relative; display:block;}
#spAside ul li a:before{content:''; width:8px; height:13px; position:absolute; right:10px; top:50%; margin-top:-7px; background:url(/common/images/sprite.png) -100px -50px no-repeat; background-size:500px auto;}
#spAside ul li a span{position:relative; display:inline-block;}
#spAside ul li a span:before{content:''; width:15px; height:12px; position:absolute; right:-25px; top:50%; margin-top:-6px; background:url(/common/images/sprite.png) 0 -25px no-repeat; background-size:500px auto;}
#spAside ul li a:hover {background:#444; border-bottom-color:#CBCBCB; border-top-color:#CBCBCB;
-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;}

#spAside ul li {border-bottom:1px solid #404040;}
html.open main {position:absolute; left:-67%;}
html.open #spAside {right:0;}
html.open #commonHeader{left:-67%;}

#pcFooter {display:none;}
#spFooter {display:block;}

/* contents layout */
#blog header {width:auto; float:none; margin:0 0 20px; border-bottom:2px solid #222; padding-bottom:8px;}
#blog article{width:100%; float:left; padding:0; margin-right:70px;}
#blog aside{width:100%; position:static; margin:0 0 20px;}
#blog aside h2{background:#b1b0b0; color:#fff; padding:0; border:none;}
#blog aside h2 span {display:block; padding:10px; cursor:pointer; position:relative;}
#blog aside h2 span:hover{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
#blog aside h2 span:before{content:''; background:url(/common/images/sprite.png) -125px -75px no-repeat; width:19px; height:12px; position:absolute; right:10px; top:50%; margin-top:-6px; background-size:500px auto;
-webkit-transform:rotate(0deg); transform:rotate(0deg);
-webkit-transition:transform 0.15s ease; -moz-transition:transform 0.15s ease; -ms-transition:transform 0.15s ease; -o-transition:transform 0.15s ease; transition:transform 0.15s ease;}
#blog aside ul {display:none;}
#blog aside ul li a{position:relative; padding:14px 0 14px 20px; background:#fff; border:none; line-height:14px;}
#blog aside ul li + li {margin-top:1px;}
#blog aside ul li a:before{content:''; background:url(/common/images/sprite.png) -75px -50px no-repeat; width:4px; height:6px; position:absolute; left:10px; top:50%; margin-top:-3px; background-size:500px auto;}
#blog aside ul li a:hover {background:#fff;}
#blog aside.open ul {display:block;}
/*
#blog aside.open h2 span:before{content:''; background:url(/common/images/sprite.png) -100px -75px no-repeat; width:19px; height:12px; position:absolute; right:10px; top:50%; margin-top:-6px; background-size:500px auto;}
*/
#blog aside.open h2 span:before{content:''; /*background-image:url(/common/images/sprite.png); background-position:-100px -75px; background-repeat:no-repeat; background-size:500px auto;*/ width:19px; height:12px; position:absolute; right:10px; top:50%; margin:-6px 0 0 -10px;
-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);}

#blog.archive {padding-bottom:0;}

#blog.archive article .item a{padding:15px 10px 15px 125px; border-bottom:1px solid #f2f2f2; display:block; clear:both; zoom:1; text-decoration:none; font-size:14px; font-size:1.4rem; line-height:24px; background:#fff; min-height:93px;}
#blog.archive article .item a:after{content:''; clear:both; display:block;}
#blog.archive article .item a:hover{background-color:#fff; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
#blog.archive article .item p {color:#999; font-size:12px; font-size:1.2rem; line-height:14px; margin:0 0 4px;}
#blog.archive article .item p.img {float:left; width:100px; margin:0 15px 0 0;position: absolute; left:10px; top:15px;}
#blog.archive article .item p.img img  {height:63px !important;}
#blog.archive article .item h2 {zoom:1; overflow:hidden; color:#222; line-height:19px;}

#blog.archive article .item.pdf a{padding:15px 10px 15px 10px; min-height:inherit;}
#blog.archive article .item.pdf a p{position:static; width:auto;}
#blog.archive article .item.pdf a p span {display:inline-block; position:relative; height:10px; width:30px; border-left:1px solid #999999; padding-left:5px; text-indent:100%; overflow:hidden; white-space:nowrap; position:relative; background:none; margin-left:8px;}
#blog.archive article .item.pdf a p span:before{content:''; background:url(/common/images/sprite.png) -50px -25px; background-size:500px auto; width:20px; height:10px; overflow:hidden; position:absolute; right:auto; top:auto; left:5px;}
#blog.archive article .item.pdf h2{line-height:20px;}
#blog.archive article .item.brand a{padding:15px 10px 15px 10px; min-height:inherit;}
#blog.archive article .item.brand a p{position:static; width:auto; display:inline-block;}
#blog.archive article .item.brand a p span {display:inline-block; text-align:left; width:auto;}
#blog.archive article .item.brand a p span br{display:none;}
#blog.archive article .item.brand a p span + span{text-align:left; width:auto; position:relative; padding-left:1em;}
#blog.archive article .item.brand a p span + span:before{content:'｜'; position:absolute; left:0; top:0;}
#blog.archive article .item.brand h2{line-height:20px;}


#blog.detail {padding-bottom:0px;}
#blog.detail header {margin:0 0 1px; border-bottom:none; padding:37px 10px 20px; background:#fff; position:relative;}
#blog.detail header h1{font-size:16px; font-size:1.6rem; line-height:23px; margin-bottom:0; border:none; padding:0;}
#blog.detail header .date {font-size:10px; font-size:1rem; position:absolute; left:10px; top:18px;}
#blog.detail article {background:#fff; padding:30px 10px 5px; margin-bottom:1px;}
#blog.detail article p {font-size:14px; font-size:1.4rem; line-height:24px; margin-bottom:25px;}
#blog.detail .snsLinks {font-size:0; clear:both; zoom:1; padding:15px 10px 4px; background:#fff; margin-bottom:1px;}
#blog.detail .snsLinks:after{content:''; clear:both; display:block;}
#blog.detail .snsLinks ul li {float:left; padding:0 11px 11px 0;}

#blog.detail nav {padding:20px 10px; width:auto; margin:0 0 20px; background:#fff; border:none;}
#blog.detail nav:after{content:''; clear:both; display:block;}
#blog.detail nav ul {display:table; width:100%; table-layout:fixed;}
#blog.detail nav ul li {display:table-cell; font-size:13px; font-size:1.3rem; vertical-align:top; min-width:inherit; border:none; width:auto; padding:0 5px;}
#blog.detail nav ul li.prev{float:none; position:static; padding-left:0;}
#blog.detail nav ul li.next{float:none; position:static; padding-right:0;}
#blog.detail nav ul li a {text-decoration:none; display:block; position:relative; background:#000; color:#fff; height:40px; line-height:39px; width:auto; padding:0;}
#blog.detail nav ul li a span span{display:none;}
#blog.detail nav ul li a span:before{display:none;}
#blog.detail nav ul li.prev a:before{content:''; clear:both; display:block; background:url(/common/images/sprite.png) -110px -50px no-repeat; background-size:500px auto; width:8px; height:13px; position:absolute; left:7px; top:50%; margin:-7px 0 0;}
#blog.detail nav ul li.next a:before{content:''; clear:both; display:block; background:url(/common/images/sprite.png) -100px -50px no-repeat; background-size:500px auto; width:8px; height:13px; position:absolute; right:7px; top:50%; margin:-7px 0 0;}

#blog.detail nav ul li.prev a span.inner {display:block; white-space:nowrap;}
#blog.detail nav ul li.next a span.inner {display:block; white-space:nowrap;}

#blog.detail nav ul li.hover {border:none;}
#blog.detail nav ul li {border:none;}
#blog.detail nav ul li.hover {border:none;}
#blog.detail nav ul li a:hover {background:#444; color:#fff;}

.zoomimagecolse {background:url(/common/images/close.png) left top no-repeat; width:25px; height:25px; background-size:25px 25px; cursor:pointer;}

}


@media screen and (max-width:780px){
#commonHeader {z-index:901;}
}
@media screen and (max-width:640px){
#commonHeader {z-index:902;}	
}

.zoomimage {cursor:pointer;}