@charset "UTF-8";
/*
Theme Name: V-STORAGE (2018)
Theme URI: //v-storage.bandaivisual.co.jp/
Version: 1.0
*/


/*2017 02 24 .nav部変更*/


/*----------------------------------------------------------------------

Set

----------------------------------------------------------------------*/
@import "assets/stylesheets/normalize.css";
@font-face {
    font-family: 'iconfont';
/*
    src:url('./assets/fonts/iconfont.eot?-pmgf0a');
    src:url('./assets/fonts/iconfont.eot?#iefix-pmgf0a') format('embedded-opentype'),
    url('./assets/fonts/iconfont.ttf?-pmgf0a') format('truetype'),
    url('./assets/fonts/iconfont.woff?-pmgf0a') format('woff'),
    url('./assets/fonts/iconfont.svg?-pmgf0a#icomoon') format('svg');
*/
    src:url('./assets/fonts/iconfont.eot');
    src:url('./assets/fonts/iconfont.eot') format('embedded-opentype'),
    url('./assets/fonts/iconfont.ttf') format('truetype'),
    url('./assets/fonts/iconfont.woff') format('woff'),
    url('./assets/fonts/iconfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { box-sizing: border-box; width: 100%; /* overflow-x: hidden; */ }
html { height: 100%;     overflow-y: scroll;}
body {
    background-color: #fff;
    color: #333;
    font-size: 14px;
    letter-spacing: 0em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    position: relative;
    min-height: 100%;
    height: auto;
	
	overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.4;
	font-size: medium;
}
p { line-height: 1.4; text-align: justify;}
a, a:visited, a:hover { color: #333; text-decoration: none;}
#contents { width: 100%;  margin: 0 auto; padding: 0 0 20px; position: relative;}

/* サイト全体の幅 余白付き */
.container {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

/* ２カラムでの構成時にcontainerと一緒に使用 */
.column { padding: 0;}

/* ２カラムでの構成時にcolumunの子要素として使用 */
.column-2 {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 10px;
    padding: 0 10px;
}

/* PC表示時、表示 */
.pc { display: none;}

/* SP表示時、表示 */
.sp { display: block;}
.figure, .img { margin: 0;}
.figure img {
    display: block;
    width: 100%;
    height: auto;
}


/*----------------------------------------------------------------------

IconFont Style

----------------------------------------------------------------------*/
.icon-XL, .icon-L, .icon-M, .icon-S {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "iconfont", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-decoration: inherit;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}
.icon-XL { display: block; font-size: 30px; width: 30px;}
.icon-L { font-size: 28px; width: 28px;}
.icon-M { font-size: 24px; width: 24px;}
.icon-S { font-size: 16px; width: 16px;}
.icon-article:before { content: "\e600";}
.icon-bv:before { content: "\e601";}
.icon-down:before { content: "\e602";}
.icon-event:before { content: "\e603";}
.icon-facebook:before { content: "\e604";}
.icon-google:before { content: "\e605";}
.icon-hatena:before { content: "\e606";}
.icon-left:before { content: "\e607";}
.icon-close:before { content: "\e608";}
.icon-movie:before { content: "\e609";}
.icon-map:before { content: "\e610";}
.icon-tag:before { content: "\e611";}
.icon-point:before { content: "\e612";}
.icon-present:before { content: "\e60a";}
.icon-review:before { content: "\e60b";}
.icon-right:before { content: "\e60c";}
.icon-search:before { content: "\e60d";}
.icon-twitter:before { content: "\e60e";}
.icon-up:before { content: "\e60f";}

.matome-btn .icon-M { float: left; display: block;}
.red-btn a { background-color: #e60012;}
.facebook-btn a { background-color: #3c5c99;}
.twitter-btn a { background-color: #55acee;}
.google-btn a { background-color: #dd4a3a;}
.hatena-btn a { background-color: #1aa5dc;}

.icon-special { margin-top: -5px !important; }
.icon-product:before { content: url(./assets/images/sakuhin_icon_r.png); }
@media screen and (max-width: 768px){
   .icon-product:before { content: url(./assets/images/sakuhin_icon_r_16.png); }
}


/*----------------------------------------------------------------------

ClearFix Style

----------------------------------------------------------------------*/
#contents:after, .container:after, #headline:after, ul:after, .matome-btn:after, #modal-header:after,
#search-container:after, .pc-pagenation:after, .sp-pagenation:after, .pagenavi:after, .card-list:after,
.article a:after, #footer-section1:after, #footer-section1 .lists:after, #footer-section2:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/*----------------------------------------------------------------------

SlideMenu Style

----------------------------------------------------------------------*/
#sb-site, .sb-site-container, .sb-slidebar {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html.sb-scroll-lock.sb-active:not(.sb-static) { overflow: hidden;}
#sb-site, .sb-site-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    background-color: #fff;
	border-top:2px solid #e60012;
}
#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
    content: '';
    display: table;
    clear: both;
}
.sb-slidebar {
    background-color: #222;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 0;
    display: none;
}
.sb-slidebar, .sb-slidebar * { -webkit-transform: translateZ( 0px );}
.sb-left { left: 0;}
.sb-right { right: 0;}
html.sb-static .sb-slidebar, .sb-slidebar.sb-static { position: absolute;}
.sb-slidebar.sb-active { display: block;}
.sb-style-overlay { z-index: 9999;}
.sb-momentum-scrolling { -webkit-overflow-scrolling: touch;}
.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
    -webkit-transition: -webkit-transform 300ms cubic-bezier(.55,0,.1,1);
    transition: transform 300ms cubic-bezier(.55,0,.1,1);
    -webkit-transition-property: -webkit-transform, left, right;
    -webkit-backface-visibility: hidden;
}
.sb-hide { display: none;}

.sb-slidebar { background: url(./assets/images/m-bg.gif);width: 240px;}
.sb-slidebar a {
    background: url(./assets/images/m-bg.gif);
    border-bottom: solid 1px #999;
    color: #333;
    font-size: 18px;
    display: block;
    padding: 20px;
}
.sb-slidebar .down { background: url(./assets/images/w-bg.gif);position: relative;}
.sb-slidebar .down:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "iconfont", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 24px;
    text-transform: none;
    text-decoration: inherit;
    vertical-align: middle;
    line-height: 1;
    content: "\e602";
    position: absolute;
    top: 20px;
    right: 10px;
    display: block;
    width: 24px;
}

.sb-slidebar .lower_title{
	font-size: 16px;
    padding: 10px 0px 10px 20px;
	font-weight: bold;
	border-bottom: 1px solid #999;
	margin-bottom: 1px;
}

.sb-slidebar .single{
	background: url(./assets/images/w-bg.gif);
}
.sb-slidebar .icon-M { margin: 0 10px 0 0;}
.sb-slidebar .lower { display: none;}
.sb-slidebar .lower li{}
.sb-slidebar .lower a {
    background-color: transparent;
    font-size: 16px;
    padding: 10px 0px 10px 20px;
	margin-bottom: 1px;
}
#magazine-container { 
	background-color: #e60012; }
#magazine-container a {
	background-image: none;
    background-color: #e60012;
    color: #fff;
    font-size: 18px;
    padding: 15px 20px;
}

.sb-slidebar .side_logo{
	width: 190px;
	margin: 0 auto;

}

.sb-slidebar .side_logo img{
	width: 190px;
	margin: 20px 0;
}



/*----------------------------------------------------------------------

Modal Style

----------------------------------------------------------------------*/
.custombox-modal-wrapper,.custombox-overlay{right:0;top:0;bottom:0;left:0;position:fixed}.custombox-open,.custombox-open body{overflow:hidden}.custombox-perspective,.custombox-perspective body{-webkit-perspective:600px;perspective:600px;height:100%}.custombox-modal-container-fall,.custombox-modal-container-flip,.custombox-modal-container-rotate,.custombox-modal-container-sidefall,.custombox-modal-container-sign,.custombox-modal-container-slit{-webkit-perspective:1300px;perspective:1300px}.custombox-overlay-open{visibility:visible;opacity:1}.custombox-overlay{-webkit-transition-delay:0s;transition-delay:0s}.custombox-overlay-default{-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.custombox-modal-wrapper{outline:0;overflow:auto;text-align:center}.custombox-modal-container{margin:0 auto;position:relative}.custombox-modal img{max-width:100%;height:auto}.custombox-overlay-letmein{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:ease;transition-timing-function:ease;visibility:hidden}.custombox-overlay-open.custombox-overlay-slidetogether,.custombox-overlay-slidetogether{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-overlay-open.custombox-overlay-letmein{-webkit-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;visibility:visible;opacity:1}.custombox-overlay-slidetogether{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.custombox-overlay-open.custombox-overlay-slidetogether{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-overlay-corner{-webkit-transform:translateY(150px)translateX(150px);-ms-transform:translateY(150px)translateX(150px);transform:translateY(150px)translateX(150px);-webkit-transition-property:opacity,-webkit-transform,visibility;transition-property:opacity,transform,visibility}.custombox-overlay-open.custombox-overlay-corner{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform}.custombox-overlay-open.custombox-overlay-scale,.custombox-overlay-scale{-webkit-transition-property:-webkit-transform;transition-property:transform}.custombox-overlay-scale{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}.custombox-overlay-open.custombox-overlay-scale{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.custombox-overlay-door,.custombox-overlay-open.custombox-overlay-door{-webkit-transition-property:width ease-in-out;transition-property:width ease-in-out}.custombox-overlay-door{visibility:hidden;width:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.custombox-overlay-open.custombox-overlay-door{visibility:visible;width:100%}.custombox-container-push{overflow-x:hidden;-webkit-transition-property:-webkit-transform;transition-property:transform}.custombox-overlay-open.custombox-overlay-push,.custombox-overlay-push{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-container-open.custombox-container-push{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.custombox-overlay-push{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.custombox-overlay-open.custombox-overlay-push{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-open-contentscale body{background-color:#DDD}.custombox-container-contentscale{-webkit-transition:-webkit-transform .5s;transition:transform .5s;overflow:hidden;height:100%}.custombox-overlay-contentscale,.custombox-overlay-open.custombox-overlay-contentscale{-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out}.custombox-container-open.custombox-container-contentscale{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.custombox-overlay-contentscale{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.custombox-overlay-open.custombox-overlay-contentscale{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-container-blur,.custombox-modal-fadein,.custombox-modal-flip-horizontal,.custombox-modal-flip-vertical,.custombox-modal-newspaper,.custombox-modal-open .custombox-modal-fall,.custombox-modal-rotate-bottom,.custombox-modal-rotate-left,.custombox-modal-superscaled,.custombox-overlay-blur,.custombox-overlay-newspaper,.custombox-overlay-open.custombox-overlay-makeway,.custombox-overlay-open.custombox-overlay-slip{-webkit-transition-property:all;transition-property:all}.custombox-container-open.custombox-container-makeway{height:100%;overflow:hidden}.custombox-container-open.custombox-container-makeway,.custombox-overlay-open.custombox-overlay-makeway{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-webkit-animation:rotateRightSideFirst .5s forwards ease-in;animation:rotateRightSideFirst .5s forwards ease-in}@-webkit-keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px)rotateY(5deg);transform:translateZ(-50px)rotateY(5deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px)}}@keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px)rotateY(5deg);transform:translateZ(-50px)rotateY(5deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px);transform:translateZ(-200px)}}.custombox-container-open.custombox-container-slip,.custombox-overlay-open.custombox-overlay-slip{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-animation:OpenTop .5s forwards ease-in-out;animation:OpenTop .5s forwards ease-in-out}@-webkit-keyframes OpenTop{50%{-webkit-transform:rotateX(10deg);transform:rotateX(10deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes OpenTop{50%{-webkit-transform:rotateX(10deg);transform:rotateX(10deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.custombox-modal-fadein{-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0;visibility:hidden}.custombox-modal-open .custombox-modal-fadein{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}.custombox-modal-container-slide>div,.custombox-modal-container-slidetogether>div{opacity:0;float:left}.custombox-modal-open>.custombox-modal-container-slide>div,.custombox-modal-open>.custombox-modal-container-slidetogether>div{opacity:1}.custombox-modal-slide-top{-webkit-transform:translateY(-300%);-ms-transform:translateY(-300%);transform:translateY(-300%)}.custombox-modal-open .custombox-modal-slide-top{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-slide-left{-webkit-transform:translateX(-300%);-ms-transform:translateX(-300%);transform:translateX(-300%)}.custombox-modal-open .custombox-modal-slide-left{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-slide-right{-webkit-transform:translateX(300%);-ms-transform:translateX(300%);transform:translateX(300%)}.custombox-modal-open .custombox-modal-slide-right{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-slide-bottom{-webkit-transform:translateY(300%);-ms-transform:translateY(300%);transform:translateY(300%)}.custombox-modal-open .custombox-modal-slide-bottom{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-newspaper{-webkit-transform:scale(0)rotate(720deg);-ms-transform:scale(0)rotate(720deg);transform:scale(0)rotate(720deg);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-newspaper{-webkit-transform:scale(1)rotate(0);-ms-transform:scale(1)rotate(0);transform:scale(1)rotate(0);opacity:1}.custombox-modal-fall{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(600px)rotateX(20deg);transform:translateZ(600px)rotateX(20deg);opacity:0}.custombox-modal-open .custombox-modal-fall{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transform:translateZ(0)rotateX(0);transform:translateZ(0)rotateX(0);opacity:1}.custombox-modal-wrapper-sidefall{overflow-x:hidden}.custombox-modal-sidefall{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(30%)translateZ(600px)rotate(10deg);transform:translate(30%)translateZ(600px)rotate(10deg);opacity:0}.custombox-modal-open .custombox-modal-sidefall{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:all;transition-property:all;-webkit-transform:translate(0)translateZ(0)rotate(0);transform:translate(0)translateZ(0)rotate(0);opacity:1}.custombox-open-blur .custombox-container-blur{-webkit-filter:blur(3px);filter:blur(3px)}@media all and (-ms-high-contrast:none){.custombox-open-blur .custombox-container-blur{text-shadow:0 0 8px #000;color:rgba(255,255,255,0);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');zoom:1}}.custombox-modal-blur{-webkit-transform:translateY(-5%);-ms-transform:translateY(-5%);transform:translateY(-5%);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-blur{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.custombox-modal-flip-horizontal{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);transform:rotateY(-70deg);opacity:0}.custombox-modal-open .custombox-modal-flip-horizontal{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}.custombox-modal-flip-vertical{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-70deg);transform:rotateX(-70deg);opacity:0}.custombox-modal-open .custombox-modal-flip-vertical{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}.custombox-modal-sign{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-60deg);transform:rotateX(-60deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;opacity:0;-webkit-transition-property:all;transition-property:all}.custombox-modal-open .custombox-modal-sign{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}.custombox-modal-superscaled{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;position:absolute}.custombox-modal-open .custombox-modal-superscaled{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.custombox-modal-slit{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-3000px)rotateY(90deg);transform:translateZ(-3000px)rotateY(90deg);opacity:0}.custombox-modal-open .custombox-modal-slit{-webkit-animation:slit .7s forwards ease-out;animation:slit .7s forwards ease-out}@-webkit-keyframes slit{50%{-webkit-transform:translateZ(-250px)rotateY(89deg);transform:translateZ(-250px)rotateY(89deg);opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0)rotateY(0);transform:translateZ(0)rotateY(0);opacity:1}}@keyframes slit{50%{-webkit-transform:translateZ(-250px)rotateY(89deg);transform:translateZ(-250px)rotateY(89deg);opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0)rotateY(0);transform:translateZ(0)rotateY(0);opacity:1}}.custombox-modal-rotate-bottom{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateY(100%)rotateX(90deg);transform:translateY(100%)rotateX(90deg);-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;position:absolute}.custombox-modal-open .custombox-modal-rotate-bottom{-webkit-transform:translateY(0)rotateX(0);transform:translateY(0)rotateX(0);opacity:1}.custombox-modal-rotate-left{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(100px)translateX(-30%)rotateY(90deg);transform:translateZ(100px)translateX(-30%)rotateY(90deg);-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;opacity:0;position:absolute}.custombox-modal-open .custombox-modal-rotate-left{-webkit-transform:translateZ(0)translateX(0)rotateY(0);transform:translateZ(0)translateX(0)rotateY(0);opacity:1}.custombox-modal-container-letmein{-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;opacity:1}.custombox-modal-letmein{opacity:0;-webkit-transform:translateY(300%);-ms-transform:translateY(300%);transform:translateY(300%);float:left}.custombox-modal-open .custombox-modal-letmein{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition-property:all;transition-property:all}.custombox-modal-makeway{-webkit-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%);opacity:0;float:left}.custombox-modal-open .custombox-modal-makeway{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}.custombox-modal-wrapper-makeway{overflow:hidden}.custombox-modal-slip{-webkit-transform:translateY(-350%);-ms-transform:translateY(-350%);transform:translateY(-350%)}.custombox-modal-open .custombox-modal-slip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition-property:all;transition-property:all}.custombox-modal-corner{opacity:0;-webkit-transform:translateY(150px)translateX(150px);-ms-transform:translateY(150px)translateX(150px);transform:translateY(150px)translateX(150px);-webkit-transition-property:opacity,-webkit-transform,visibility;transition-property:opacity,transform,visibility}.custombox-modal-open .custombox-modal-corner{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform}.custombox-modal-slidetogether{-webkit-transform:translateY(-600%);-ms-transform:translateY(-600%);transform:translateY(-600%)}.custombox-modal-open .custombox-modal-slidetogether{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.custombox-modal-scale{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9);-webkit-transition:-webkit-transform;transition:transform;opacity:0}.custombox-modal-open .custombox-modal-scale{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform;transition:transform;opacity:1}.custombox-modal-door{visibility:hidden;opacity:0}.custombox-modal-open .custombox-modal-door{opacity:1;visibility:visible}.custombox-modal-push{-webkit-transform:translateX(-300%);-ms-transform:translateX(-300%);transform:translateX(-300%)}.custombox-modal-open .custombox-modal-push{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.custombox-modal-contentscale{-webkit-transform:translateY(600%);-ms-transform:translateY(600%);transform:translateY(600%);-webkit-transition-property:-webkit-transform ease-in-out;transition-property:transform ease-in-out;position:absolute}.custombox-modal-open .custombox-modal-contentscale{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
#modal {
    background-image: url('./assets/images/w-bg.gif');
    border: solid 2px #e60012;
    display: none;
    padding: 20px 0 0;
}
#modal-header { position: relative; padding: 0 10px 20px;}
#modal-search { box-sizing: border-box; width: 100%; padding: 0 54px 0 0;}
#modal-search .search-form {
    padding: 2px;
	background-color: #203380;
	position: relative;
	width: 100%;
    border-radius: 3px;
    float: left;
}
#modal-keyword { box-sizing: border-box; width: 100%; padding: 0 70px 0 0;}
#modal .keyword {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    display: block;
    width: 100%;
    padding: 0 5px;
}
#modal .search {
    width: 70px;
    height: 40px;
    padding: 0;
	border: none;
    color: #fff;
    background-color: #203380;
    font-size: 14px;
    line-height: 40px;
    vertical-align: middle;
    position: absolute;
    top: 2px;
    right: 0;
}
#modal .close {
    background-color: #203380;
    border: none;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    line-height: 44px;
    position: absolute;
    right: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
}
#modal h2 {
    color: #203380;
    font-size: 16px;
    text-align: center;
    margin: 0 10px 10px;
}
#modal h3 {
    background-color: #203380;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 0 10px 10px;
    padding: 10px;
}
#modal li {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 10px;
}
#modal a {
    box-sizing: border-box;
    background-color: #fff;
    border: solid 1px #ddd;
    font-weight: bold;
    text-align: left;
    display: table;
    width: 100%;
}
#modal .modale-title { display: table-cell; vertical-align: middle;}
#modal h4 { font-size: 14px; display: inline-block; margin: 0 10px 0 0;}
#modal span {
    font-size: 12px;
    white-space: nowrap;
    display: inline-block;
    margin: 0 10px 0 0;
}
#modal .figure { display: table-cell; width: 78px; padding: 0 10px 0 0;}


/*----------------------------------------------------------------------

common Style （2018 03 31 変更）
header fixed
----------------------------------------------------------------------*/
body {
	padding-top: 100px;
    background: #f5f5f5;
}
.outlink-b:before {
	margin-right:5px;
	content: url(./assets/images/common/icon_outlink.png);
}
.outlink-a:after {
	margin-left:5px;
	content: url(./assets/images/common/icon_outlink.png);
}




/*----------------------------------------------------------------------

Header Style （2018 03 31 変更）

----------------------------------------------------------------------*/
#global-header {
    width: 100%;
    background: #fff;
	box-shadow: 0 1px 7px #eee;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
#global-header .container {
	position: relative;
	height: 80px;
	margin:auto;
}
#global-header .logo {
	width: 200px;
    position: absolute;
    left:  10px;
	top: 10px;
}
#global-header .logo img {
	width: 100%;
}
#global-header .utility {
    position: absolute;
	width: 400px;
    left: 240px;
	top: 15px;
}
#global-header .utility li {
	float: left;
    font-size: 13px;
    margin: 0 25px 0 0;
	line-height: 2;
}
#global-header .utility li a {
	text-decoration: underline;
}


#global-header .search-form {
    box-sizing: border-box;
    width: 210px;
    padding: 25px 10px 25px 45px;
    background: url(./assets/images/common/icon_search.png) 10px center no-repeat;
	border-left: solid 1px #ddd;
    position: absolute;
    right: 285px;
    top: 0;
}
#global-header .search-form .keyword {
    border: none;
	box-sizing:border-box;
    font-size: 12px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
	height: 30px;
	color: #aaaaaa;
    padding:0;
}


#global-header #head-btns {
    position: absolute;
    right: 0;
	top: 0;
	
	border-right: solid 1px #ddd;
}
#global-header #head-btns li {
	width: 70px;
	line-height: 80px;
	float: left;
	border-left: solid 1px #dddddd;
	cursor: pointer;
}
#global-header #head-btns li img {
    width: 100%;
	vertical-align:middle;
}
#global-header #head-btns li a#btn-search-product {
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    height: 80px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 5px;
    padding-top: 20px;
    color: #777;
}


/*----------------------------------------------------------------------

Footer Style

----------------------------------------------------------------------*/
#global-footer {
	padding: 20px 0;
	background-color: #dddddd;
}

#global-footer .icon-right:before {
	color: #333333;
}


/*----------------------------------------------------------------------

FooterNav Style

----------------------------------------------------------------------*/
#global-footer .container { padding: 0; }

#footer-nav {
	overflow: hidden;
	list-style: none;
}
#footer-nav > li {
	float: left;
}
#footer-nav li.ft-01 { width: 150px; }
#footer-nav li.ft-02 { width: 300px; }
#footer-nav li.ft-03 { width: 380px; }
#footer-nav li.ft-04 { width: 170px; }

#footer-nav > li h3,
#footer-nav > li h3 a {
	font-size: 14px;
	color: #333;
}
#footer-nav > li h3 a {
	text-decoration: underline;
}
#footer-nav .list li a {
	font-size: 12px;
	color: #333;
}
#footer-nav .list li a:hover {
    text-decoration: underline;
}
#footer-nav .list li a:hover i {
    text-decoration: none;
}


/*----------------------------------------------------------------------
Copyrights Style
----------------------------------------------------------------------*/
#copyrights {
    background-color: #e60012;
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 15px 0;
}


/*----------------------------------------------------------------------

side base Style

----------------------------------------------------------------------*/
#side {
    width: 320px;
	float: right;
}
.side-box {
	background: #fff;
	margin-bottom: 20px;
    border: solid 1px #dddddd;
}
.side-box .cmn-ttl {
	 font-size: 13px;
	 font-weight: normal;
	 line-height: 40px;
	 margin-bottom: 20px;
	 text-align:center;
	 background: #dddddd;
}
.side-box .side-box-contents {
	padding: 0 15px;
}
.side-box .thumb {
	margin: 0 auto 10px;
	text-align:center;
}
.side-box img {
	max-width: 100%;
}
.side-box .side-box-contents .more {
	text-align: center;
	border-top: solid 1px #ddd;
	padding: 15px 0;
	line-height: 1;
}
.side-box .side-box-contents .more a {
	color: #e60012;
	font-size: 14px;
}



/*----------------------------------------------------------------------

Back Style

----------------------------------------------------------------------*/
#back-top {
    border-radius: 3px;
    background-color: #dddddd;
    color:#fff;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 0;
    z-index: 9999;
    width: 24px;
    padding: 10px;
}
#back-top .icon-up {
    color: #333333;
}


/*----------------------------------------------------------------------

popup menu Style

----------------------------------------------------------------------*/

#popup-menu {
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	left: 0;
	top:0;
	z-index: 20000;
	opacity: 0;
    visibility: hidden;
    transition-duration: 500ms;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
}
#popup-menu.active {
    visibility: visible;
    opacity: 1;
   -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
#popup-menu img {
	max-width: 100%;
}
#popup-close {
    width: 36px;
    height: 36px;
    background: url(./assets/images/nav/close.png) no-repeat center;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 40px;
}
#popup-menu .popup-menu-inner {
	padding-top: 20px;
}
#popup-menu .popup-menu-inner .logo {
    display:block;
	text-align:center;
    margin: 0 auto 20px;	
}

/* spNav-main */
#spNav-main ul {
    overflow: hidden;
    border-bottom: solid 1px #949494;
}
#spNav-main ul li {
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    float: left;
    border-right: solid 1px #949494;
    border-top: solid 1px #949494;
}
#spNav-main ul li:nth-child(4n) {
    border-right: none;
}
#spNav-main ul li a {
	display: block;
	padding: 10px;
}


/* spNav-sub */
#spNav-sub ul {
    overflow: hidden;
}
#spNav-sub ul li {
    width: 50%;
    box-sizing: border-box;
    float: left;
    border-right: solid 1px #949494;
    border-bottom: solid 1px #949494;
}
#spNav-sub ul li:nth-child(even) {
    border-right: none;
}
#spNav-sub ul li a {
	display: block;
	font-size: 15px;
	font-weight: bold;
	color: #333333;
	padding: 15px 10px;
	background: url(./assets/images/nav/nav_arrow.png) no-repeat 97% center;
	background-size: 8px 14px;
}

/* spNav-sns */
#spNav-sns {
	text-align:center;
	padding-top: 30px;
}
#spNav-sns li {
	display: inline;
	margin:0 15px
}
#spNav-sns li img {
    height: 45px;
    width: auto;
}

/*----------------------------------------------------------------------

HeadLine Style

----------------------------------------------------------------------*/
/* 下層ページ大見出しにて使用 */
#headline-container {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}
#headline {
    /* background-image: url('./assets/images/w-bg.gif'); */
	background: #fff;
    border: solid 1px #dedede;
    margin: 0 0 20px;
    padding: 10px;
}
/* #headline h2 { font-size: 18px;} */

#headline h2 { font-size: 13px; font-weight:normal;}


/*----------------------------------------------------------------------

Tabs Style

----------------------------------------------------------------------*/
#tab {
    box-sizing: border-box;
    border: solid 2px #e60012;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-radius: 3px;
    width: 100%;
    margin: 0 0 20px;
}
#tab li {
    box-sizing: border-box;
    border-bottom: solid 1px #e60012;
    border-right: solid 1px #e60012;
    float: left;
    width: 33.333333%;
    height: 35px;
}
#tab a, #tab span {
    box-sizing: border-box;
    color: #e60012;
    text-align: center;
    display: block;
    padding: 10px 0;
}
#tab .active { background-color: #e60012; color: #fff;}


/*----------------------------------------------------------------------

Pagenation Style

----------------------------------------------------------------------*/
.pagenation { margin: 0 0 20px;}
.sp-pagenation { position: relative;}
.sp-pagenation .number { text-align: center; padding: 0 62px;}
.sp-pagenation .prev, .sp-pagenation .next { position: absolute;}
.sp-pagenation .next { right: 0;}

.pagenation .number { line-height: 24px;}
.pagenation .prev { padding: 0 10px 0 0;}
.pagenation .next { padding: 0 0 0 10px;}
.pagenation li {
    text-align: center;
    /*display: inline-block;*/
    /*width: 28px;*/
    padding: 5px 0;
	float: left;
}
.pagenation li a, .pagenation li span { border-right: solid 1px #333; display: block; padding: 0 10px;}
.pagenation li .active { color: #e60012;}
.pagenation li:first-child a, .pagenation li:first-child span { border-left: solid 1px #333;}


/*----------------------------------------------------------------------

Card Style

----------------------------------------------------------------------*/
.card-list { margin: 0 0 10px;}
.card {
    box-sizing: border-box;
    float: left;
    width: 50%;
    margin: 0 0 10px;
    padding: 0 5px;
}
.article { background-color: #b8000e; height: 100%;}
.article a,
.article .fin {
    box-sizing: border-box;
    background: #fff;
    border: solid 1px #dedede;
    display: block;
    position: relative;
    height: 100%;
}
.article-cat { background-color: #e8e8e8; font-size: 12px; padding: 10px;}
.article-cat .icon-M {
    background-color: #e60012;
    border-radius: 50%;
    color: #fff;
    margin: 0 10px 0 0;
    padding: 3px;
}
.article-contents { padding: 10px;}
.article .thumbnail { text-align: center; position: relative; margin: 0 0 10px;}
.article .here {
    border: solid 2px #e60012;
    border-radius: 3px;
    background-color: #fff;
    color: #e60012;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.13em;
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 3px 5px 2px;
    z-index: 1;
}

@media screen and (max-width: 768px){
	.article .here{
		font-size: 11px;
		letter-spacing: -0.01em;
		top: 88% !important;
		left: 0;
		padding: 3px 0 2px;
		width: 60px;
		text-align:center;
	}
}

/*------ココだけマークの装飾 off 20160721

.article .here:before {
    border: solid 5px #e60012;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
    position: absolute;
    bottom: -10px;
    right: 8px;
    width: 0;
    height: 0;
}
.article .here:after {
    border: solid 3px #fff;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
    position: absolute;
    bottom: -5px;
    right: 10px;
    width: 0;
    height: 0;
}

--------------------------------------*/

.article .fin-text {
    background-color: rgba(51, 51, 51, .8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC333333,endColorstr=#CC333333);
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 34px;
    position: absolute;
    top: 50%;
    right: 10px;
    left: 10px;
    z-index: 999;
    height: 34px;
    margin: -17px 0 0;
}
.article .img { overflow: hidden; height: 82px;}
.article .img img { width: auto; height: 82px;}
.article h2 {  margin: 0 0 10px;     font-size: 14px; font-weight:normal;} /* 16 ⇒　14へ統一 */
.article h2 span {
    background-color: #666;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 2px 4px;
}
.article .title { font-size: 12px; margin: 0 0 10px;}
.article .time { color: #999; font-size: 10px; display: block;}
.article .limit {
    color: #e60012;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 10px;
}
.article .play-count li {
    color: #999;
    font-size: 12px;
    display: inline-block;
    margin: 0 5px 0 0;
}
#more-btn a,
.more-btn a {
    box-sizing: border-box;
    background-color: #e60012;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    display: block;
    max-width: 320px;
    line-height: 40px;
    margin: 0 auto 20px;
    padding: 0;
	cursor: pointer;
}



/*----------------------------------------------------------------------

Banner Style

----------------------------------------------------------------------*/
#banner { margin: 0 0 20px;padding: 0 10px;}
#left-banner, #right-banner {
    position: absolute;
    z-index: 999;
    width: 170px;
    margin: 0 0 0 -180px;
    top: 0;
}
#left-banner { margin: 0 0 0 -180px;}
#right-banner { margin: 0 0 0 1030px;}
#banner img, #left-banner img, #right-banner img {
    display: block;
    width: 100%;
    height: auto;
}



/*----------------------------------------------------------------------

注目記事 15.12.14

----------------------------------------------------------------------*/
#desc .readlink a {
    font-size: 16px;
    line-height: 20px;
    color: #E60012;
    text-decoration: underline;
    font-family: "Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

#post-hidden h3 {
    margin: 20px 0 0 0;
    font-size: 20px !important;
    text-align: left !important;;
    color: #333 !important;
}

#post-hidden h4 {
    margin: 20px 0 0 0;
    font-size: 18px !important;
    text-align: left;
    color: #0026E5;
}

#post-hidden h5 {
    margin: 20px 0 0 0;
    padding: 5px 0 5px 20px;
    font-size: 14px;
    line-height: 22px;
    border-left: 2px solid #333333;
}

#post-hidden h6 {
    margin: 20px 0 0 0;
    line-height: 20px;
}

#post-hidden p {
    margin: 20px 0 0 0;
}

#post-hidden a {
    color: #E60012;
    text-decoration: underline;
}

#post-hidden .s {
    font-size: 12px;
}

#post-hidden .copyright {
    font-size: 12px;
    line-height: 20px;
    color: #999;
    font-family: "Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

#post-hidden .caption {
    display: block;
    padding: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #999999;
}

#post-hidden .profileblock {
    margin: 40px 0 0 0;
    padding: 20px;
    border: 1px solid #333333;
    background: #eeeeee;
}

#post-hidden .profileblock h6 {
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #333333;
}

#post-hidden .profileblock p {
    margin: 0;
    padding: 0;
}

#post-hidden img {
    width: 100%;
    height: auto;
}

#post-hidden .clearfix img {
    width: 80%;
    height: auto;
}

#post-hidden .clearfix {
    min-height: 1px;
}

#post-hidden .clearfix::after {
    content: ".";
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
}

#post-hidden .right {
    float: none;
    text-align: center;
}

#post-hidden .left {
    float: none;
    text-align: center;
}

#post-hidden .textcenter {
    text-align: center;
    margin: 0px auto;
}

#post-hidden video {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
}
#post-hidden span.limited-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("//v-storage.bnarts.co.jp/wp-content/uploads/2015/09/vo_icon3.png") no-repeat 0 0;
    background-size: 18px 18px;
}
#post-hidden i.limited-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("//v-storage.bnarts.co.jp/wp-content/uploads/2015/09/vo_icon3.png") no-repeat 0 0;
    background-size: 18px 18px;
}

/* PC */
@media screen and (min-width: 769px){
	#post-hidden h3 {
		margin: 40px 0 0 0;
		line-height: 30px;
		font-weight: bold;
		text-align: left !important;
		color: #333 !important;
	}
	
	#post-hidden h4 {
		margin: 40px 0 0 0;
		font-size: 18px !important;
		text-align: left;
		color: #0026E5;
	}
	
	#post-hidden h5 {
		margin: 40px 0 0 0;
		padding: 10px 0 10px 40px;
		font-size: 16px;
		border-left: 2px solid #333333;
	}
	
	#post-hidden h6 {
		margin: 40px 0 0 0;
		font-size: 16px;
		line-height: 28px;
	}
	
	#post-hidden img {
		width: 100%;
		height: auto;
	}
	
	#post-hidden .clearfix img {
		width: auto;
		max-width: 100%;
	}
	
	#post-hidden .clearfix {
		min-height: 1px;
	}
	
	#post-hidden .clearfix::after {
		content: ".";
		display: block;
		clear: both;
		height: 0px;
		visibility: hidden;
	}
	
	#post-hidden .right {
		float: right;
		margin: 0px 0px 20px 20px;
	}
	
	#post-hidden .left {
		float: left;
		margin: 0px 20px 20px 0px;
	}
	
	#post-hidden .textcenter {
		text-align: center;
		margin: 40px auto 0;
	}
	
	#post-hidden p {
		margin: 40px 0 0 0;
	}
}

/*----------------------------------------------------------------------

最新号 15.11.25

----------------------------------------------------------------------*/
#m-info p span {
    font-size: 0.85rem;
}

/*----------------------------------------------------------------------

Media Query

----------------------------------------------------------------------*/
@media screen and (min-width: 769px){
body { min-width: 1020px;}
#contents { width: 1020px;}
.container, #nav .container { width: 1020px; /*padding: 0 10px;*/}
#headline-container { padding: 0 10px;}
.column { padding: 0;}
.column-2 { float: left; width: 50%; margin: 0 auto 20px;}
.pc { display: block;}
.sp { display: none;}
.matome-btn .icon-M { float: none; display: inline-block;}
.article a { border-top: solid 2px #e60012; }
.article .img img {
    max-width: 100%;
    width: auto;
    max-height: 250px;
    height: auto;
}
.card {
    margin: 0 0 20px;
    padding: 0 10px;
}
#tab { border: none; border-radius: 0; margin: 0 0 10px;}
#tab li {
    border: none;
    width: 100px;
    margin: 0 5px 0 0;
}
#tab a, #tab span {
    background-color: #e60012;
    border-radius: 3px;
    color: #fff;
}
#tab .active { background-color: #333;}

.pagenation { background-image: url('./assets/images/g-bg.gif'); border: solid 1px #dedede; padding: 5px;}
.pc-pagenation { background-color: #fff; padding: 10px;}
.pc-pagenation .number { float: left;}
.pc-pagenation .pagenavi { float: right;}
.pc-pagenation .prev, .pc-pagenation .next, .pc-pagenation ul { float: left;}


#back-top { bottom: 20px; right: auto; margin: 0 0 0 1030px;}
}
@media screen and (min-width: 769px){
#modal { border: solid 1px #e60012; padding: 20px 10px 0;}
#modal-search { padding: 0 64px 0 0;}
#modal-keyword { padding: 0 90px 0 0;}
#modal .keyword { font-size: 18px; padding: 0 5px;}
#modal .search { font-size: 18px; width: 90px;}
#modal h2 { font-size: 18px; margin: 0 10px 20px;}
#modal h3 { font-size: 16px; margin: 0 10px 20px;}
#modal li { float: left; width: 33.333333%; margin: 0 0 20px;}
#modal h4 { font-size: 18px;}
#modal span { font-size: 14px;}
}

/*----------------------------------------------------------------------

追加

----------------------------------------------------------------------*/
/*15.8.31 このサイトについて*/
/*------------------------------------------------------------
ClearFix Style
------------------------------------------------------------*/
.card-header:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*------------------------------------------------------------
Contents Style
------------------------------------------------------------*/
#about p{ line-height: 1.8; text-align: left;}
.m20{margin-bottom: 20px; }
.about-head{ border-bottom: 1px solid #333; margin-bottom: 30px; padding-bottom: 25px;}

#about h3{border-left: 3px solid #333; line-height: 1; padding-left: 5px; margin-bottom: 15px;}

.about-list{list-style: disc; padding: 0px 0 20px 20px; box-sizing: border-box;}
.about-list li{line-height: 1.8;}

#about table{width: 100%; display:block; background-color: #ebebeb; padding: 5px 5px 0 5px; box-sizing: border-box; margin-bottom: 30px;}
#about tbody{display: table; width: 100%;}
#about tr{background-color: #fff; display: block; margin-bottom: 5px; padding: 0 10px; }
#about td,#about th{display: block; text-align: left;}
#about th{border-bottom: 1px solid #ddd; padding: 10px 0 5px 0; }
#about td{line-height: 1.6; padding: 5px 0 10px 0; }
.about-banner {padding-top: 20px;}

.about-banner li{margin-bottom: 10px; line-height: 1.4;}

.about-cap{font-size: 12px;}


/*------------------------------------------------------------
Media Query
------------------------------------------------------------*/
@media screen and (min-width: 769px){

#about{margin-bottom: 20px;}

.about-head{font-size: 16px; margin-bottom: 50px; padding-bottom: 40px; padding-top: 20px;}
#about h3{font-size: 20px; border-left: 5px solid #333; padding-left: 10px; margin-bottom: 10px;}

.about-list{padding: 10px 0 20px 20px;}
.m10-pc{margin-bottom: 10px;}
#about td,#about th{display: table-cell;}
#about th{border-bottom: 0px solid #ddd; width: 120px;}
#about td{line-height: 1.6; padding: 10px 0 15px 0; }

.about-banner{padding-top: 10px;}
.about-banner li{display: inline-block; padding-right: 20px; line-height: 1.6;}
.about-banner li:first-child{display: block;}

#about .about-cap{line-height: 1.6;}
}

/*まとめ記事スタイル*/
#post-matome > article {font-size: 16px; margin-bottom: 30px; line-height: 1.6;}
#matome-cate p {font-size: 14px;}
#post-matome > article > a{ color:#3CAFA8; display: inline !important;}
#post-matome > article > a:hover {text-decoration:underline;}
#post-matome > article > p a{ color:#3CAFA8;}
#post-matome > article > p a:hover {text-decoration:underline;}
#post-matome #desc a {font-size:14px; font-weight:bold; color:#3CAFA8;}
#post-matome #desc a:hover {text-decoration:underline;}
#post-matome > article h2.title01,
#post-matome > article h3.title01 {margin: 40px 0 20px 0; padding: 10px 0 10px 30px; font-size: 16px; border-top: none; border-left: 2px solid #333333;}
#post-matome > article h3.ttl-b,
#post-matome > article h4.ttl-b {margin: 40px 0 20px 0; padding: 10px 0 10px 10px; font-size: 16px; border-bottom: 1px dotted #333333;}
#post-matome .bold {font-weight:bold;}
#post-matome .aligncenter {text-align:center;}
#post-matome > article iframe {margin-bottom:30px;}
#post-matome > article img {max-width: 100%; height: auto;}
.resp {position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 30px; }
.resp iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}





/*=======================================================
 追記   201601
=========================================================*/
/*  add css
---------------------------------------------------------*/

#sp-bnr {
    margin: 0 0 20px;
    padding: 0 22px;
}
#sp-bnr img { width: 100%; }


/*--------------
 追記   201605
----------------*/
#post-hidden { display: block !important; }
#post-more { display: none; }




/*=======================================================

 追記   201607  ハガキ職人用

=========================================================*/
.tekketsu_sp_navigation li.hagaki a {
background-image: url("./assets/images/orphans/sp_result_bnr02.png") !important;
}

/*=======================================================

 追記   201608

=========================================================*/
.w25per { width: 25% !important; }
.w30per { width: 30% !important; }
.w40per { width: 40% !important; }
.w22per { width: 22% !important; }
.w34per { width: 34% !important; }

@media screen and (max-width: 768px){
	.sp-w-22{ width: 21% !important;}
	.sp-w-34{ width: 37% !important;}
}


#article-btn02 ul { width: 150px; }

.sb-slidebar a {
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
}
.sb-slidebar .lower a {
    padding: 10px 0 10px 30px;
    position: relative;
    font-weight: normal;
    line-height: 1.5;
}
.sb-slidebar .icon-M {
    margin: 0 10px 0 0;
    position: absolute;
    left: 10px;
}


#footer-nav .lower a {
    /*padding: 10px 0 10px 40px;*/
	padding: 5px 0 10px 40px;
    position: relative;
}
#footer-nav .list.lower a {
    padding: 0 10px;
}
#footer-nav .list .lower .icon-M {
    margin: 0 10px 0 0;
    position: absolute;
    left: 10px;
    /*top: 4px;*/
	top: 0; /* 20170707 */
}

/* special*/
#page-special .card {
    width: 100%;
}
#page-special .article .img {
    overflow: hidden;
    height: auto;
}
#page-special .img img {
    max-width: 100%;
}


@media screen and (min-width: 769px){
    #page-special .card {
         width: 50%;
    }
}

/*=======================================================

 追記   201609

=========================================================*/
#magazine-backnumber-pc .number:nth-child(4n + 1) {
         clear:both;
}
#magazine-backnumber-sp .number:nth-child(odd) {
         clear:both;
}



/*=======================================================

 追記   201611

=========================================================*/
#tekketsuside > li { margin-bottom: 15px !important; }

.or-sp-title {
    width: 100% !important;
    box-sizing: border-box;
    padding:0 10px;
}

.or-playback {
    width: 100% !important;
    box-sizing: border-box;
    padding:0 10px 10px;
}
.or-playback a { display:block; }





/*=======================================================
mb
=========================================================*/
.mg8 { margin: 8px 0 !important; }
.mb10 { margin-bottom: 10px !important }
.mb20 { margin-bottom: 20px !important }
.mb30 { margin-bottom: 30px !important }
.mb40 { margin-bottom: 40px !important }
.mb50 { margin-bottom: 50px !important }
.mb60 { margin-bottom: 60px !important }
.mb70 { margin-bottom: 70px !important }
.mb80 { margin-bottom: 80px !important }
.mb90 { margin-bottom: 90px !important }
.mb100 { margin-bottom: 100px !important }





/*=======================================================
post-share
=========================================================*/
.post-share {
	text-align:center;
    margin: 20px 0 30px;
}
.post-share.btm { margin: 20px 0; }

.post-share li {
    display: inline-block;
    margin: 0 5px;
    vertical-align: text-top;
}
.post-share li iframe { margin-bottom: 0 !important; }


/*=======================================================
single tag
=========================================================*/
#single-tags {
	margin-bottom: 50px;
}
#single-tags h3 {
	font-size: 15px;
    border-bottom: solid 1px #222;
    margin-bottom: 10px;
}
#single-tags li {
    display: inline-block;
    margin: 0 10px 5px 0;
    font-size: 13px;
    color: #777;
}
#single-tags li .icon-S {
    font-size: 13px;
    width: 13px;
    margin-right: 5px;
}

/*=======================================================
post gallery
=========================================================*/
#posts-gallery {
    overflow: hidden;
	margin-bottom: 40px;
}
#posts-gallery h3 {
	font-size: 15px;
    border-bottom: solid 1px #222;
    margin-bottom: 10px;
}
#posts-gallery li {
    width: 12%;
	height: 0;
    padding-top: 12%;
    margin: 0 0 5px 0.57148%;
    overflow: hidden;
    position: relative;
    float: left;
	cursor:pointer;
	background: #efefef;
}
#posts-gallery li:nth-child(8n + 1) {
    clear: both;
    margin: 0 0 5px 0;
}
#posts-gallery li img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


#posts-gallery-popup {
	display:none;
	width: 100%;
	height: 100%;
	background: #000;
	overflow-y: scroll;
	position: fixed;
	top:0;
	left:0;
	z-index: 999999999999;
}
#p-g-p-in {
	width: 98%;
	position: absolute;
	top:  10%;
	left: 1%;
	opacity: 0;
    visibility: hidden;
    transition-duration: 500ms;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
}
#p-g-p-in.active {
	text-align:center;
    visibility: visible;
    opacity: 1;
   -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
#p-g-p-in img {
	width: auto;
	height: 370px;
}
#g-close {
	color: #fff;
	text-align:center;
	cursor: pointer;
	margin-top: 20px;
}

/* swipe custom */
#posts-gallery-popup .swiper-button-prev,
#posts-gallery-popup .swiper-button-next {
    width: 24px;
    height: 24px;
	margin-top: -12px;
    background-size: 7px !important;
    border-radius: 100px;
    box-shadow: 1px 1px 7px #777;
   -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#posts-gallery-popup .swiper-button-prev { background: #fff url(./assets/images/post_icon/prev.png) no-repeat center; left:0; }
#posts-gallery-popup .swiper-button-next { background: #fff url(./assets/images/post_icon/next.png) no-repeat center; right:0; }

#posts-gallery-popup .swiper-button-prev:hover,
#posts-gallery-popup .swiper-button-next:hover {
    border-radius: 0;
}

@media screen and (max-width: 768px){
	#p-g-p-in img {
	    height: 230px;
	}
}
@media screen and (max-width: 360px){
	#p-g-p-in img {
	    height: 200px;
	}
}


/*=======================================================
幽遊白書
=========================================================*/
#yuyu-chara ul {
	overflow: hidden
}
#yuyu-chara li {
    width: 48%;
    margin: 0 0 30px;
}
#yuyu-chara li:nth-child(odd) {
    float: left;
    clear: both;
}
#yuyu-chara li:nth-child(even) {
    float: right;
}
#yuyu-chara li h3 {
	font-size: 24px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin: 0;
	line-height: 1.7;
}
#yuyu-chara li h3:before {
	content: "☆";
    font-family: initial;
    font-weight: normal;
    margin-right: 5px;
}
#yuyu-chara li p {
	margin: 0;
	line-height: 1.7;
}



@media screen and (max-width: 480px){
	#yuyu-chara li {
		width: 100%;
		float: none !important;
	}

}

/*----------------------------------------------------------------------

Media Query

----------------------------------------------------------------------*/
@media screen and (max-width: 768px){
	.post-share {
		float: none;
		margin: 20px 0;
		overflow: hidden;
	}
	
	body {
		padding-top: 60px;
	}
	/* header */
	#global-header .container {
		min-width: auto;
		height: 60px;
	}
	#global-header .logo {
	    width: 160px;
	}
    #global-header #head-btns li {
        width: 60px;
		height: 60px;
		line-height: 60px;
	}
	#global-header #head-btns li a#btn-search-product {
		letter-spacing: 2px;
		padding-top: 14px;
		height: 60px;
		font-size: 12px;
	}

    #sp-search-form {
		padding: 10px;
	}
    #sp-search-form .keyword {
		box-sizing: border-box;
		width: 100%;
		height: 45px;
		color: #aaaaaa;
		font-size: 12px;
		padding-left: 30px;
		background: url(./assets/images/common/icon_search.png) no-repeat 5px center #fff;
		background-size: 20px;
		border:solid 1px #ddd;
	}

    /* footer */
	#global-footer .container {
        padding: 0 10px;
    }
	#footer-nav > li {
	    width: 50%;
	}
	#footer-nav > li.sp-w {
		width: 100%;
		float: none;
		padding-top: 20px;
		clear: both;
    }
    
	#sp-fix-icons {
		box-sizing: border-box;
		width: 55px;
		padding: 10px;
		background: #fff;
		position: fixed;
		right:0;
		bottom: 60px;
		z-index: 10000;
	}
	#sp-fix-icons li {
		list-style: none;
		cursor: pointer;
		margin-bottom:10px;
	}
	#sp-fix-icons li:last-child {
		margin-bottom:0;
	}
	#sp-fix-icons li a {
       box-sizing: border-box;
       border-radius: 3px;
       color: #fff;
       font-size: 28px;
       display: block;
       padding: 6px;
   }
	#sp-fix-icons li span {
       box-sizing: border-box;
       color: #fff;
       font-size: 28px;
       display: block;
       padding: 6px;
   }
   #sp-fix-icons li .icon-up {
       width: 100%;
       text-align: center;
       background: #ddd;
       padding: 5px 0;
    }
	
	/* popup */
	#popup-menu {
	    overflow-y: scroll;
	}

    /* 各コンテンツの見出しサイズ */
	#headline h2 {
	   font-size: 14px;
    }
    /* 特集サイト */
	#page-special .article .img img {
		width: auto;
		height: auto;
	}
	
}



@media screen and (max-width: 360px){
	#popup-menu .popup-menu-inner .logo {
		margin: 0px auto 20px;
	}
	#popup-menu .popup-menu-inner .logo img {
		width: 180px;
	}
	#popup-close {
		width: 30px;
		height: 30px;
		right: 15px;
		top: 35px;
	}

	#spNav-sub ul li a {
		font-size: 12px;
		padding: 15px 10px;
		background-size: 7px 13px;
	}

}