@charset "utf-8";

#set($path="ja/jp")
## bind to $headerImgPath
#bindHeaderImgPath($path)

/* header  */
div#header p a {
    background-image: url(../static/$headerImgPath/common/images/header/image-01.gif);
    height: 96px;
    width: 216px;
}
body.popup div#header p.image {
    background-image: url(../static/$headerImgPath/common/images/header/image-02.gif);
    height: 86px;
    width: 216px;
}
body.popup div#header p.button a {
    background-image: url(../static/$path/common/images/header/button-05.png);
    height: 14px;
    width: 129px;
}
body.popup div#header p.button a:hover {
    background-image: url(../static/$path/common/images/header/button-05-hover.png);
}
div#header ul li.menu-1 a {
    background-image: url(../static/$path/common/images/header/button-01.png);
    height: 17px;
    width: 39px;
}
div#header ul li.menu-1 a:hover {
    background-image: url(../static/$path/common/images/header/button-01-hover.png);
}
div#header ul li.menu-2 a {
    background-image: url(../static/$path/common/images/header/button-02.png);
    height: 17px;
    width: 83px;
}
div#header ul li.menu-2 a:hover {
    background-image: url(../static/$path/common/images/header/button-02-hover.png);
}
div#header ul li.menu-3 a {
    background-image: url(../static/$path/common/images/header/button-03.png);
    height: 17px;
    width: 72px;
}
div#header ul li.menu-3 a:hover {
    background-image: url(../static/$path/common/images/header/button-03-hover.png);
}
div#header dl dt {
    background-image: url(../static/$path/common/images/header/text-01.png);
    height: 17px;
    width: 54px;
}
div#header dl dd {
    background-image: url(../static/$path/common/images/header/button-04.png);
}

/* global-navigation  */
div#global-navigation ul li.menu-1 a {
    background-image: url(../static/$path/common/images/global-navigation/button-01.png);
    height: 21px;
    width: 99px;
}
div#global-navigation ul li.menu-1 a:hover {
    background-image: url(../static/$path/common/images/global-navigation/button-01-hover.png);
}
div#global-navigation ul li.menu-2 a {
    background-image: url(../static/$path/common/images/global-navigation/button-02.png);
    height: 21px;
    width: 178px;
}
div#global-navigation ul li.menu-2 a:hover {
    background-image: url(../static/$path/common/images/global-navigation/button-02-hover.png);
}
div#global-navigation ul li.menu-3 a {
    background-image: url(../static/$path/common/images/global-navigation/button-03.png);
    height: 21px;
    width: 98px;
}
div#global-navigation ul li.menu-3 a:hover {
    background-image: url(../static/$path/common/images/global-navigation/button-03-hover.png);
}
div#global-navigation ul li.menu-4 a {
    background-image: url(../static/$path/common/images/global-navigation/button-04.png);
    height: 21px;
    width: 74px;
}
div#global-navigation ul li.menu-4 a:hover {
    background-image: url(../static/$path/common/images/global-navigation/button-04-hover.png);
}
div#global-navigation ul li.menu-5 a {
    background-image: url(../static/$path/common/images/global-navigation/button-05.png);
    height: 21px;
    width: 111px;
}
div#global-navigation ul li.menu-5 a:hover {
    background-image: url(../static/$path/common/images/global-navigation/button-05-hover.png);
}

/* return-navigation  */
div#return-navigation p a {
    background-image: url(../static/$path/common/images/return-navigation/button-01.gif);
    height: 10px;
    width: 120px;
}

/* local-navigation  */
body#products div#local-navigation h2 {
    background-image: url(../static/$path/products/common/images/heading-01.gif);
}
body#wish div#local-navigation h2 {
    background-image: url(../static/$path/wish/common/images/heading-01.gif);
}
body#corporate div#local-navigation h2 {
    background-image: url(../static/$path/corporate/common/images/heading-01.gif);
}
body#csr div#local-navigation h2 {
    background-image: url(../static/$path/csr/common/images/heading-01.gif);
}
body#salon div#local-navigation h2 {
    background-image: url(../static/$path/salon/common/images/heading-01.gif);
}
body#search div#local-navigation h2 {
    background-image: url(../static/$path/images/search/heading-01.gif);
}
body#members div#local-navigation h2 {
    background-image: url(../static/$path/members/common/images/heading-01.gif);
}
body#cs div#local-navigation h2 {
    background-image: url(../static/$path/cs/common/images/heading-01.gif);
}
body#news div#local-navigation h2 {
    background-image: url(../static/$path/news/common/images/heading-01.gif);
}
body#frais div#local-navigation h2 {
    background-image: url(../static/$path/images/frais/heading-01.gif);
}
body#securitypolicy div#local-navigation h2 {
    background-image: url(../static/$path/images/securitypolicy/heading-01.gif);
}
body#inquiry div#local-navigation h2 {
    background-image: url(../static/$path/images/inquiry/heading-01.gif);
}

/* footer  */
body.popup div#footer p {
    background-image: url(../static/$path/common/images/footer/image-01.png);
    height: 30px;
    width: 129px;
}

/* online register products */
.register .item .body-jp {
    display: table;
    width: 100%;
}

.register .item .body-jp .img {
    display: table-cell;
    text-align: center;
}

.register .item .body-jp .img img{
    margin-right:0;
}

.register .item .body-jp .content {
    display:table-cell;
    vertical-align: top;
}

div#products-summary {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    z-index: 300;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    font-size: 1.4em;
    background-color: #a9e288;
    opacity: 0.9;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px 0 #ccc;

    border-radius: 10px;
}

div#products-summary .products-summary-panel {
    display: table;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2em;
}

div#products-summary .products-summary-panel .products-summary-label {
    display: table-cell;
}

div#products-summary .products-summary-panel .products-summary-value {
    display: table-cell;
    text-align:right;
}

.register .items {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))!important;
}

.bcPoint-p-description{
         margin: 0px 0px 20px 5px;
     }

.bcPoint-table-item *{
         text-align: center !important;
         vertical-align: middle !important;
     }