@charset "utf-8";
/* RESET */
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*font-size: 100%;*/
    /*vertical-align: baseline;*/
    /*background: transparent*/
}

body {
    line-height: 1
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

ul {
    list-style: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

/* CLEARFIX */
.cf:after, .cf:before {
    content: "";
    display: table
}

.cf:after {
    clear: both
}

/* BASIC STYLE */
body {
    color: #333;
    font-family: Open Sans, sans-serif;
    font-weight: 400
}

img {
    border-style: none;
}

/* COMMON STYLE */

#contentWrap {
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

#fixedNavi {
    position: fixed;
    bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,.94);
	z-index: 9900;
    border-top: 1px solid #ddd;
    transition: .4s;
}

#fixedNavi ul {
    padding: 10px 5px 10px 5px;
    transition: .4s;
    vertical-align: top;
}

#fixedNavi.smaller ul {
    padding: 3px 5px 3px 5px;
}

#fixedNavi ul li {
    width: 25%;
    display: block;
    float: left;
}

#fixedNavi ul li .menuButton {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto;
    text-align: center;
    transition: .4s;
}

#fixedNavi.smaller  ul li .menuButton {
    width: 36px;
    height: 36px;
}

#fixedNavi ul li a.flyer,
#fixedNavi ul li a.online,
#fixedNavi ul li a.store {
    height: 44px;
    width: 100%;
    display: block;
    transition: .4s;
    position: relative;
}

#fixedNavi.smaller ul li a.flyer,
#fixedNavi.smaller ul li a.online,
#fixedNavi.smaller ul li a.store {
    height: 36px;
}

#fixedNavi ul li a.flyer {
    background-image: url(../img/common/ico_flyer.png);
    background-repeat: no-repeat;
    background-position: center 5px;
    background-size: auto 24px;
}

#fixedNavi ul li a.online {
    background-image: url(../img/common/ico_online.png);
    background-repeat: no-repeat;
    background-position: center 4px;
    background-size: auto 26px;
}

#fixedNavi ul li a.store {
    background-image: url(../img/common/ico_shop.png);
    background-repeat: no-repeat;
    background-position: center 4px;
    background-size: auto 26px;
}

#fixedNavi.smaller ul li a.flyer {
    background-position: center 6px;
}

#fixedNavi.smaller ul li a.online {
    background-position: center 5px;
}

#fixedNavi.smaller ul li a.store {
    background-position: center 5px;
}

#fixedNavi ul li a.flyer small,
#fixedNavi ul li a.online small,
#fixedNavi ul li a.store small {
	position: absolute;
	font-size: 8px;
	font-weight: 500;
	color: #444;
	bottom: 3px;
	left: 0;
	width: 100%;
	height: auto;
	line-height: 1;
	text-align: center;
    transition: all .4s
}

#fixedNavi.smaller ul li a.flyer small,
#fixedNavi.smaller ul li a.online small,
#fixedNavi.smaller ul li a.store small {
    filter: alpha(opacity=0);
	-webkit-opacity: 0;
    -moz-opacity: 0;
	opacity: 0;
    transition: all .4s
}

[canvas=container], [off-canvas] {
	padding: 15px 10px;
}

[class*=js-] {
	cursor: pointer;
}

/* HAMBURGER ICON */
.menu-trigger {
	width: 44px;
	height: 44px;
	padding: 7px 0 1px 0;
	box-sizing: border-box;
	float: left;
	cursor: pointer;
	position: relative;
	transition: .3s;
}

.scrollfix .menu-trigger {
	width: 36px;
	height: 36px;
	transition: .3s
}

.menuIcon {
	position: relative;
	width: 26px;
	height: 20px;
	margin: 0 auto
}

.menu-trigger span {
	position: absolute;
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #588076;
	border-radius: 2px
}

.menu-trigger small {
	position: absolute;
	font-size: 8px;
	font-weight: 500;
	color: #444;
	bottom: 3px;
	left: 0;
	width: 100%;
	height: auto;
	line-height: 1;
	text-align: center;
	transition: all .4s
}

#fixedNavi.smaller .menu-trigger small {
    filter: alpha(opacity=0);
	-webkit-opacity: 0;
    -moz-opacity: 0;
	opacity: 0;
    transition: all .4s
}

#fixedNavi.smaller .menu-trigger {
	width: 36px;
	height: 36px;
	padding: 7px 0 1px 0;
	box-sizing: border-box;
	transition: .3s;    
}

.scrollfix .menu-trigger small {
	font-size: 4px;
	opacity: 0;
	transition: .4s
}

.menu-trigger span:nth-of-type(1) {
	top: 0
}

.menu-trigger span:nth-of-type(2) {
	top: 9px
}

.menu-trigger span:nth-of-type(3) {
	bottom: 0
}

.menu-trigger span:nth-of-type(1) {
    -webkit-animation: menu-bar01 .6s forwards;
    animation: menu-bar01 .6s forwards;
}

@-webkit-keyframes menu-bar01 {
    0% {
        -webkit-transform: translateY(9px) rotate(45deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar01 {
    0% {
        transform: translateY(9px) rotate(45deg);
    }
    50% {
        transform: translateY(9px) rotate(0);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

.menu-trigger span:nth-of-type(2) {
    transition: all .25s .25s;
    opacity: 1;
}

.menu-trigger span:nth-of-type(3) {
    -webkit-animation: menu-bar02 .6s forwards;
    animation: menu-bar02 .6s forwards;
}

@-webkit-keyframes menu-bar02 {
    0% {
        -webkit-transform: translateY(-9px) rotate(-45deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar02 {
    0% {
        transform: translateY(-9px) rotate(-45deg);
    }
    50% {
        transform: translateY(-9px) rotate(0);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-animation: active-menu-bar01 .6s forwards;
    animation: active-menu-bar01 .6s forwards;
}

@-webkit-keyframes active-menu-bar01 {
    0% {
        -webkit-transform: translateY(0) rotate(0);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(45deg);
    }
}

@keyframes active-menu-bar01 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(9px) rotate(0);
    }
    100% {
        transform: translateY(9px) rotate(45deg);
    }
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-animation: active-menu-bar03 .6s forwards;
    animation: active-menu-bar03 .6s forwards;
}

@-webkit-keyframes active-menu-bar03 {
    0% {
        -webkit-transform: translateY(0) rotate(0);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(-45deg);
    }
}

@keyframes active-menu-bar03 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-9px) rotate(0);
    }
    100% {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* HEADER BANNER */
ul #headBanner {
    padding: 0;
    margin: 0;
}

ul#headBanner li {
    padding: 0 1px;
    margin: 0 0 5px 0;
    box-sizing: border-box;
}

ul#headBanner li a {
    vertical-align: bottom;
}

ul#headBanner li img {
    width: 100%;
    height: auto;
    border: none;
    vertical-align: bottom;
}

/* FOOTER */


/* TO TOP BUTTON */
p.toTop {
	position: fixed;
	right: 5px;
	bottom: 45px;
  z-index: 8900 !important;
}

p.toTop img {
  /*width: 70px;*/
  /*width: 64px;*/
  width: 56px;
  height: auto;
}

p.toTop a:hover img {
  filter: alpha(opacity=100);
	-webkit-opacity: 1.0;
  -moz-opacity: 1.0;
	opacity: 1.0;
}

/* MAIN CONTENTS */
div.page {
	margin: 0;
	padding: 0;
	font-size: 13px;
	position: relative;
	z-index: 0;
}
div.page #column_table div[styl*="text-align:center;padding:20px 10px;background: #FFF;"] > img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
div.page a, div.page a>img {
	text-decoration: none;
	outline: 0;
	border: none;
}
#content{
    padding: 5px 10px 10px;
}
.bottoms img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#pageDegital ul li img,
#pageDegital a img,
#csr_content img#csr_large_img,
.category p.image img,
.shopList img,
.inquiry_comment_content div img,
.img_box img,
.btn1 img {
	width: 100%;
	height: auto;
}