@charset "utf-8";

@import url("bootstrap.custom.min.css"); /* only Grid system CSS */


html {
    font-size: 62.5%; /* 62.5%を指定すると「1.0 rem = 10px」 */
}

body {
    font-size: 16px;
    font-size: 1.6rem;
}
a { color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}
a:hover,
a:focus,
a:active { color: #33A8D0;text-decoration: none; outline: none;}


textarea { /* for chrome fontsize bug */
    font-family: sans-serif;
}

ul, ol {
    list-style: none;
    margin: 0; padding: 0;
}
dl, dt, dd, li{
    margin: 0; padding: 0;
}
img {
    max-width: 100%;
}

/* --------------------------------
	Parts
-------------------------------- */

/* btn */

.btn {
    font-size: 16px;
    font-size: 1.6rem;
    padding:10px 16px;
    font-weight: bold;
}

.btn-lg{padding:10px 16px;font-size:16px;line-height:1.3333333}
.btn-sm{padding:8px 10px;font-size:12px;line-height:1.5;font-weight: normal;}
.btn-xs{padding:5px 8px;font-size:10px;line-height:1.5;font-weight: normal;}

.btn .cb {
    margin: 0 5px;
}

/* btn_circle */

.btn_circle {
    border: 0 none;
    padding: 0; margin: 0;
    text-shadow: none;
    box-shadow: none;
    border-radius: 50%;
    color: #fff;
    background: #B8BEC4;
    cursor: pointer;
    width: 40px; height: 40px;
    line-height: 40px;
    vertical-align: middle;
}
.btn_circle .cb {
    font-size: 24px;
    font-size: 2.4rem;
    position: relative;
    top: -1px;
}
.btn_circle:hover {
    opacity: 0.8;
}

/* pagination */

.pagination {
    width: 100%;
    margin: 16px auto;
    position: relative;
    clear: both;
}
.pagination ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 1em 0;
    text-align: center;
}
.pagination ul li {
    display: inline-block;
    min-width: 29px;
    padding: 10px 7px 10px 6px;
    text-align: center;
    position: relative;
}

.pagination ul li a {
    color: #525263;
    display: block;
    line-height: 1.8;
    padding: 5px 1em;
    text-decoration: none;
}
.pagination ul li:hover, .pagination ul li a:focus {
    background: #f1f1f1;
}
.pagination ul li.active a {
    background: #F3F3F3;
    text-decoration: none;
}
.pagination ul li.active a:hover, .pagination ul li.active a:focus {
    background: #F3F3F3;
}
.pagination ul li.disabled a {
    color: #9797A0;
    text-decoration: none;
}
.pagination ul li.disabled a:hover, .pagination ul li.disabled a:focus {
    color: #9797A0;
}

/******************************
	Media Query
*******************************/

@media only screen and (max-width: 767px) {

    /* --------- common ---------- */

    .drawer-open #contents, .drawer-open #header, .drawer-open #footer, .drawer-open .pagetop {
        -webkit-transform: translateX(-260px);
        -moz-transform: translateX(-260px);
        -ms-transform: translateX(-260px);
        -o-transform: translateX(-260px);
        transform: translateX(-260px);
    }

    .sp{display: block !important;}
    .pc{display: none !important;}
    span.sp{display: inline !important;}

    /****** Header Setting ********/


    /****** Side Setting ********/

    .drawer {
        height: 0;
        visibility: hidden;
        -webkit-transition: visibility 0s 0.3s;
        -moz-transition: visibility 0s 0.3s;
        transition: visibility 0s 0.3s;
    }
    .drawer-open .drawer {
        height: 100%;
        visibility: visible;
        -webkit-transition: visibility 0s 0s;
        -moz-transition: visibility 0s 0s;
        transition: visibility 0s 0s;
    }
    .category-nav a {
        will-change: transform, opacity;
    }


    /****** Effect Setting ********/

    /* Overlay */
    .overlay.is-visible {
        -webkit-transform: translateX(-260px);
        -moz-transform: translateX(-260px);
        -ms-transform: translateX(-260px);
        -o-transform: translateX(-260px);
        transform: translateX(-260px);
    }
    .overlay.is-visible.cart-is-visible {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    /* My page address */
    #delivery_address_list div.is-edit p.btn_edit {
        top: 30%;
    }

}
@media only screen and (min-width: 768px) {

    /* --------- common ---------- */

    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .row {
        margin-left: -16px;
        margin-right: -16px;
        padding-bottom: 10px;
    }
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sp{display: none !important;}
    .pc{display: block !important;}
    span.pc{display: inline !important;}


    /* --------------------------------
        Parts
    -------------------------------- */

    /* heading */

    h2 {
        font-size: 24px;
        font-size: 2.4rem;
    }
    .page-heading {
        font-size: 32px;
        font-size: 3.2rem;
        border-bottom-style: solid;
        border-top: 0 none;
        padding: 16px 0 12px;
        margin: 0 16px 48px;
    }
    .heading01,
    .heading03 {
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold;
    }
    .heading02 {
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold;
        background: #EFEFEF;
        padding: 8px 12px;
    }
    .heading05 {
        font-size: 16px;
        font-size: 1.6rem;
    }

    /* btn */

    .btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333}
    .btn-sm{padding:8px 10px;font-size:14px;line-height:1.5}
    .btn-xs{padding:5px 8px;font-size:12px;line-height:1.5}

    /* badge */

    .badge {
        font-size:12px;
        font-size:1.2rem;
    }

    /* tableStyle */

    div.table .thead {
        display: table-header-group;
    }
    div.table ol {
        display: table-row;
        margin: 0;
    }
    div.table ol li {
        display: table-cell;
        padding: 16px;
        text-align: center;
        background: #F4F3F0;
        overflow-x:hidden;
        font-weight: bold;
    }
    div.table .tbody .tr > .td {
        padding: 16px;
    }

    /* tableish */

    .tableish {
        display: table;
        width: 100%;
    }
    .tableish .thead {
        display: table-header-group;
    }
    .tableish .tbody {
        display: table-row-group;
    }
    .tableish .tr {
        display: table-row;
    }
    .tableish .th,
    .tableish .td {
        display: table-cell;
        vertical-align: top;
    }

    /* dl-table */

    .dl_table {
        display: table;
        width: 100%;
    }
    .dl_table dl {
        display: table-row;
        border: 0 none;
    }
    .dl_table dt,
    .dl_table dd {
        display: table-cell;
        border-bottom: 1px dotted #ccc;
        padding: 16px 0;
    }
    .dl_table dt {
        width: 30%;
    }

    .dl_table dd {
        padding: 16px;
    }
    .dl_table dd .form-group {
        padding-top: 16px;
    }
    .dl_table .zip-search {
        margin-top: 16px;
    }

    /* pagination */

    .pagination {
        width: 100%;
    }


    /****** Layout ********/


    /* header */
    .header_logo_area {
        position: relative;
    }

    #contents {
        min-height: 100%;
        z-index: 2;
    }


    #side_left {
        float: left;
        width: 25%;
        padding-right: 16px;
    }
    #side_right {
        float: right;
        width: 25%;
        padding-left: 16px;
    }


}








 /** addaddaddaddaddaddaddaddaddaddaddaddaddaddaddadd */

 h4.menu_title1 {
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 400;
    color: #888485;
    border-radius: 1px;
    padding: 0 15px 0 17px;
    display: block;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 4px
}
 h4.menu_title1 a {
    float: right;
    margin: 2px 0 0 0;
}
 h4.menu_title1 span {
    float: right;
    margin: 0 0 0 15px;
    color: #888485;
    cursor: pointer;
}
h4.menu_title1 i {
font-size:15px
}

/**/
.inline-block {
    display: inline-block;
}

a.menu_list1:hover {
    background: #FFFAF2;
}
.menu_list1 {
padding: 7px 20px 7px 20px;

}

.menu_list1 {
    position: absolute;
    text-indent:-999px;
    z-index: 2;
}

.title_image1 {
  margin: 0px 7px 4px 0px;
}
.title_list1 {
font-weight: 900;
font-size: 1.3rem;
color: #3b8dbd;
}
.title_date1 {
width: 56px;
/*font-size:1.1vmin;
font-size: 1.5vw;*/
font-size:0.9em;
text-align: center;
white-space: nowrap;
}
.title_title1 {
color: #3b8dbd;
}
.title_top_main1 {
position: relative;
z-index: 1;
padding: 7px 20px 7px 20px;
}
.title_top_main1:hover {
background: #FFFAF2;
}
.title_top_main1 a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*text-indent:-999px;*/
z-index: 2;
}
.title_top_main2 {
position: relative;
z-index: 1;
padding: 7px 20px 7px 20px;
}
.waves_link_padding {
padding: 0px 0px 0px 5px;
float: left;
}
.same_line_l {
  float: left;
}
.same_line_r {
  float: right;
}
a.tag_list1:hover {
    background: #FFFAF2;
}
.tag_list1 {
padding: 7px 20px 7px 40px;
font-weight: 550;
font-size: 1.2rem;
}
.tag_btn_list1 {
    font-size: 12px;
    cursor: pointer;
    display: inline-block;
    font-weight: 1000;
    line-height: 1.0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.4rem 0.8rem;
    border-radius: .25rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-weight: bold;
}

hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    margin: 0 15px 0 15px;
}
.active_page {
    border-left: 4px solid #FF0800;
}

.logo_text{
/*text-shadow: 0 3px 7px rgba(0,0,0,0.5), 0px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(255, 255, 255, 0.5);*/
font-weight: 700;
font-size: 29px;
color:#FFFFFF;
}

.pager {
    overflow: hidden;
}

.pager ul {
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}

.pager ul li {
    margin: 0 1px;
    position: relative;
    left: -50%;
    float: left;
}

.pager ul li span,
.pager ul li a {
    display: block;
    font-size: 16px;
    padding: 0.4em 0.9em;
    border-radius: 3px;
}

.pager ul li a {
    background: #EEE;
    color: #000;
    text-decoration: none;
}

.pager ul li a:hover {
    background: #ffb22b;
    color: #FFF;
}

.center_udlr{
  display: flex;
  justify-content: center;
  align-items: center;
}

.description{
    font-weight: 400;
    font-size: 1.2rem;
    color: #545454;
    line-height: 1.60;
}

.text_over_ellipsis{
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;
}











.header_genre_list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

overflow-x: auto;
white-space: nowrap;

}

.item {
  display: inline-block;
  width: 100px;
}


.header_scrollContent ul li {
    height: 100%;
}
/*スクロールバーの幅*/
.header_scrollContent ::-webkit-scrollbar {
    height: 8px;
}
/*スクロールバーのレール*/
.header_scrollContent ::-webkit-scrollbar-track {
  border-radius: 30px;
  background: #eee;
}
/*スクロールバーのつまみ*/
.header_scrollContent ::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: #81D4FA;
}





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







.btn-tag {
    display: inline-block;
    font-weight: 1000;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 11px;
    border-radius: 0.25rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 0 3px 3px 0;
}

.btn-tag:hover, .btn-tag:focus, .btn-tag.focus {
    color: #333;
    text-decoration: none;
}


.text-danger {
    color: #fc4b6c!important;
}
.btn-light-danger {
    color: #000;
    background-color: #f9e7eb;
    border-color: #f9e7eb;
    box-shadow: 0 1px 0 rgb(255 255 255 / 15%);
}

.btn-light-danger:hover {
    background-color: #fc4b6c;
    border-color: #fc4b6c;
    color: #fff!important;
}




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



.text-info {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important;
}

.btn-light-info {
    color: #000;
    background-color: #cfecfe;
    border-color: #cfecfe;
    box-shadow: 0 1px 0 rgb(255 255 255 / 15%);
}
.btn-light-info:hover {
    background-color: #1e88e5;
    border-color: #1e88e5;
    color: #fff!important;
}










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



.movie_grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: 5px;
}
.movie_grid_item {
  background: #fff;
  padding: 5px;
  text-align: center;
}
.gap img {
  max-width: 100%;
  height: auto;
}
.shortcut {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}





/* ------------------------------------------- */
.carousel-container {
  position: relative;
  overflow: hidden;
}

.my-carousel-grid {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.my-carousel-grid::-webkit-scrollbar {
  display: none;
}

.carousel-arrow {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  height: 40px;
  cursor: pointer;
  z-index: 2;
  /*opacity: 0;*/
  pointer-events: none;
  transition: opacity 0.3s;
}

.carousel-container:hover .carousel-arrow {
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow.next {
  right: 0px;
}

.carousel-arrow.hidden {
  display: none;
}
/* ------------------------------------------- */