@charset "utf-8";

/* PC非表示 */
.hide_block {
    display: none;
}

@-ms-viewport
{
    width: auto;
    initial-scale: 1;
}
@viewport
{
    width: device-width;
    initial-scale: 1;
}

/* ========BASIC======== */
html,
body{
    height: 100%;
    margin:0;
    padding:0;
}

body {
    line-height:1.6;
    letter-spacing:1px;
    font-family:Meiryo,"Meiryo UI", Verdana, Helvetica, sans-serif;
    color:#333;
    font-size:13px;
    background:#FFF;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0px;
    font-weight: 700;
    line-height: 32px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 15px;
}

h4 {
    font-size: 13px;
}

ol, ul {
    padding-left: 10px;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
    cursor:pointer;
}

hr {
    margin-top: 6px;
    margin-bottom: 6px;
    border: solid 1px #CCC;
}

dt {
    font-weight: 400;
}

th {
    text-align: center;
}

pre {
    display: inline;
    margin: 0;
    padding: 0;

    background-color: transparent;
    border: none;

    line-height: 20.8px;
    font-family:Meiryo,"Meiryo UI", Verdana, Helvetica, sans-serif;

    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
    word-break: break-word;
}

textarea {
    width: 500px;
}

label {
    display: inline;
    max-width: none;
    margin-bottom: 0px;
    font-weight: 400;
}

iframe {
    margin: 0;
    padding: 0;

    border: none;
    overflow-x: hidden;
    overflow-y: hidden;
}

input,
select {
    height: 20px;
    vertical-align: top;
}

input[type="checkbox"],
input[type="radio"] {
    height: 13px;
    margin-top: 3px;
    margin-right: 7px;
    vertical-align: text-top;
}

:placeholder-shown {
    color: #CCC;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    color: #CCC;
}
/* Firefox 18- */
:-moz-placeholder {
    color: #CCC;
}
/* Firefox 19+ */
::-moz-placeholder {
    color: #CCC;
}
/* IE 10+ */
:-ms-input-placeholder {
    color: #CCC;
}

#wrap {
    margin: 0 auto;

    position:relative;
    min-height: 100%;
}

#contents {
    width: 1100px;
    min-height: 400px;
    margin: 0 auto;
    padding: 100px 0 60px;
    min-height: calc(100vh - 90px - 50px);
}

.overlay {
    display: none;
}

/* ========HEADER======== */
header {
    width: 100%;
    min-width:1100px;
    height:40px;
    height:50px;
/*     padding: 3px 0; */
    margin-bottom: -30px;

    background: #FFF;
    top: 0;
    z-index: 999;
}
header.fixed {
    position: fixed;
}

header #logo {
    display: inline-block;
    width: 39%;
    height: 100%;
    margin-left: 10px;
    padding: 3px 0;
    vertical-align: top;
}
header #logo a {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

header #logo a img{
    max-height: 45px;
    max-width: 100%;
}

header #nav {
    display: inline-block;
    width: 59%;
    height: 100%;
    text-align: right;
    vertical-align: top;
    padding: 16px 0 14px;
}

#nav a {
    margin: auto 3px;
    font-size: 11px;
}

#nav span {
    font-size: 9px;
    margin-left: 2px;
    vertical-align: text-top;
}

#nav .button a {
    height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;

    font-size: x-small;
}

header .iconArea {
    display: inline-block;
    vertical-align: top;
    height: 40px;
}

header #basket {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 6px;
    background-color: #ff6124;

    text-align: center;
    font-size: 25px;
    line-height: 34px;
}
body.hover #basket:hover {
    background-color: #ff8151;
}
header #basket, header #basket a{
    color: #FFF;
}
header #basket .basketLength{
    display: inline-block;
    width: 140%;
    height: 10px;
    margin-left: -10px;
    position:  relative;
    top: -28px;
    left: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    text-shadow:#ff6124 1px 1px 0, #ff6124 -1px -1px 0,
                #ff6124 -1px 1px 0, #ff6124 1px -1px 0,
                #ff6124 0px 1px 0, #ff6124  0-1px 0,
                #ff6124 -1px 0 0, #ff6124 1px 0 0;
}
body.hover #basket:hover .basketLength {
    text-shadow:#ff8151 1px 1px 0, #ff8151 -1px -1px 0,
                #ff8151 -1px 1px 0, #ff8151 1px -1px 0,
                #ff8151 0px 1px 0, #ff8151  0-1px 0,
                #ff8151 -1px 0 0, #ff8151 1px 0 0;
}

header #account {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    /* top: -34px; */
    vertical-align: top;
}
header #account.hide_block {
    display: none;
}
#account hr {
    margin: 0;
}
#account .name {
    font-size: 17px;
}

header #accountIcon {
    display: inline-block;
    width: 60px;
    height: 40px;

    padding: 3px;
    padding-top: 6px;
    text-align: left;
    font-size: 28px;
    line-height: 33px;

    background-color: #3267be;
    border-left: solid 1px #004080;
    border-right: solid 1px #004080;
}
body.hover #accountIcon:hover {
    background-color: #C6DCFF;
}
header #accountIcon a {
    color: #FFF;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
body.hover #accountIcon:hover a {
    color: #004080;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#accountIcon.slide_btn::after {
    border-color: #FFF;
    top: 30%;
}
body.hover #accountIcon.slide_btn:hover::after {
    border-color: #004080 !important;
}
#accountIcon.slide_btn.open::after {
    top: 40%;
}

#accountBox {
    width: 200px;
    position: absolute;
    right: 0;

    background: #FFF;
    border: solid 1px #004080;
    border-top: none;
    text-align: left;
}
#accountBox div {
    margin: 5px 8px;
}


/* ========NAVIGATION======== */
#navMenu {
    display: inline-block;
    position: relative;
    z-index: 2;
    top: -5px;
    height: 40px;
/*     margin-left: -8px; */
}

#navMenu div.menu {
    display: inline-block;
/*     width: 1050px; */
    width: 960px;
    height: 40px;
    margin-right: -8px;
}

/* メニューリンクブロック */
#navMenu #menuMain {
    display: inline-block;
    width: 927px;
    height: 40px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    margin-left: -1px;
    position: relative;
    /*     width: 1015px; */
}
@media all and (-ms-high-contrast: none){
    /* IE用 */
    #navMenu #menuMain {
        width: 920px;
    }
}
  
#navMenu ul.ddmenu {
    display: inline-block;
    padding: 0px;
    margin-left: -3px;
    vertical-align: top;
    position: absolute;
    z-index: 1;
}
#navMenu #menuMain ul.ddmenu {
    /* メニュー幅が足りなくなったら足す */
    width: 99999px;
    z-index: 0;
    left: 25px;
}

#navMenu ul.ddmenu li {
    width: 100px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    margin: 0px;
    padding: 0;
}
#navMenu ul.ddmenu > li {
    /* margin-left: -6px; */
    border-left: solid 1px #004080;
}
#navMenu ul.ddmenu > li:first-child {
    margin-left: 0;
}
#navMenu ul.ddmenu > li:last-child {
    border-right: solid 1px #004080;
}
#navMenu ul.ddmenu li.min {
    width: 25px;
    background-color: #3267be;
}

#navMenu ul.ddmenu a {
    color: white;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin: 0px;
}
body.hover #navMenu ul.ddmenu a:hover {
    background-color: #C6DCFF;
    color: #004080;
}
#navMenu ul.ddmenu a.active {
    background-color: #C6DCFF;
    color: #004080;
}

#navMenu ul.ddmenu ul {
    margin: 0px;
    padding: 0px;
    display: none;
    position: absolute;
    background-color: #3267be;
}
#navMenu ul.ddmenu .openLeft > ul {
    left: -35px;
}

#navMenu ul.ddmenu ul li {
    width: 135px;
    margin-top: -1px;
    border-top: 1px solid #004080;
}
#navMenu ul.ddmenu ul li:first-child {
    border-top: none;
}
#navMenu ul.ddmenu ul li a {
    line-height: 20px;
    text-align: left;
    padding-left: 5px;
    font-weight: normal;
}
body.hover #navMenu ul.ddmenu ul li a:hover {
    background-color: #ffff80;
    color: #005500;
}

#navMenu ul.ddmenu ul ul {
    margin: 0px;
    padding: 0px;
    display: none;
    position: absolute;
    top: 0px;
    left: 100%;
    border-left: 1px solid #004080;
}
#navMenu ul.ddmenu .openLeft ul ul {
    left: -100%;
    width: 135px;
    border-left: none;
    border-right: 1px solid #004080;
}

/* 買い物かご吹き出し */
.balloonWrap {
    position: fixed;
    z-index: 100;
}
.balloon {
/*     position: relative; */
    position: absolute;
    left: 785px;
    top: 0px;
    width: 300px;
    min-height: 100px;

    border-radius: 5px;
    border: 1px solid #3267be;
    background-color: #FFF;
    text-align: center;

    padding: 5px;
}
.balloon::before {
    content: "";
    position: absolute;
    left: 93%;
    top: -11px;
    margin-left: -10px;
    width: 0;
    height: 0;

    border-bottom: 10px solid #3267be;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.balloon:after {
    content: "";
    position: absolute;
    left: 93%;
    top: -10px;
    margin-left: -10px;
    width: 0;
    height: 0;

    border-bottom: 10px solid #FFF;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.balloonWrap#message .balloon {
    min-height: 50px;
    padding-top: 15px;

    border: 1px solid #ff6124;
    background-color: #ffecd1;
}
.balloonWrap#message .balloon::before {
    border-bottom: 10px solid #ff6124;
}
.balloonWrap#message .balloon:after {
    border-bottom: 10px solid #ffecd1;
}

.balloon h4 {
    margin-bottom: 5px;
    line-height: 20px;
    background: #59F;
    color: #FFF;
}

.balloon td {
    padding: 1px 3px;
}

.balloon .itemImage {
    width: 50px;
    height: 50px;
}
.balloon .itemImage.tag p span {
    right: -50px;
}

/* ========TOP BAR======== */
#bar {
    width: 100%;
    min-width:1100px;
    height: 40px;
/*     margin-top: 5px; */
    padding: 5px 0;
    background: #6691d7;
    position: absolute;
/*     z-index: 0; */
}
#bar::after {
    display: inline-block;
    content: "";
    width: 100%;
    min-width:1100px;
    height: 40px;
    border-bottom: solid 20px #3267be;
    position: absolute;
    top: 0px;
    z-index: 1;
}

#bar #barArea {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ナビゲーションリスト */
#orderNav {
    width: 1100px;
    margin: 0 auto;
    height: 60px;
    margin-top: 0px;
}

#orderNav table {
/*     width: 600px; */
    height: 30px;
    margin: 0 auto;

    text-align: center;
    font-weight: 700;
    color: #9db9e6;
}
#orderNav td {
    width: 150px;
}

#orderNav #orderNavBar {
    margin-bottom: 8px
}
#orderNav #orderNavBar .padding {
    width: 75px;
    border: none;
}
#orderNav #orderNavBar td {
    border-bottom: solid 2px #9db9e6;
}
#orderNav #orderNavBar td.active {
    border-bottom: solid 2px #1f3f74;

    background-image: url(../images/path.png);
    background-repeat: repeat-x;
    background-position: center left;
    background-size: 30px;
}

#orderNav #orderNavText td::after {
    content: "";
    display: block;

    position: relative;
    top: -38px;
    left: 68px;

    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 15px;
    background: #9db9e6;
}
#orderNav #orderNavText td.active {
    color: #1f3f74;
}
#orderNav #orderNavText td.active::after {
    background: #1f3f74;
}

@media only screen and (min-width:771px) {
    body:not(.is-mobile) #orderNav #orderNavText td.active.cat::before {
        content: "";
        display: block;

        position: relative;
        top: -56px;
        left: 57px;
        margin-bottom: -39px;

        width: 40px;
        height: 40px;

        background-image: url(../images/cat.png);
        background-repeat: no-repeat;
        background-position: center left;
        background-size: contain;
        background-color: #FFF;
    }
}

/* ========FOOTER======== */
footer{
    width: 100%;
    min-width:1100px;
    height: 30px;
    position: absolute;
    bottom: 0;
    padding: 5px;

    color: white;
    background: #6691d7;
    text-align: center;
    font-size: 13px;
}

footer a {
    color: #FFF;
}

/* ページTOPボタン */
#pagetop {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 10px;
}

#pagetop a {
/*   display: block; */
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #3267be;
  text-align: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  line-height: 40px;
  border-radius: 40px;
  padding: 2px 0 0 2px;
}
body.hover #pagetop a:hover {
  background-color: #6691d7;
}

/* ========PARTS======== */
div.button {
    margin: auto auto;
    text-align: center;
}

.button span {
    pointer-events: none;
}

body.hover li.button:hover{
    cursor:pointer;
}

.pageArea .disabled a,
div.button.disabled a {
    color:  rgb(230, 228, 228);
    background-color: #FFF;
    border: solid 1px rgb(230, 228, 228);
    border-radius: 5px;
    cursor:default;
    pointer-events: none;  /**<-----------*/
    opacity: 1;
}

/*テスト袋*/
.fukuro .button a {
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    margin: 0;
}

.fukuro .fluctuate {
    display: inline-block;
    width: 50px;
}

.fukuro input {
    width: 150px;
}

@media only screen and (max-width: 770px) {
    .fukuro input {
        display: inline-block;
        font-size: 16px;
        width: 60px;
        height: 30px;
        margin-top: 5px;
        vertical-align: top;
        text-align: right;
    }
}

@media only screen and (max-width: 770px) {
    #detail_area ._numbox .hide_block .fluctuate{
        width: 35px;
    }

    #detail_area .count>.button a{
        margin:5px 30px;
        margin-right: -20px;
    }
}

.button a {
    display: inline-block;

    width: 95px;
    height: 30px;
    padding: 5px;
    margin: 5px;

    text-align: center;
    line-height: 19px;

    color: #277EFF;
    background-color: #FFF;

    font-size: 13px;
    font-weight: 400;
    text-decoration: none;

    border: solid 1px #277EFF;
    border-radius: 5px;
}

body.hover .button a:hover {
    color: #6fa8ff;
    border: solid 1px #6fa8ff;
}
.button a:active {
    color: #FFF;
    background-color: #277EFF;
}

.button a.action {
    color: #FFF;
    background-color: #ff6124;
    border: solid 1px #ff6124;
}
body.hover .button a.action:hover {
    color: #FFF;
    background-color: #ff8151;
    border: solid 1px #ff8151;
}
.button a.action:active {
    background-color: #e33f00;
    border: solid 1px #e33f00;
}

.button a.interval {
    color: #FFF;
    background-color: #1EC979;
    border: solid 1px #1EC979;
}

body.hover .button a.interval:hover {
    color: #FFF;
    background-color: #48e39a;
    border: solid 1px #48e39a;
}

.button a.remove {
    color: #FFF;
    background: #AAA;
    border-color: #AAA;
}
body.hover .button a.remove:hover {
    color: #FFF;
    background: #BBB;
    border-color: #BBB;
}

.button .wide {
    width: 150px;
}

.button .wide200 {
    width: 200px;
}

.button .square {
    width: 40px;
}

.button .tiny {
    width: 70px;
    height: 25px;
    margin: 3px;
    padding: 3px;

    font-size: x-small;
    line-height: 18px;
}

.button .search {
    width: 25px;
    height: 20px;
    margin: 0;
    margin-left: -3px;
    padding: 0;
    line-height: 20px;

    font-size: x-small;
}

.button.inline {
    display: inline-block;
}

/* ページングボタン */
.pageArea {
    width: 100%;
    height: 40px;
    margin: 5px auto;
    text-align: center;
}

.pageArea div {
    display: inline-block;
}

.pageDetail {
    width: 96.5%;
    margin: 10px 20px 5px;
}

.pageDetail .pageCount {
    display: inline-block;
    width: 49%;
    text-align: left;
}

.pageDetail .pageSort {
    display: inline-block;
    width: 49%;
    text-align: right;
}

.pageDetail .pageSort .button {
    text-align: right;
}

/* 数量エリア */
.count input {
    display: inline-block;
    font-size: 16px;
    width: 60px;
    height: 30px;
    margin-top: 5px;
    vertical-align: top;
    text-align: right;
}

.count>.button {
    display: inline-block;
    vertical-align: top;
}

.count>.button a {
    font-size: 12px;
    margin: 5px 0px;
}

.count .fluctuate {
    display: inline-block;
    width: 15px;
    text-align: center;
}

.count .hide_block .fluctuate .button a {
    width: 30px;
    height: 30px;
    line-height: 13px;

    /* padding: 0px; */
    margin: 5px 0px 0px 3px;

    /* font-size: 10px; */
/*     font-weight: bold; */
    vertical-align: top;
}

.count .fluctuate .button a {
    width: 14px;
    height: 14px;
    line-height: 13px;

    padding: 0px;
    margin: 5px 0px 0px 0px;

    font-size: 10px;
/*     font-weight: bold; */
    vertical-align: top;
}

.count .fluctuate .button a.minus {
    margin: 2px 0px 0px 0px;
}
.stock {
    color: #4ac210;
    font-weight: bold;
}
.empty {
    color: #fc3d32;
    font-weight: bold;
}

/* スライドボックス */
.toggle_box{
    display:none;
}

.slide_btn{
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    cursor:pointer;
}
.slide_btn::after{
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    position: absolute;
    top: 25%;
    right: 10px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

body.hover .slide_btn:hover{
    color: #777 !important;
}
body.hover .slide_btn:hover::after{
    border-color: #777 !important;
}

.slide_btn.open{
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.slide_btn.open::after{
    top: 40%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/* 項目リスト */
.itemList {
    padding-left: 20px;
}

.itemList dl {
    margin: 5px auto;
}

.itemList dt,
.itemList dd {
    text-align: left;
}

.itemList dt {
/*     clear: left; */
/*     float: left; */
    width: 160px;
    min-height: 20px;
    padding: 3px 8px 3px 30px;
    position: relative;

    display: inline-block;
}

.itemList dt::before {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 10px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #59F;
}

.itemList dd {
    min-height: 20px;
/*     margin-left: 170px; */
    padding: 3px 0;
    width: 77%;

    display: inline-block;
    vertical-align: top;
}

.itemListHalf {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

.itemListHalf dd {
    width: 57%;
}


/* スライドサムネイル */
/*左右の矢印の色を変える*/
.slick-prev::before,
.slick-next::before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
    left: 15px;
    z-index: 100;
}

/*スライド数のドットの色を変える */
.slick-dots {
  width: 93%;
}
.slick-dots li.slick-active button::before,
.slick-dots li button::before {
    color: #333;
}

/* サムネイル */
.myPic {
    margin: 10px;
}

body.hover .myPic:hover {
    opacity: 0.5;
}

/* リモーダル */
.remodal {
    padding: 0;
/*     width: 900px; */
}
@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 900px;
  }
}
.lt-ie9 .remodal {
  width: 900px;
}
.remodal-wrapper {
  min-width: 1000px;
}

.remodal .remodal-close {
    color: #FFF;
}
.remodal button:not(.remodal-close) {
    width: 95px;
    height: 35px;
    padding: 5px;
    margin: 5px;

    line-height: 19px;
    font-size: 13px;
    border-radius: 5px;

/*     background-color: #ff6124; */
/*     border: solid 1px #ff6124; */

    color: #277EFF;
    background-color: #FFF;
    border: solid 1px #277EFF;
}

body.hover .remodal button:not(.remodal-close):hover {
/*     background-color: #ff8151; */
/*     border: solid 1px #ff8151; */
    color: #6fa8ff;
    border: solid 1px #6fa8ff;
    background-color: #FFF;
}

.remodal button.remodal-cancel {
    color: #FFF;
    background-color: #a5a5a5;
    border: solid 1px #a5a5a5;
}
body.hover .remodal button.remodal-cancel:hover {
    color: #FFF;
    background-color: #c8c8c8;
    border: solid 1px #c8c8c8;
}

.remodal .title {
    background-color: #59F;
    color: #FFF;
}

.remodal .contents {
    padding: 20px 10px;
    text-align: left;
}
.remodal .contents00 {
    padding: 0px 0px;
    text-align: left;
}
/* .remodal .contents div { */
/*     display: inline-block; */
/*     width: 32.5%; */
/*     vertical-align: top; */
/*     text-align: left; */
/* } */

.remodal .pageArea {
    position: relative;
    margin-bottom: -35px;
    z-index: 10;
}

.remodal .tableArea.scroll-y {
    max-height: 400px;
}

/* ソート要素 */
.selectableArea .wrap {
    width: 80%;
}

.sortable {
    width: 100%;
    padding: 0;
    border: solid 1px #59F;
}
.sortable li {
    border-top: solid 1px #ccc;
    cursor: pointer;
}
.sortable li:first-child {
    border-top: none;
}
.sortable .ui-state-highlight {
    background: #9db9e6;
    border: dotted 2px #59F;
}
.sortable .ui-selected .div2 {
    background-color: #59F;
    color: #fff;
    /* cursor: n-resize; */
}

/* テキストボックスアイコン */
.inner-addon {
  position: relative;
}
.inner-addon .glyphicon {
  position: relative;
/*   padding: 10px; */
  pointer-events: none;
}
.right-addon .glyphicon {
  right: 16px;
  top: 3px;
  margin-right: -14px;
}
.right-addon input {
  padding-right: 20px;
}

/* その他 */
.fontMin {
    font-size: xx-small !important;
}

.right {
    text-align: right !important;
}
.left {
    text-align: left !important;
}
.center {
    text-align: center !important;
}

.MGT20 {
    margin-top: 20px !important;
}
.MGT30 {
    margin-top: 30px !important;
}
.MGT40 {
    margin-top: 40px !important;
}
.MGL20 {
    margin-left: 20px !important;
}
.MGL40 {
    margin-left: 40px !important;
}
.MGL73 {
    margin-left: 73px !important;
}
.noUnderline {
    text-decoration: none !important;
}
body.hover .noUnderline:hover {
    text-decoration: none !important;
}

.scroll-x {
    overflow-x: scroll;
}
.scroll-y {
    overflow-y: scroll;
}

.required::after {
    display: inline-block;
    content: "※";
    color: red;
    font-weight: bold;
}
.disable {
    color: #AAA;
}

.itemImage {
    width: 170px;
    height: 170px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;


/*     background-color: red; */
}
body.hover a .itemImage:hover {
    opacity: 0.5;
}

.itemImage.tag {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
}
.itemImage.tag p span:hover {
    text-decoration: none;
    color: #fff;
}
.itemImage.tag p span {
    content: "";
    display: block;
    position: absolute;

    right: -32px;
    top: 10px;

    width: 110px;
    padding: 3px 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    background: #808080;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.itemImage.tag p.bag span {
    background: #1EC979;
}
.itemImage.tag p.set span {
    background: #59F;
}

input.wide {
    height: 30px;
    vertical-align: baseline;
    font-size: 16px;
}

/* ========INPUT BOX======== */
.datepicker {
    width: 150px;
    /* background-color: #DDD;
    border: solid 1px #AAA; */
}

.box40 {
    width: 40px;
}
.box60 {
    width: 60px;
}
.box100 {
    width: 100px;
}
.box130 {
    width: 130px;
}
.box150 {
    width: 150px;
}
.box200 {
    width: 200px;
}
.box300 {
    width: 300px;
}
.box600 {
    width: 600px;
}
.searchBox {
    width: 130px;
}

.readonlybox {
    background: #DDD;
    border: solid 1px #999;
}


/* ========SUB======== */
#sub {
    display: inline-block;
    width: 19%;
    vertical-align: top;
}

.tabMenu {
    clear: both;
    width: 100%;
    margin-top: 20px;
    margin-bottom: -1px;
}
.tabMenu ul {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    position: relative;
    z-index: 100;

    padding: 0;
    letter-spacing: -0.4em;
}

.tabMenu li {
    display: inline-block;
    width: 104.5px;
    text-align: center;
    vertical-align: top;
    background: #AEAEAE;
}

.tabMenu li a {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 1;
    letter-spacing: 2px;
    padding: 8px 0 8px;
    color: #FFF;
    font-size: small;
    font-weight: bold;
    vertical-align: middle;
    border-bottom: 1px solid #3267be;
    text-decoration: none;
}
body.hover .tabMenu li a:hover {
    text-decoration: none;
}

.tabMenu li.active {
    background: #FFF;
}

.tabMenu li.active a {
    border: 1px solid #3267be;
    border-bottom: none;
    color: #333;
}
.tabMenuContentWrap {
    position: relative;
}
.tabMenuContent {
    width: 209px;
    position: relative;
    top: 0;

    margin: 0 auto;
    padding: 10px;
    border: 1px solid #3267be;
    background-color: #FFF;
}

.tabMenuContent div li {
    width: 85%; /*フォールバック*/
    width: calc( 100% - 2em );
    vertical-align: top;
    word-break: break-all;
    word-wrap: break-word;
    word-break: break-word;
}

.tabMenuContent div li:not(.toggle_box) {
    display: inline-block;
}

.tabMenuContent .title {
    margin: 5px -10px;
    padding: 0;
    text-align: center;
    line-height: 20px;
    border: none;
    background-color: #59F;
    color: #FFF;
}
.tabMenuContent .subtitle {
    margin: 5px -10px;
    padding: 0 10px;
    line-height: 16px;
    border-top: dashed 1px #AAA;
    border-bottom: dashed 1px #AAA;
}

/* 更に表示 */
.slide_btn.moreList {
    color: #337ab7;
    padding: 0 5px;
    border-radius: 1px;
}
.slide_btn.moreList::after{
    width: 9px;
    height: 9px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.slide_btn.moreList.active::after,
.slide_btn.moreList.open::after {
    top: 43%;
    border-color: #FFF !important;
}

.slide_btn.moreList.active,
.slide_btn.moreList.open,
body.hover .slide_btn.moreList:hover{
    color: #FFF !important;
    background-color: #59F;
}
body.hover .slide_btn.moreList:hover::after{
    border-color: #FFF !important;
}

/* ボタン */
.button .assign {
    width: 170px;
    height: 23px;
    margin: 0;
    padding: 2px;
    font-size: 11px;
}
.tabMenuContent .button a.remove {
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    line-height: 17px;
    font-size: xx-small;
    border-radius: 2px;
}


/* サイドメニュー */
#sub .section {
    margin-top: 13px;
}

#sub #menu h3 {
    position: relative;
    padding: 0 0 3px 15px;
    border-left: 10px solid #59F;
    border-bottom: 1px solid #59F;
    margin-top: 20px;
}
#sub #menu h3:first-child {
    margin-top: 0px;
}

#sub .section ul {
    padding: 0px;
}

#sub .section li {
    padding: 5px 0px 5px 10px;
    border: solid 1px #CCC;
    border-top: none;
}

#sub .section li:first-child {
    border-top: solid 1px #CCC;
}

#sub .section li li {
    border: none;
    border-bottom: dashed 1px #CCC;
}

#sub .section li li:first-child {
    border-top: none;
}
#sub .section li li:last-child {
    border-bottom: none;
}

#sub .section li li > a {
    display: block;
    position: relative;
    padding: 0px 10px 0px 40px;
}

#sub .section li li > a::before {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 10px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #59F;
}
#sub .section li li a::after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #fff;
}

#sub .section input[type=checkbox] {
    margin-right: 4px;
}

#sub .section .category {
    background-color: #59F;
    color: #FFF;
}

/* ========MAIN======== */
#main {
    display: inline-block;
    width: 79%;
    margin: 0px 0px 0px auto;
    vertical-align: top;
    padding: 0px 5px 0px 5px;
    word-break: break-all;
    word-wrap: break-word;
    word-break: break-word;
}

#main.nonSide {
    width: 100%;
}

#main.noLogin {
    width: 60%;
    text-align: left;
}
#main.noLogin .itemList {
    margin-left: 90px;
}
#main.noLogin .itemList dd {
    width: 50%;
}

/* タイトル */
#main h2.title {
    display: block;
    position: relative;
    padding-left: 35px;
    text-align: left;
}

#main h2.title::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 16px;
    height: 16px;
    margin-top: -9px;
    background: #59F;
    border-radius: 16px;
}

.kinoId {
    display: block;
    text-align: right;
    margin: 0 0 0 auto;
    font-weight:bold;
    font-size: 80%;
    color: black;
}

.kinoId_mod {
    display: block;
    text-align: right;
    margin: 0 10px 0 10px;
    font-weight: bold;
    font-size: 80%;
    color: black;
}

h4.title {
    line-height: 18px;
    margin: 20px 5px 5px;
    padding: 5px 10px;

    border-left: solid 5px #59F;
    border-bottom: solid 1px #59F;
    text-align: left;
}

@font-face {
    font-family: 'League Gothic';
    src: url('../fonts/leaguegothic-regular-webfont.eot');
    src: url('../fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.loginTitle {
    display: table;
    margin: 10px auto 20px;
}
.loginTitle h1 {
    display: table-cell;
    font-family: 'League Gothic', Meiryo,"Meiryo UI", Verdana, Helvetica, sans-serif;
    position: relative;
    color:#277eff;
    font-size:50px;
    line-height: 50px;
    text-shadow: 1px 1px 0px #333;
/*     border-bottom: 4px solid #ccc; */
    /* margin: 10px 0 20px; */
    padding-left: 8px;
}

/* .loginTitle::after { */
/*   position: absolute; */
/*   bottom: -4px; */
/*   left: 0; */
/*   z-index: 2; */
/*   content: ''; */
/*   width: 20%; */
/*   height: 4px; */
/*   background-color: #3267be; */
/* } */

.loginTitle h1::after {
    content: "";
    position: absolute;
    background: rgba(158, 229, 255, 0.75);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 25%;
    left: -25px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}
.loginTitle h1::before {
    content: "";
    position: absolute;
    background-color: rgba(191, 191, 191, 0.6);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 0;
    left: 10px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}



/* 検索エリア */
#searchArea {
    padding: 10px;
    margin: 5px 20px;
    background: #EEEEF0;
}

/* 商品サムネイル */
#main .listArea {
    margin-top: 10px;
}

#main .listArea .item {
    display: inline-block;
    width: 190px;
    padding: 3px;
    margin: 5px 3px;
    text-align: left;
    vertical-align: top;
}

.listArea .item .detail .amount {
/*     font-weight: bold; */
}

.listArea .itemWide {
    width: 95%;
/*     min-height: 240px; */
    margin: 10px 20px;
/*     padding: 10px; */
    border: solid 1px #CCC;
    border-radius: 5px;
}

.listArea .itemWide .overview {
    width: 100%;
    padding: 10px;
    background: #EEEEF0;
    border-radius: 5px;
    border-bottom: solid 1px #CCC;
    border-radius: 5px 5px 0 0;
}

.listArea .itemWide .overview table {
    width: 100%;
    font-size: 11px;
}

.listArea .itemWide .overview table td {
    padding: 0 3px;
}

.listArea .itemWide .status {
    padding: 10px 10px 0;
}

.listArea .itemWide .status > b {
    display: inline-block;
    width: 30%;

    text-align: left;
    font-size: large;
}
.listArea .itemWide .status > span {
    display: inline-block;
    width: 70%;
    text-align: right;
}

.listArea .itemWide .detail {
    display: inline-block;
    width: 78%;
    min-height: 100px;
    padding: 20px 10px 10px;
    vertical-align: top;
}

.listArea .itemWide .detail .itemImage {
    display: inline-block;
    width: 140px;
    height: 140px;
    margin: 0;
    vertical-align: top;
    background-position: top center;
}

.listArea .itemWide .detail table {
    display: inline-block;
    max-width: 460px;
}

.listArea .itemWide .detail .cal {
    display: inline-block;
    max-width: 460px;
}

.listArea .itemWide .button {
    display: inline-block;
    width: 20%;
    height: 100%;
    padding: 10px 0;
    vertical-align: top;
}
.listArea .itemWide .button.inline {
    display: inline-block;
    width: 22px;
    padding: 0;
}

.listArea .mark {
    width: 40px;
    height: 40px;
    margin: 2px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    float: left;
}

/* テーブル */
.tableArea {
    margin: 5px;
}

.tableArea table {
    width: 100%;
    font-size: 13px;
    border-spacing: 0px;
    table-layout: fixed;
    word-wrap: break-word;
}

.tableArea th {
    font-weight: normal;
    background: #0057d9;
    color: white;
}

.tableArea tr:nth-child(even) {
    background: #eee;
}

.tableArea td {
    padding: 0px 2px;
}

.tableArea .itemImage {
    display: inline-block;
    width: 50px;
    height: 50px;
}
.tableArea .itemImage.tag p span {
    right: -20px;
    top: 10px;
    width: 50px;
    padding: 3px 10px;
}


.tableArea td > .button a {
    width: 40px;
    font-size: 12px;
    padding: 4px;
    margin: 0px;
    margin-top: 2px;
}
.tableArea td > .button a.wide70 {
    width: 70px;
}
.tableArea td > .button a.wide {
    width: 150px;
}

.tableArea .count {
    text-align: center;
}

/* 複数行テーブル */
.tableArea.multiple tr:nth-child(even) {
    background: transparent;
}
.tableArea.multiple tbody:nth-child(odd) {
    background: #eee;
}
.tableArea.multiple tbody tr:first-child {
    border-top: none;
}
.tableArea.multiple tbody tr {
    border-top: dashed 1px #CCC;
}

.tableArea.multiple .intable tr:nth-child(even) {
    background: #FFF;
}
.tableArea.multiple .intable tr:nth-child(odd) {
    background: #eee;
}
.tableArea.multiple .intable tr {
    border: none;
}

.amountBlock {
    width: 99%;
    margin: 20px 5px 5px;
    padding: 10px;
    border: solid 1px #FA1;
    font-weight: bold;
}

.amountBlock .amount {
    color: red;
}

.amountBlock .sumButton .button {
    text-align: right;
}

.amountBlock .button a {
    width: 170px;
    font-weight: normal;
}

/* 商品詳細 */
/* .thumb-item,
.thumb-item-nav,
.itemSlide {
    display:none;
} */

.thumb-item div {
    height: 300px;
}

.itemDetailImage {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

.itemDetailImage .thumb-item,
.itemDetailImage .thumb-item-nav {
    padding: 5px 45px;
    margin: 0;
}
/* .itemDetailImage .thumb-item-nav { */
/*     height: 110px; */
/* } */

.itemDetailImage img {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.itemDetailImage .thumb-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.itemDetailImage .thumb-item img {
    max-height: 300px;
}

.thumb-item-nav .itemImage {
    height: 80px;
}

.itemDetail {
    display: inline-block;
    width: 49%;
    padding: 0 10px;

    vertical-align: top;
    font-weight: normal;
}

.itemDetail h2 {
    margin-bottom: 10px;
}

.itemDetail .itemList {
    padding-left: 0;
}

.itemDetail .itemList dd {
    width: 57%;
}

.itemMoreDetail {
    border: solid 1px #CCC;
    margin: 20px 20px 5px 20px;
    padding: 10px;
}

.rate .fa {
    color: #ff9d1a;
}

.otherItem {
    width: 100%;
    margin: 20px auto;
}

.otherItem .itemSlide {
    margin: 5px auto;
    padding: 0 40px;
}

.otherItem .miniItem {
    padding: 0 5px;
    height: 150px;
}

.otherItem .miniItem table tr {
    display: block;
}
.otherItem .miniItem table td {
    display: block;
}

.otherItem .miniItem img {
    max-width: 50px;
    max-height: 50px;
}

#patternInputDetail {
    margin: 20px 20px 5px 20px;
}

#modal-content {
    width: 50%;
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #aaa;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 2
}
#modal-content-innar {
    margin:0 auto;
    width: 80%;
}
#modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.75);
}
.button-link{
    color: #00f;
    text-decoration: underline;
}
body.hover .button-link:hover{
    cursor: pointer;
    color: #f00;
}

/* 貸出カレンダー設定 */
.calSummary {
    padding: 0 10px;
}
#main .calSummary h4.title {
    margin: 5px 5px 20px;
}
.calSummary table.calendarWrap {
    margin: 0 auto;
    text-align: center;
}

.listArea .itemWide .detail table.calendarWrap {
    display: inline-block;
    max-width: 85%;
    min-height: 250px;
}
.listArea .itemWide .detail table.calendarWrap table {
    display: table;
    max-width: none;
}

.calendarWrap div.calendar {
    max-width: 200px;
    margin: 0 3px;
    font-size: 10px;
}

.fc-header .fc-title {
    font-size: 10px;
}

.fc-sun {
    color: red;
}

.fc-sat {
    color: blue;
}

.fc-basic-view .fc-body .fc-row {
    min-height: 1em !important;
}

.fc-toolbar .fc-left,
.fc-toolbar .fc-right {
    margin-top: 2px;
}
.fc button {
    height: 2.5em !important;
    padding: 0 .1em !important;

    /* text & cursor */
    font-size: 1em !important;
}
.fc-header-toolbar.fc-toolbar {
    margin-bottom: 0;
}

.fc-day-top {
    line-height: 8px;
}
tr:first-child > td > .fc-day-grid-event {
    margin-top: 0px;
}
.fc-unthemed td.fc-today {
    background-color: #ffd7a8;
}

/* ========ERROR======== */
/* Angularエラー処理用↓ */
/* .errorMsg {
    color: red;
}
input.ng-invalid.ng-dirty{
  border: solid 1px red;
}

input.input-error{
    border: solid 1px red;
} */
/* Angularエラー処理用↑ */

.errMsgArea {
    display: table;
    min-height: 70px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 10px;
    border: solid 2px #fc3d32;
    background-color: #ffe3c3;
    color: red;
}
.errMsgArea .errIcon {
    display: table-cell;
    min-height: 70px;
    width: 100px;
    padding-left: 20px;
    font-size: 45px;
    line-height: 40px;
    vertical-align: middle;
}
.errMsgArea .errMsg {
    min-height: 70px;
    padding: 5px 0;
    display: table-cell;
    vertical-align: middle;
}

/* Angularワーニング処理用↑ */

.warnMsgArea {
    display: table;
    min-height: 70px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 10px;
    border: solid 2px green;
    background-color: #c3f7f8;
    color: green;
}
.warnMsgArea .warnIcon {
    display: table-cell;
    min-height: 70px;
    width: 100px;
    padding-left: 20px;
    font-size: 45px;
    line-height: 40px;
    vertical-align: middle;
}
.warnMsgArea .warnMsg {
    min-height: 70px;
    padding: 5px 0;
    display: table-cell;
    vertical-align: middle;
}

 /* ========LOAGING======== */
 .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.loadingIcon {
    height: 35px;
    width: 35px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
}

#main .loading,
.remodal .loading {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 998;
}

#main .loadingIcon,
.remodal .loadingIcon {
    position: relative;
    margin-top: 50px;
}

#ui-datepicker-div {
    z-index: 1100 !important;
}