/*Html General's style*/
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/*Header General's style*/
header {
    height: 30px;
}

/*Body General's style*/
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #edeef0;
}

/*Footer General's style*/
footer {
    bottom: 0px;
    width: 100%;
    margin: auto;
    position: absolute;
}

.wrapper {
    min-height: 100%;
    position: relative;
}

/********************************************/
/**************Nav Section*******************/
/********************************************/
/*Change the top navbar's style*/
.navbar-default {
    background-color: #2e578a;
    border-color: #2e578a;
    /*background-color: #009944; */ /* Green */
}

.navbar-default .navbar-header > a,
.navbar-default .navbar-header > a:hover {
    padding-left: 0;
    font-size: small;
    color: white;
}

.navbar-default .navbar-right > li > a,
.navbar-default .navbar-right > li > a:hover,
.navbar-default .navbar-center > li > a,
.navbar-default .navbar-center > li > a:hover {
    color: white;
    font-weight: bold;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

/*Small Color line*/
#lineTopNav {
    /*background-color: #009944;*/ /* Green */
    background-color: #909485;
    height: 3px;
}

/********************************************/
/**************Top Section*******************/
/********************************************/
/*Style for the Top's Section*/
#top {
    /*background-color: #95bf1f;*/
    background-color: white;
    top: 50%;
    padding-top: 10px;
    padding-bottom: 0px;
    color: white;
}

/*Small Color line*/
#lineHeader {
    background-color: #2e578a;
    height: 3px;
}

.btnHeaderCart {
    border-radius: 5px;
    color: white;
    font-weight: bold;
    background: #2982c2;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;;
}

.btnHeaderCart:hover, .btnHeaderCart:focus {
    background: #2982c2;
    color: white;
}

.btnHeaderMail {
    border-radius: 5px;
    color: white;
    font-weight: bold;
    background: #82a842;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;;
}

.btnHeaderMail:hover, .btnHeaderMail:focus {
    background: #82a842;
    color: white;
}
.btnHeaderMypage {
    border-radius: 5px;
    color: white;
    font-weight: bold;
    background: #666;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;;
}
.btnHeaderMypage:hover, .btnHeaderMail:focus {
    background: #666;
    color: white;
}
.row-banner {
    display: flex;
}

.col-md-banner {
    width: 40%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-send {
    width: 15%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-blank {
    width: 5%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-line {
    width: 2%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-login {
    width: 5%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-register {
    width: 5%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-cart {
    width: 12%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

.col-md-mail {
    width: 12%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}
.col-md-mypage{
    width: 12%;
    float: left;
    display: table-cell;
    padding: 0%;
    border: solid;
}

/********************************************/
/**************Search Top Section************/
/********************************************/
/*Style for the Search Top's Section*/
#search {
    /*background-color: #767778;*/
    background-image: url('../img/banner.png');
    padding-top: 10px;
    padding-bottom: 5px;
    color: white;
}

/*This style is for the transparent background on the carousel' left*/
#searchBox {
    background: rgba(134, 174, 198, 0.7);
    padding: 2% 3% 2% 3%;
    color: white;
}

.labelSearchRound {
    font-weight: normal;
    color: white;
}

.row-search {
    display: flex;
    padding-left: 3%;
    padding-right: 3%;
}

.col-md-specification {
    width: 20%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-division {
    width: 20%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-model {
    width: 20%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-add {
    width: 5%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-search {
    width: 20%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.labelSpecification, .labelDivision {
    border-radius: 5px;
    color: white;
    font-size: 1.2rem;
    background: #0059b2;
    padding: 1% 1% 1% 5%;
    width: 70%;
}

.labelModel {
    border-radius: 5px;
    color: white;
    font-size: 1.2rem;
    background: #460c81;
    padding: 1% 1% 1% 5%;
    width: 70%;
}

.labelAdd {
    font-size: large;
    color: white;
}

.form-horizontal .control-label {
    text-align: left;
}

.btnSearch {
    border-radius: 5px;
    color: white;
    font-weight: bold;
    background: #e60012;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;;
}

.btnSearch:hover, .btnSearch:focus {
    background: #e60012;
    color: white;
}

/*Invert icon*/
.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

/*Custom style for the Search button on the second section*/
.btnNumber {
    border-radius: 20px;
    color: #2e578a;
    font-weight: bold;
    font-size:1rem ;
    display: block;
    width: 90%;
    border: 2px solid #2e578a;
}

.labelMail {
    font-size: medium;
    color: white;
}

/*Custom style for the Osusume buttons*/
.customBOsusume {
    border-radius: 5px;
    color: white;
    font-size: x-small;
    background: black;
    vertical-align: bottom;
}

/*Custom style for Shopping Cart Button*/
.customBCart {
    border-radius: 25px;
    color: white;
    font-weight: bold;
    background: black;
    display: block;
    width: 100%
}
.customBCart.soldout{
    background: gray;
    cursor: default;
}
.customBCart.soldout:hover{
    color: #fff;
}
/*This style is for the transparent second background on the carousel' left*/
#searchNumber {
    background: rgba(205, 230, 192, 0.7);
    padding: 2% 3% 1% 3%;
    color: black;
}

.col-md-numPart {
    width: 15%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-inputPart {
    width: 50%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-btnPart {
    width: 30%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.btnPart {
    border-radius: 20px;
    color: black;
    font-weight: bold;
    background: white;
    display: block;
    width: 80%;
}

.btnPart:hover, .btnPart:focus {
    background: white;
    color: black;
}

/*Simple Gray line*/
#lineGray {
    height: 1px;
    background-color: #CCCCCC;
    border: none;
}

/*Simple White line*/
#lineWhite {
    height: 1px;
    background-color: white;
    border: none;
}

/*Center the customized carousel's arrows*/
.carousel-control > span > img {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: inline-block;
}

/********************************************/
/**************Content Section***************/
/********************************************/
/*Custom style for the elements on the left menu*/
.leftNav {
    background-color: #2e578a;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%
    /*background-color: #009944;*/
}

.leftNav li a {
    color: white;
    font-weight: bold;
    border-bottom-color: white;
    border-color: white;
}

/*Custom style for the behavior on the left menu*/
.nav > li > a:hover {
    background-color: #009999;
}

/*Paging Color*/
.paginColor {
    background-color: red;
    color: #95bf1f;
    font-weight: bold;
    border: 0;
    outline: none !important;
    border-style: none;
}

/*Custom style for the date*/
.smallGray {
    color: gray;
    font-size: x-small;
    font-weight: bold;
    text-align: left;
}

/*Custom style for the Tax text*/
.taxGray {
    color: gray;
    font-size: small;
    text-align: left;
    font-weight: bold;
}

/*Labels for each image's group*/
.labelImg {
    font-size: 1.6rem !important;
    color: black;
}

/*Custom style for the Grid's Contend*/
.gridContent {
    color: black;
    font-size: small;
    font-weight: bold;
    text-align: left;
}

/*Controling the behavior of the columns*/
.column-wrap {
    overflow: hidden;
}

/*Margin that makes all elements at the same column have the same height*/
.oshiraseCol, .osusumeCol {
    background-color: white;
    height: 100%;
}

/*Space abouve columns*/
.top-buffer {
    margin-top: 2%;
}

/*All elements at the same column have the same height and additional styles*/
.oshirase, .osusume {
    padding: 0% 5% 3% 5%;
    font-size: small;
    margin-bottom: 5%;
}

/*Style for 関連商品 section*/
.kanren {
    background-color: #dddddd;
    padding: 2% 2% 2% 2%;
}

.test {
    padding: 0% 5% 3% 5%;
    font-size: small;
    margin-bottom: 5%;
    /*padding-bottom: 99999px;:*/
}

#navigation {
    background-color: white;
    padding: 0% 0% 0% 0%;
    margin-bottom:2rem;
}

.carouselColor .active {
    background-color: #009944;
}

.carousel-indicators li {
    background: #666;
    margin: 0 3px;
    width: 12px;
    height: 12px;
}

.carouselText {
    font-size: large;
    font-weight: bold;
}

.carouselSubtext {
    font-size: small;
}

ul.breadcrumb {
    background-color: white;
    margin:0;
}

ul.breadcrumb li {
    display: inline;
}

ul.breadcrumb li {
    color: black;
}

ul.breadcrumb li + li:before {
    padding: 1%;
    color: black;
    content: "▶";
}

ul.breadcrumb li a {
    color: black;
}

#current {
    background-color: #f6f7f7;
    padding: 2% 2% 1% 2%;
    color: black;
}

/********************************************/
/**************Footer Section****************/
/********************************************/
/*Style for the text of this Section*/
#footer {
    text-align: center;
    color: white;
}

/*Style for the buttons on もっと見る*/
.btnSeeMore {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    border-radius: 20px;
    color: white;
    background-color: #2e578a;
    font-weight: bold;
    display: block;
    width: 25%;
    border: 4px solid white;
}

/*Style for the buttons on footer's Section*/
.customBFooter {
    border-radius: 24px;
    /*color: #009944;*/
    color: #2e578a;
    font-weight: bold;
}

.row-btnFooter {
    display: flex;
    padding-left: 25%;
    padding-right: 25%;
}

.col-md-btn10 {
    width: 10%;
    float: left;
    display: table-cell;
    padding: 0%;
}

.col-md-btn25 {
    width: 25%;
    float: left;
    display: table-cell;
    padding: 0%;
}

/*Style for the text footer's description Section*/
#description {
    background-color: #333333;
    padding-top: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

/*Style for adjusting the content to the middle of the page*/
.delimited {
    padding-top: 1%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 1%;
}

/*Style for adjusting the Navbar*/
.navDelimited {
    padding-right: 5%;
    padding-left: 5%;
}

/*Style for adjusting the register form*/
.delimitedRegister {
    padding-top: 1%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 1%;
}

/*Adding vertical division into the description Section*/
.borders {
    border-right: 1px solid #999;
}

/*Method for removing table's borders*/
.borderless thead tr th {
    border: 0;
}

/*Style for the bottom Section*/
#copyright {
    background-color: #5a5b5c;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 0px;
}

/********************************************/
/****Aditional styles used over all page*****/
/********************************************/
.responsive-width {
    font-size: 3vw;
}

/*Behavior for scrolling to Page's Top*/
.scrollToTop {
    width: 32px;
    height: 32px;
    padding: 10px;
    background: whiteSmoke;
    position: fixed;
    bottom: 100px;
    right: 80px;
    display: none;
    background: url("../img/top32.png") no-repeat;
}

/*Aditional behavior for scrolling*/
.scrollToTop:hover {
    text-decoration: none;
}

/*Carousel Thumbnails styles*/
.thumbailGeneral {
    background-color: white;
}

/*Carousel Thumbnails styles*/
.thumbailContent {
    padding: 0% 0% 3% 0%;
    margin-bottom: 5%;
}

.selected img {
    opacity: 0.5;
}

.descriptionParts {
    padding: 5% 30% 3% 0%;
}

.shashuGeneral {
    background-color: #f6f7f7;
    padding: 5% 5% 3% 5%;
}
.shashuGeneral ul{
    padding-left:15px;
}

.spinner {
    width: 100px;
}

.spinner input {
    text-align: left;
}

.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}

.input-group-btn-vertical > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    margin-left: -1px;
    position: relative;
    border-radius: 0;
}

.input-group-btn-vertical > .btn:first-child {
    border-top-right-radius: 4px;
}

.input-group-btn-vertical > .btn:last-child {
    margin-top: -2px;
    border-bottom-right-radius: 4px;
}

.input-group-btn-vertical i {
    position: absolute;
    top: 0;
    left: 1px;
}

.social:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
}

.social {
    -webkit-transform: scale(0.8);
    /* Browser Variations: */
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

#social-fb:hover {
    color: #3B5998;
}

#social-tw:hover {
    color: #4099FF;
}

#social-gp:hover {
    color: #d34836;
}

#social-em:hover {
    color: #f39c12;
}

#social-in:hover {
    color: #0077B5;
}

#social-pi:hover {
    color: #cb2027;
}

#social-tu:hover {
    color: #32506d;
}

#social-yt:hover {
    color: #bb0000;
}

.ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

.ibox:after,
.ibox:before {
    display: table;
}

.ibox-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
}

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.ibox-footer {
    color: inherit;
    border-top: 1px solid #e7eaec;
    font-size: 90%;
    background: #ffffff;
    padding: 10px 15px;
}

.ibox-content {
    clear: both;
}

.ibox-heading {
    background-color: #f3f6fb;
    border-bottom: none;
}

.ibox-title .label {
    float: left;
    margin-left: 4px;
}

.article .ibox-content {
    padding: 40px;
}

.product-detail .ibox-content {
    padding: 30px 30px 50px 30px;
}

.fishes {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.fish {
    position: absolute;
    top: 1%;
    left: 25px;
    z-index: 2;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box.box-default {
    border-top-color: #2e578a;
}

.box.box-solid.box-default {
    border: 1px solid #d2d6de;
}

.box.box-solid.box-default > .box-header {
    color: #444444;
    background: #d2d6de;
    background-color: #d2d6de;
}

.box.box-solid.box-default > .box-header a,
.box.box-solid.box-default > .box-header .btn {
    color: #444444;
}

.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
    content: " ";
    display: table;
}

.box-header:after,
.box-body:after,
.box-footer:after {
    clear: both;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.collapsed-box .box-header.with-border {
    border-bottom: none;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
    margin-right: 5px;
}

.box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.box-header > .box-tools [data-toggle="tooltip"] {
    position: relative;
}

.box-header > .box-tools.pull-right .dropdown-menu {
    right: 0;
    left: auto;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 5%;
}

.box-content {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #f6f7f7;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    padding-top: 1%;
    padding-bottom: 1%;
}

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #ffffff;
}

/* large desktops and up ----------- */
@media (min-width: 1200px) {
    body {
        font-size: medium;
    }
}

/* tablets/desktops and up ----------- */
@media (min-width: 992px) and (max-width: 1199px) {
    body {
        font-size: small;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: small;
    }
}

/* Extra small devices (phones, up to 480px) */
@media (min-width: 481px) and (max-width: 767px) {
    body {
        font-size: small;
    }
}

/* Landscape phones and smaller */
@media (max-width: 480px) {
    body {
        font-size: small;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 360px;
    }
}

/********************************************/
/********************************************/
.shopping-cart-table h3{
    margin-top:0;
}
p.category-title{
    margin:12px 0 20px 0;
}
ul.category-list li:first-child{
    margin-top:15px;
}
.content-sub-header{
    background-color: #f6f7f7;
    padding: 2% 2% 1% 2%;
    color: black;
}
.content-category-list{
   margin-top:20px;
}
.content-category-list .category-box{
}
.content-category-list .row{
    display: flex;
    flex-wrap: wrap;
}
.content-category-list ul{
    margin:0 0 10px 0;
    padding:10px;
    background-color: white;
}
.content-category-list ul li{
    display: block;
    padding:3px;

}
.content-category-list ul li.parent{
    font-weight: bold;
    background-color: #ccc;
}
.content-category-list ul li.children{
    text-align: left;
}
.pagination{
    margin:20px 0;
}
/**
 マイページ用
 */
.mypage > div{
    margin-bottom:2rem;
}
.mypage .content{
    border:1px solid #999;
    padding:2rem 1rem 2rem 1rem;
    cursor: pointer;
    box-shadow:2px 2px 2px 0px #000000;
    height:100px;
    background-color: #FCFCFC;
}
.mypage a:hover{
    text-decoration: none;
}
.mypage .content:hover{
    background-color: #e5f5f8;
}
.mypage .content .title{
    font-weight: bold;
    font-size:1.8rem;
}
.mypage .content .comment{
    padding-top:0.5rem;
    padding-left:2.3rem;
    color:#666;
}
.mypage.box-body{
    padding:30px 0 30px 5px;
}
.address-list{}
.address-list li{
    height:200px;
    margin-bottom:20px;
}
.address-list .box{
    min-height:200px;
    border-radius: 4px;
    padding:10px;
}
.address-list .new .box{
    border:2px dashed #999;
    font-size:2rem;
    text-align: center;
    vertical-align:middle;
    padding-top:6rem;
    color:#666;
    display: block;
    cursor: pointer;
}
.address-list .cur .box{
    border:1px solid #999;
    box-shadow: 1px 1px 2px;
}
.address-list .cur .box .default{
    border-bottom:1px solid #999;
    padding-bottom:6px;
    margin-bottom:6px;
}
.address-list .cur .box .name{
    font-weight: bold;
}
.address-list .cur .box .actions{
    position: absolute;
    bottom:6%;
}
.address-list .cur .box .actions div{
    display: inline-block;
}
.checkout .address-list .cur.select .box{
    background-color: #e5f5f8;
}
.checkout .address-list .selector .box{
    cursor: pointer;
}
.checkout .address-list .selector:hover .box{
    cursor: pointer;
    background-color: #e5f5f8;
}
.disp-price.original-price{
    text-decoration: line-through;
    font-size:1rem;
}
.disp-price.discount-price{
    color:red;
}
.mypage .order{
    margin-bottom:3rem;
}
.mypage .order .head{
    margin:0 3rem 1rem  3rem;
}
.mypage .order .items{
    margin:0 3rem 1rem  3rem;
}

.notice .carousel{
    margin-bottom:10px;
}
.notice .buttons{
    margin-top:50px;
}
.notice .lists{
    background-color: white;
}
.notice .lists .list{
    border-top:1px solid #999;
    padding:15px;
}
.notice .lists .list .category{
    border-radius: 8px;
    padding:2px 0;
    font-size:1.3rem;
}
.notice .lists .list .category1{
    background-color: #7c9cc2;
    color:white;
}
.notice .lists .list .category2{
    background-color: #c25961;
    color:white;
}
.notice .lists .list .title{
    font-size:1.5rem;
}
/**
 エラー表示
 */
.help-block.with-errors{
    color:#a94442
}
/**
 必須入力のアスタリスク
 */
.control-label.required:after {
    content:" *";
    color:red;
}
/**
 テキストボックス数字専用対象
 */
input[type=text].numeric{
    text-align: right;
}
/**
 英数字モード
 */
.ime-off{
    ime-mode:disabled;
}