@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css");
:root {
  --subnav-duration: .3s;
  --subnav-timing-func: ease;
}
.preload{
  transition:0 !important;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-three {
  -webkit-line-clamp: 3;
}

.appealimage {
  width: 100%;
  margin-bottom: 1.2rem;
  text-align: center;
}
.appealimage img {
  max-width: 80%;
}

.ribbon1 {
  display: inline-block;
  position: relative;
  height: 50px;
  /*リボンの高さ*/
  line-height: 50px;
  /*リボンの高さ*/
  vertical-align: middle;
  text-align: center;
  padding: 0 30px;
  /*横の大きさ*/
  font-size: 18px;
  /*文字の大きさ*/
  background: #f57a78;
  /*塗りつぶし色*/
  color: #FFF;
  /*文字色*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1; }

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid; }

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid; }

.itemCard .card {
  width: 180px;
  background-color: #eee;
  border: none;
  border-radius: 0;
  padding: 15px 8px 10px; }
  .itemCard .card .bookImgWrap .card-img-top {
    width: 164px;
    height: 220px;
    -o-object-fit: contain;
    object-fit: contain; }
  .itemCard .card .card-body {
    padding: 5px 5px;
    color: #555;
    position: relative;
    min-height: 152px; }
    .itemCard .card .card-body .card-title {
      font-size: 0.5rem;
      margin-bottom: 3px; }
    .itemCard .card .card-body .card-media {
      position: absolute;
      bottom: 52px;
      width: 100%;
      left: 1px; }
      .itemCard .card .card-body .card-media .print-media {
        height: 19px;
        line-height: 0.4rem;
        width: 48%;
        font-size: 0.8rem;
        border: none;
        background-color: #60ac31;
        border-radius: 14px;
        color: #fff; }
      .itemCard .card .card-body .card-media .degital-media,
      .itemCard .card .card-body .card-media .digital-media {
        height: 19px;
        line-height: 0.4rem;
        width: 48%;
        font-size: 0.8rem;
        border: none;
        background-color: #999094;
        border-radius: 14px;
        color: #fff; }
    .itemCard .card .card-body .card-text {
      font-size: 0.5rem;
      position: absolute;
      bottom: 35px;
      left: 5px; }
    .itemCard .card .card-body .priceWrap {
      background-color: #fff;
      margin: auto 0;
      width: 164px;
      height: auto;
      padding: 3px;
      position: absolute;
      bottom: 0px;
      left: 0px; }
      .itemCard .card .card-body .priceWrap .priceText {
        line-height: 25px;
        margin: 0;
        font-size: 0.8rem !important;
        max-width: 100px; }
      .itemCard .card .card-body .priceWrap .purchaseBtn {
        height: 25px;
        line-height: 0.8rem;
        width: 50px;
        font-size: 0.8rem;
        border: none;
        background-color: #981D26;
        border-radius: 0;
        color: #fff; }

p {
  color: #3E3A39; }

.bg-slash {
  background: url("../images/additional/top_bg.png") repeat; }

#header {
  margin-bottom:5px;}
#header .inner {
  margin: 0 !important;
  width: 100% !important;
  display: flex ;
  flex-wrap: wrap; }
  #header .inner h1 {
    width: 300px;
    padding-left: 1rem;
    margin-bottom: 0; }
    #header .inner h1 a {
      margin-bottom: 0; }
  #header .inner #login {
    width: 350px;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: 10px;
    justify-content: flex-end;}
    #header .inner #login p {
      display: inline;
      margin: 5px 5px 0px;
      font-size: 90%;}
    #header .inner #login.member p:nth-of-type(3),
    #header .inner #login.member p:nth-of-type(4) {
      margin-top: 0;}
    #header .inner #login a {
      text-decoration: none;
      background: #4c4c4c;
      color: white;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 3px;
      display: inline-block; }
      #header .inner #login .spacer {
        width:100%;
        margin-bottom:5px;}
 

.humberger-nav {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #33325D;
  padding: 1.5rem 2rem 1rem;
  font-size: 0.7rem;
  background-color: #33325D; }
  .humberger-nav .nav-button {
    font-size: 0.6rem;
    margin-right: 0.5rem;
    color: white;
    padding: 0.2rem 0.6rem; }
    .humberger-nav .nav-button.btn-rounded {
      border-radius: 0.2rem; }
    .humberger-nav .nav-button.btn-bottom-rounded {
      border-radius: 0 0 0.2rem 0.2rem; }
  .humberger-nav .nav-link {
    color: white !important;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    .humberger-nav .nav-link:hover {
      color: black !important;
      background: white; }
  .humberger-nav .nav-item {
    position: relative; }
  .humberger-nav .dropdown-menu {
    background-color: #33325D;
    font-size: 0.7rem;
    padding: 1.0rem;
    border-radius: 0 0 0.4rem 0.2rem;
    position: absolute;
    top: 33px;
    left: 0;
    height: auto; }
    .humberger-nav .dropdown-menu a {
      color: white;
      line-height: 1.5rem; }
  .humberger-nav .btn-bottom-rounded {
    margin-top: 1rem !important; }

.navbar-nav{
  margin-right:10px !important;
}
.navbar {
  font-size: 0.7rem;
  background-color: #33325D; }
  .navbar .nav-button {
    font-size: 0.6rem;
    margin-right: 0.5rem;
    color: white !important;
    padding: 0.2rem 0.6rem; }
    .navbar .nav-button.btn-rounded {
      border-radius: 0.2rem; }
    .navbar .nav-button.btn-bottom-rounded {
      border-radius: 0 0 0.2rem 0.2rem; }
  .navbar .nav-link {
    color: white !important;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    .navbar .nav-link:hover {
      color: black !important;
      background: white; }
  .navbar .nav-item {
    position: relative; 
    }
    .navbar li.nav-item {
      list-style-type: none !important;
      margin: 0 !important;
    }
  .navbar .dropdown-menu {
    background-color: #33325D;
    font-size: 0.7rem;
    padding: 1.0rem;
    border-radius: 0 0 0.4rem 0.2rem;
    position: absolute;
    top: 33px;
    left: 0;
    height: auto; }
    .navbar .dropdown-menu a {
      color: white;
      line-height: 1.5rem; }

.subNav {
  width: 100%;
  height: 47px;
  background: white;
  border-bottom: solid 1px black;
  font-size: 0.6rem;
  text-align: center;
  padding-right: 20px; }
  .subNav .menu-bargerBtn {
    margin-left: 15px;
    margin-top: 9px;
    background-color: transparent;
    background-image: url("../images/additional/icon_humberger.png");
    background-size: contain;
    height: 1.7rem; }

#subNavMenu {
  font-size: 0.5rem; }
  #subNavMenu .nav-link {
    color: #555; }
  #subNavMenu .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }

#nav-container {
  position: absolute;
  top:0;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index:10000;
  transition: top .5s;}
#nav-container.nav-open {
  top:0;
  position:fixed;}
  #nav-container #nav_toggle {
    position: absolute;
    display: none;
    opacity: 0;}
  #nav-container .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    background: #000;}
  #nav-container * {
    visibility: visible;}
  #nav-container .bg-show {
    visibility: visible;
    opacity: .6;}
  
    #nav-container #nav-content {
      padding: 20px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
     
      background: #33325D;
      pointer-events: auto;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      transform: translateY(-150%);
      transition: transform .5s;
      will-change: transform;
      contain: paint;}
      #nav-container #nav-content ul {
        display: flex;
        flex-direction: column;}
        #nav-container #nav-content ul li {
          list-style-type: none;
          margin: 0;
        }
        #nav-container #nav-content ul li a {
          padding: 10px 5px;
          display: block;
          text-transform: uppercase;
          transition: color .2s, background-color .2s;
          font-size: 12pt;
          color: #fff;
          margin-bottom: 3px;}
          #nav-container #nav-content ul li a.nav-item:hover {
            color: black;
            background: white;}
          #nav-container #nav-content ul li label {
            width: 100%;}
          #nav-container #nav-content.show {
            transform: none !important;
          bottom:0;}
          #nav-container #nav-content .btn-close {
            background:#555;
            color: #fff;}


    #nav-humb-container {
      position: absolute;
      width: 100%;
      pointer-events: none;
      }
      #nav-humb-container #nav_toggle {
        position: absolute;
        display: none;
        opacity: 0;}
      #nav-humb-container * {
        visibility: visible;}
      #nav-humb-container .humbbtn {
        position: relative;
        margin-top: -10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        border-radius: 0;
        height: 47px;
        width: 30px;
        cursor: pointer;
        pointer-events: auto;
        margin-left: 20px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        transform : none;
        transition: .2s;}
        #nav-humb-container .icon-bar {
          display: block;
          width: 100%;
          height: 3px;
          background: #333;
          transition: .1s;}
          #nav-humb-container .icon-bar + .icon-bar {
          margin-top: 5px;}
          #nav-humb-container .icon-bar:nth-of-type(3)::after {
            content:"MENU";
            position: absolute;
            top:35px;
            left:1px;
            color: #333;
            font-size: 0.6rem;}
   
    @media all and (max-width: 991px) {
      html.is-fixed,
      html.is-fixed body {
        height: 100%;
        overflow: hidden;}
    }
            
       

#footer {
  background-color: #3B3C3B; }
  #footer .copyright {
    border-top: none; }
  #footer .footerMenu {
    width: 100%;
    height: 40px;
    background: #3B3C3B;
    font-size: 0.7rem;
    text-align: center;
    padding-left: 20px; }
    #footer .footerMenu a {
      line-height: 40px;
      color: white;
      margin-left: 15px; }

.flex-control-nav {
  height: 17px; }

#toppage .col-md-6 {
  padding: 0;
  overflow: auto; }

#toppage .top-bg-pattern {
  background-image: url("../images/additional/page_materials/top_bg.png");
  background-repeat: repeat; }

#toppage #top-image {
  width: 100%;
  height: auto; }

#toppage #carouselExampleIndicators {
  position: relative;
  margin: auto; }
  #toppage #carouselExampleIndicators .carousel-indicators li {
    width: 5px;
    height: 5px; }
  #toppage #carouselExampleIndicators .carousel-control-prev-icon {
    position: absolute;
    left: -0.05rem; }
  #toppage #carouselExampleIndicators .carousel-control-next-icon {
    position: absolute;
    right: -0.05rem; }
  #toppage #carouselExampleIndicators .sliderDeco {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 4%;
    height: 100%; }
  #toppage #carouselExampleIndicators #sliderDecoLeft {
    left: 0; }
  #toppage #carouselExampleIndicators #sliderDecoRight {
    right: 0; }

@media all and (-ms-high-contrast: none) {
  #toppage #top-right #new-items *::-ms-backdrop, #toppage #top-right #new-items .loopitem {
    width: 25%; }
    #toppage #top-right #new-items *::-ms-backdrop .bookImgWrap, #toppage #top-right #new-items .loopitem .bookImgWrap {
      width: 100%; } }

#toppage #top-right #new-items .flex-book {
  flex-wrap: wrap; }
#toppage #top-right #new-items .loopitem {
  width: 50%;
  height: auto; }
@media all and (min-width:480px) {
  #toppage #top-right #new-items .flex-book {
    flex-wrap: nowrap; }
  #toppage #top-right #new-items .loopitem {
    width: 25%;
    height: auto; } }

#toppage #top-right #new-items #new-books .card, #toppage #top-right #new-items #new-magazines .card {
  border: 0;
  width: auto;
  height: auto; }
  @media (min-width: 1200px) {
    #toppage #top-right #new-items #new-books .card, #toppage #top-right #new-items #new-magazines .card {
      margin: 10px; } }
  #toppage #top-right #new-items #new-books .card .bookImgWrap, #toppage #top-right #new-items #new-magazines .card .bookImgWrap {
    height: 70%;
    width: 90%;
    margin: 0 auto; }
    #toppage #top-right #new-items #new-books .card .bookImgWrap .card-img-top, #toppage #top-right #new-items #new-magazines .card .bookImgWrap .card-img-top {
      -o-object-fit: contain;
      object-fit: contain;
      -o-object-position: center;
      object-position: center; }
  @media all and (-ms-high-contrast: none) {
    #toppage #top-right #new-items #new-books .card *::-ms-backdrop, #toppage #top-right #new-items #new-books .card .bookImgWrap, #toppage #top-right #new-items #new-magazines .card *::-ms-backdrop, #toppage #top-right #new-items #new-magazines .card .bookImgWrap {
      height: auto; } }
  #toppage #top-right #new-items #new-books .card .card-body, #toppage #top-right #new-items #new-magazines .card .card-body {
    padding: 0;
    margin-top: 5px;
    min-height: 80px; }
    #toppage #top-right #new-items #new-books .card .card-body .card-title, #toppage #top-right #new-items #new-magazines .card .card-body .card-title {
      margin-top: 11%;
      margin-bottom: 5%;
      font-size: 0.9rem;
      color: white;
      padding: 1px;
      border-radius: 10px; }
      @media (max-width: 992px) {
        #toppage #top-right #new-items #new-books .card .card-body .card-title, #toppage #top-right #new-items #new-magazines .card .card-body .card-title {
          font-size: 0.7rem; } }
      @media (min-width: 992px) and (max-width: 1200px) {
        #toppage #top-right #new-items #new-books .card .card-body .card-title, #toppage #top-right #new-items #new-magazines .card .card-body .card-title {
          margin-top: 7%;
          font-size: 0.7rem; } }
      @media (min-width: 1200px) and (max-width: 1500px) {
        #toppage #top-right #new-items #new-books .card .card-body .card-title, #toppage #top-right #new-items #new-magazines .card .card-body .card-title {
          margin-top: 5%; } }
      @media (min-width: 1500px) {
        #toppage #top-right #new-items #new-books .card .card-body .card-title, #toppage #top-right #new-items #new-magazines .card .card-body .card-title {
          margin-top: 12%; } }
    #toppage #top-right #new-items #new-books .card .card-body .card-text, #toppage #top-right #new-items #new-magazines .card .card-body .card-text {
      font-size: 0.5rem;
      margin: 0.2rem 0;
      padding: 0;
      color: black; }

#toppage #top-right #new-items #new-magazines {
  height: auto; }
  #toppage #top-right #new-items #new-magazines #new-magazines-header {
    background-color: #981D26; }
  #toppage #top-right #new-items #new-magazines .card-title {
    background-color: #981D26; }

#toppage #top-right #new-items #new-books #new-books-header {
  background-color: #33325D; }

#toppage #top-right #new-items #new-books .card-title {
  background-color: #33325D; }

#toppage #top-right #new-items #news {
  background: white; }
  #toppage #top-right #new-items #news #news-header {
    background-color: #936947; }
  #toppage #top-right #new-items #news #topics {
    padding-bottom: 5px; }
    #toppage #top-right #new-items #news #topics .box {
      border-bottom: none; }
      #toppage #top-right #new-items #news #topics .box .inner {
        display: block;
        width: auto;
        padding: 0 20px 0 25px;
        margin: 0;
        font-weight: normal;
        text-align: left;
        float: none; }
        #toppage #top-right #new-items #news #topics .box .inner p {
          line-height: 1;}
  #toppage #top-right #new-items #news .show-more {
    font-size: 0.6rem;
    float: right;
    margin-right: 0rem;
    margin-top: 0.5rem;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline; }

#toppage #top-right #new-items .show-more {
  font-size: 0.6rem;
  float: right;
  margin-right: 1.5rem;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline; }

#booksPage {
  position: relative; }
  #booksPage #leftPaneButton {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100; }
  #booksPage .leftPaneTitle {
    display: none;
    width: 0%; }
  #booksPage .category-item {
    display: none;
    width: 0%; }
    #booksPage .category-item a {
      width: 0%;
      display: none; }
  #booksPage .leftPaneTitle-active {
    font-size: 0.4rem;
    color: #555;
    margin: 0 auto;
    text-align: left;
    padding: 20px 0 0;
    font-size: 0.5rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display: block;
    width: 85%; }
  #booksPage .category-item-active {
    display: block;
    width: 85%;
    font-size: 0.6rem;
    color: #555;
    list-style-type: none;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
    #booksPage .category-item-active a {
      display: block;
      background-color: #CBCCCB;
      color: #555;
      margin: 10px 0;
      line-height: 25px;
      padding-left: 5px; }
    #booksPage .category-item-active .facebookBtn {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #3a5998;
      border-radius: 5px;
      color: white;
      font-size: 1rem; }
  #booksPage .transform {
    position: absolute;
    top: 0;
    left: -100%;
    background-color: #9E9F9E;
    height: 100%;
    z-index: 1000;
    width: 100%;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;}
  
  #booksPage .transform-active {
    background-color: #9E9F9E;
    height: 100%;
    width: 200px;
    opacity: 1.0; }
  #booksPage .transform .category-item-active {
    display: block;
    width: 85%;
    font-size: 1rem;
    color: #555;
    list-style-type: none;}
    #booksPage .transform .category-item-active a {
      display: block;
      background-color: #CBCCCB;
      color: #555;
      margin: 10px 0;
      line-height: 25px;
      padding: 5px 0 5px 5px ; }
    #booksPage .transform .category-item-active .facebookBtn {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #3a5998;
      border-radius: 5px;
      color: white;
      font-size: 1rem; }
  #booksPage #leftPane {
    background-color: #9E9F9E; }
  #booksPage .arrowbutton {
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5000;
    -webkit-appearance: none;
    border: 0;
    background: #555;
    border-radius: 0 0 20px 0;
    height: 30px;
    width: 90px;
    cursor: pointer;
    pointer-events: auto;  
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);}
  #booksPage #leftPanel_toggle {
    position: absolute;
    display: none;
    opacity: 0;}
    #booksPage #leftPanel_toggle:checked ~ .transform {
      background-color: #9E9F9E;
      height: 100%;
      left: 0;
      opacity: 1.0;}
    #booksPage #leftPanel_toggle:checked ~ .leftPaneTitle {
      font-size: 0.4rem;
      color: #555;
      margin: 0 auto;
      text-align: left;
      padding: 20px 0 0;
      font-size: 0.5rem;
      display: block;
      width: 85%; }
  #booksPage .arrow {
    position: relative;
    display: inline-block;
    margin-top: -10px;}
  #booksPage .arrow::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 3px #eee;
    border-right: solid 3px #eee;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;}
  #booksPage .arrow::after{
    white-space: pre-wrap;
    content: 'カテゴリ';
    color: #eee;
    font-size: 0.7rem;
    font-weight: bold;
    position: absolute;
    left: 22px;
    margin-top: -3px;}
  #booksPage #mainArea {
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    /*margin-top: 30px;*/
    margin-top:0px;
    overflow: auto; }
    #booksPage #mainArea .pageHeader {
      position: relative;
      width: 100%;
      height: 130px; }
      #booksPage #mainArea .pageHeader img {
        position: absolute;
        width: 100%;
        height: 130px;
        -o-object-fit: cover;
        object-fit: cover; }
      #booksPage #mainArea .pageHeader .img-overlay {
        position: absolute;
        width: 100%;
        height: 130px;
        background-color: rgba(255, 255, 255, 0.5);
        color: #33325D; }
        #booksPage #mainArea .pageHeader .img-overlay .pageHeaderMark {
          width: 50px;
          height: 50px;
          margin: 15px auto 5px;
          border-radius: 50%;
          background-color: rgba(20, 20, 36, 0.6);
          text-align: center;
          vertical-align: middle; }
          #booksPage #mainArea .pageHeader .img-overlay .pageHeaderMark .fa {
            font-size: 1.6rem;
            padding-top: 12px;
            opacity: 0.7; }
        #booksPage #mainArea .pageHeader .img-overlay p {
          font-size: 0.7rem; }
        @media screen and (max-width:767px){
          #booksPage #mainArea .pageHeader .img-overlay h2 {
            font-size: 1.7rem; }}
    #booksPage #mainArea .cookwarePageHeader {
      width: 100%;
      margin: 0 auto; }
      #booksPage #mainArea .cookwarePageHeader img {
        width: 35%;
        max-width: 300px;
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: top;
        object-position: top; }
      #booksPage #mainArea .cookwarePageHeader .pageHeaderText {
        margin-left: 20px;
        overflow: auto;
        height: auto; }
        #booksPage #mainArea .cookwarePageHeader .pageHeaderText h3 {
          font-size: 4rem;
          line-break: unset; }
        #booksPage #mainArea .cookwarePageHeader .pageHeaderText p {
          font-size: 0.7rem;
          max-width: 28rem; }
        @media (max-width: 992px) {
          #booksPage #mainArea .cookwarePageHeader .pageHeaderText h3 {
            font-size: 3rem; }
          #booksPage #mainArea .cookwarePageHeader .pageHeaderText p {
            max-width: 22rem; } }
    #booksPage #mainArea #newBooks {
      overflow: auto; }
    #booksPage #mainArea #cookwares {
      overflow: auto; }
      #booksPage #mainArea #cookwares .card {
        width: auto;
        background: white;
        border: solid 1px #555;
        text-align: center; }
        #booksPage #mainArea #cookwares .card .imgWrap img {
          width: 220px;
          height: auto;
          -o-object-fit: contain;
          object-fit: contain;
          -o-object-position: center;
          object-position: center; }
        #booksPage #mainArea #cookwares .card .card-body {
          min-height: 80px !important; }
          #booksPage #mainArea #cookwares .card .card-body .priceWrap {
            border: solid 1px #555;
            position: relative !important;
            margin: 15px auto 0; }
    #booksPage #mainArea .subscriptionList .pageHeader {
      padding-right: 22px; }
      #booksPage #mainArea .subscriptionList .pageHeader h3 {
        color: #33325D;
        font-size: 1.5rem;
        text-align: center;
        padding: 30px 0 10px; }
      #booksPage #mainArea .subscriptionList .pageHeader .infoBtn {
        display: inline-block;
        border: solid 2px #555;
        padding: 3px 20px;
        font-size: 0.5rem; }
    #booksPage #mainArea .subscriptionList .container {
      max-width: 1000px; }
      #booksPage #mainArea .subscriptionList .container .subscriptionItemBox {
        width: auto;
        height: auto;
        padding: 30px;
        margin: 25px 10px 15px;
        background: white;
        -webkit-box-shadow: 0 0 8px #C4C4C4;
        box-shadow: 0 0 8px #C4C4C4;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        @media (max-width: 992px) {
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox {
            padding: 15px; } }
        #booksPage #mainArea .subscriptionList .container .subscriptionItemBox img {
          width: auto;
          height: 13rem;
          max-height: 180px;
          -o-object-fit: contain;
          object-fit: contain; }
          @media (max-width: 992px) {
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox img {
              max-height: 130px; } }
        #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box {
          width: 100%;
          height: auto;
          margin-left: 20px; }
          @media (max-width: 992px) {
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box {
              margin-left: 10px; }
              #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .titleWrap h3 {
                font-size: 1.2em; }
              #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .titleWrap .button {
                font-size: 0.6em;
                line-height: 20px;
                margin-top: 3px; } }
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .catchCopy {
            margin: 0 0 5px;
            font-size: 0.5em; }
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .titleWrap {
            width: 100%;
            overflow: auto;
            border-bottom: solid 2px #555; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .titleWrap h3 {
              font-size: 1.4em;
              float: left;
              color: #33325D;
              padding-bottom: 5px; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .titleWrap .button {
              width: 28%;
              float: right;
              line-height: 25px;
              color: white;
              padding: 0;
              height: 100%;
              margin-top: 1px;
              display: inline-block; }
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .description {
            padding: 15px 0; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .description p {
              padding: 2px 0;
              margin: 0;
              font-size: 0.8rem; }
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table {
            text-align: center;
            width: 100%; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table th, #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table td {
              border: solid 2px #555;
              border-collapse: separate; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table .row1 {
              color: #555;
              height: 20px; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table .row2 {
              background-color: #F0B4B4;
              height: 30px; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table .row3 {
              background-color: #E1E2DF;
              height: 30px; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table .col1 {
              width: 13%; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box table .col2 {
              width: 29%; }
          #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .wordWrap {
            font-size: 0.2em;
            padding: 5px 0; }
            #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .wordWrap p {
              float: left;
              margin: 0; }
              @media (max-width: 992px) {
                #booksPage #mainArea .subscriptionList .container .subscriptionItemBox .box .wordWrap p {
                  clear: left; } }

.closebutton{
	position: absolute;
	right: 0px;
	background: #555;}
  .closebutton .cross {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;}
  .closebutton .cross::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px; /* 棒の幅（太さ） */
    height: 20px; /* 棒の高さ */
    background: #fff;
    transform: translate(-50%,-50%) rotate(45deg);}
  .closebutton .cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px; /* 棒の幅（太さ） */
    height: 20px; /* 棒の高さ */
    background: #fff;
    transform: translate(-50%,-50%) rotate(-45deg);}

#booksDetail {
  position: relative;}
#booksDetail #leftPaneButton {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100; }

#booksDetail .leftPaneTitle {
  display: none;
  width: 0%; }

#booksDetail .category-item {
  display: none;
  width: 0%; }
  #booksDetail .category-item a {
    width: 0%;
    display: none; }

#booksDetail .leftPaneTitle-active {
  font-size: 0.4rem;
  color: #555;
  margin: 0 auto;
  text-align: left;
  padding: 20px 0 0;
  font-size: 0.5rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: block;
  width: 85%; }

#booksDetail .category-item-active {
  display: block;
  width: 85%;
  font-size: 0.6rem;
  color: #555;
  list-style-type: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  #booksDetail .category-item-active a {
    display: block;
    background-color: #CBCCCB;
    color: #555;
    margin: 10px 0;
    line-height: 25px;
    padding-left: 5px; }
  #booksDetail .category-item-active .facebookBtn {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #3a5998;
    border-radius: 5px;
    color: white;
    font-size: 1rem; }

#booksDetail .transform {
  position: absolute;
  top: 0;
  left: -100%;
  background-color: #9E9F9E;
  height: 100%;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

#booksDetail .transform-active {
  background-color: #9E9F9E;
  height: 100%;
  width: 200px;
  opacity: 1.0; }

#booksDetail .transform .category-item-active {
  display: block;
  width: 85%;
  font-size: 1rem;
  color: #555;
  list-style-type: none;}
  #booksDetail .transform .category-item-active a {
    display: block;
    background-color: #CBCCCB;
    color: #555;
    margin: 10px 0;
    line-height: 25px;
    padding: 5px 0 5px 5px ; }
  #booksDetail .transform .category-item-active .facebookBtn {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #3a5998;
    border-radius: 5px;
    color: white;
    font-size: 1rem; }

#booksDetail #leftPane {
  background-color: #9E9F9E; }
#booksDetail .arrowbutton {
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5000;
  -webkit-appearance: none;
  border: 0;
  background: #555;
  border-radius: 0 0 20px 0;
  height: 30px;
  width: 90px;
  cursor: pointer;
  pointer-events: auto;  
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}
#booksDetail #leftPanel_toggle {
  position: absolute;
  display: none;
  opacity: 0;}
  #booksDetail #leftPanel_toggle:checked ~ .transform {
    background-color: #9E9F9E;
    height: 100%;
    /*width: 100%;*/
    left: 0;
    opacity: 1.0;}
  #booksDetail #leftPanel_toggle:checked ~ .leftPaneTitle {
    font-size: 0.4rem;
    color: #555;
    margin: 0 auto;
    text-align: left;
    padding: 20px 0 0;
    font-size: 0.5rem;
    display: block;
    width: 85%; }
#booksDetail .arrow {
  position: relative;
  display: inline-block;
  margin-top: -10px;}
#booksDetail .arrow::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 3px #eee;
  border-right: solid 3px #eee;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;}
#booksDetail .arrow::after{
  white-space: pre-wrap;
  content: 'カテゴリ';
  color: #eee;
  font-size: 0.7rem;
  font-weight: bold;
  position: absolute;
  left: 22px;
  margin-top: -3px;}
#booksDetail #mainArea {
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*margin-top: 30px;*/
  overflow: auto; }

#booksDetail .container {
  max-width: 900px; }

#booksDetail #contents {
  width: 100%;
  margin: 3rem auto;
  color: #555; }
  #booksDetail #contents .contentsHeader .imagewrap img {
    width: 45%;
    max-width: 400px;
    max-height: 21rem;
    -o-object-fit: contain;
    object-fit: contain; }
  #booksDetail #contents .contentsHeader .imageCookware {
    width: 50%;
    max-width: 1000px;
    max-height: 400px;
    -o-object-fit: contain;
    object-fit: contain; }
  @media (max-width: 992px) {
    #booksDetail #contents .contentsHeader .imagewrap {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 30px; }
      #booksDetail #contents .contentsHeader .imagewrap img {
        width: 50%;
        max-width: 17rem;
        max-height: 29rem;
        -o-object-fit: contain;
        object-fit: contain; }
    #booksDetail #contents .contentsHeader .imageCookware {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 30px; }
      #booksDetail #contents .contentsHeader .imageCookware img {
        max-width: 1000px;
        max-height: 400px;
        -o-object-fit: contain;
        object-fit: contain; } }
  #booksDetail #contents .contentsHeader .contentsHeader-right {
    font-size: 1.0rem;
    width: 100%; }
    #booksDetail #contents .contentsHeader .contentsHeader-right p {
      margin: 0; }
    #booksDetail #contents .contentsHeader .contentsHeader-right #bookTitle {
      width: 100%;
      margin-top: 0.1rem;
      margin: 1.0rem 0;
      border-bottom: solid 1px #555; }
      #booksDetail #contents .contentsHeader .contentsHeader-right #bookTitle h3 {
        font-size: 1.3rem; }
      #booksDetail #contents .contentsHeader .contentsHeader-right #bookTitle input {
        border: none;
        padding: 3px 10px;
        margin-bottom: 0.5rem;
        color: white;
        font-size: 0.9rem;
        cursor: pointer; }
    #booksDetail #contents .contentsHeader .contentsHeader-right #bookInfo {
      margin-top: 0.5rem;
      color: #888;
      font-size: 0.7rem; }
    #booksDetail #contents .contentsHeader .contentsHeader-right #bookPrice {
      background-color: lightgray; }
  #booksDetail #contents .nav-tabs {
    margin-top: 40px; }
    #booksDetail #contents .nav-tabs .nav-link {
      background: lightgray;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      margin-right: 7px;
      color: white; }
    #booksDetail #contents .nav-tabs .nav-link.active {
      background: white;
      color: #333; }
  #booksDetail #contents .e-store {
    margin: 0 0 15px !important;
    width: 100%; }
    #booksDetail #contents .e-store .e-store-listWrap {
      padding: 10px;
      border: solid 1px lightgray; }
      #booksDetail #contents .e-store .e-store-listWrap h4 {
        font-size: 1.2rem; }
  #booksDetail #contents #mokuji {
    border: solid 1px lightgray;
    padding: 15px; }
    #booksDetail #contents #mokuji .mokujiHeader {
      text-align: center;
      width: 100%;
      font-size: 1.2rem;
      margin: 10px auto 10px;
      padding-bottom: 10px;
      text-decoration: underline; }
    #booksDetail #contents #mokuji .section-index {
      margin-bottom: 60px; }
    #booksDetail #contents #mokuji ul {
      list-style: none;
      padding: 0; }
    #booksDetail #contents #mokuji h2 {
      margin: 0 0 10px;
      padding: 2px 0 8px;
      border-bottom: 3px double gray;
      font-weight: bold;
      font-size: 2em;
      color: #c03; }
    #booksDetail #contents #mokuji h3, #booksDetail #contents #mokuji h4, #booksDetail #contents #mokuji h5 {
      margin: 0;
      font-weight: bold; }
    #booksDetail #contents #mokuji h3 {
      color: darkgray; }
    #booksDetail #contents #mokuji p {
      margin: 0; }
    #booksDetail #contents #mokuji .series {
      margin-left: -10px; }
    #booksDetail #contents #mokuji .label {
      margin-left: -10px; }
    #booksDetail #contents #mokuji .lv1 {
      margin: 30px 0; }
    #booksDetail #contents #mokuji .lv2 {
      margin: 0 0 0 17px;
      padding: 10px 17px;
      border-bottom: 1px solid lightgray; }
    #booksDetail #contents #mokuji .lv3,
    #booksDetail #contents #mokuji .lv4,
    #booksDetail #contents #mokuji .lv5 {
      margin: 10px 0;
      padding-left: 30px; }
    #booksDetail #contents #mokuji dt {
      margin-bottom: 15px; }
      #booksDetail #contents #mokuji dt.none {
        margin-bottom: 5px; }
  #booksDetail #contents .additional-bookInfo {
    font-size: 0.4rem;
    border: solid 1px #555;
    padding: 0.6rem;
    margin: 1.2rem 0; }
    #booksDetail #contents .additional-bookInfo h4 {
      font-size: 1.0rem; }
    #booksDetail #contents .additional-bookInfo p {
      font-size: 0.8rem; }
      #booksDetail #contents .additional-bookInfo p strong {
        font-size: 1.0rem; }
  #booksDetail #contents .additional-cookwareInfo {
    font-size: 0.8rem;
    padding: 0.6rem;
    margin: 1.2rem 0; }
    #booksDetail #contents .additional-cookwareInfo h4 {
      font-size: 1.0rem; }
    #booksDetail #contents .additional-cookwareInfo p {
      font-size: 0.8rem; }
      #booksDetail #contents .additional-cookwareInfo p strong {
        font-size: 1.0rem; }


#dvdListPage .pageHeader {
  height: 200px;
  border-bottom: #555 1px solid; }

#dvdListPage, #giftListPage {
  position: relative; }
  #dvdListPage .container, #giftListPage .container {
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin-top: 30px;
    overflow: auto; }
    #dvdListPage .container .pageHeader, #giftListPage .container .pageHeader {
      position: relative;
      width: 100%; }
      #dvdListPage .container .pageHeader .img-overlay, #giftListPage .container .pageHeader .img-overlay {
        position: absolute;
        width: 100%;
        height: 130px;
        background-color: rgba(255, 255, 255, 0.5);
        color: #33325D; }
        #dvdListPage .container .pageHeader .img-overlay .pageHeaderMark, #giftListPage .container .pageHeader .img-overlay .pageHeaderMark {
          width: 50px;
          height: 50px;
          margin: 40px auto 5px;
          border-radius: 50%;
          background-color: rgba(20, 20, 36, 0.6);
          text-align: center;
          vertical-align: middle; }
          #dvdListPage .container .pageHeader .img-overlay .pageHeaderMark .fa, #giftListPage .container .pageHeader .img-overlay .pageHeaderMark .fa {
            font-size: 2rem;
            padding-top: 6px;
            line-height: 50px;
            padding: 0;
            opacity: 0.7; }
        #dvdListPage .container .pageHeader .img-overlay h2, #giftListPage .container .pageHeader .img-overlay h2 {
          padding: 10px 0 5px;
          font-size: 2.0rem; }
        #dvdListPage .container .pageHeader .img-overlay p, #giftListPage .container .pageHeader .img-overlay p {
          font-size: 1.0rem; }
    #dvdListPage .container #dvds, #giftListPage .container #dvds {
      overflow: auto; }
      #dvdListPage .container #dvds .card, #giftListPage .container #dvds .card {
        background-color: white;
        border: solid 2px #b4b4b4;
        border-radius: 3px; }
        #dvdListPage .container #dvds .card .card-img-top, #giftListPage .container #dvds .card .card-img-top {
          width: 160px; }
        #dvdListPage .container #dvds .card .priceWrap, #giftListPage .container #dvds .card .priceWrap {
          width: 160px;
          height: auto;
          border: solid 2px #b4b4b4; }

#giftListPage .pageHeader img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain; }

#giftListPage .pageHeader .sp {
  display: none; }

@media (max-width: 768px) {
  #giftListPage .pageHeader .pc {
    display: none; }
  #giftListPage .pageHeader .sp {
    display: block; } }

#giftListPage .pageHeader .info-btns a {
  color: #969696;
  border: solid 1px #969696;
  font-size: 0.9rem;
  margin-left: 10px;
  padding: 5px 15px; }

#giftListPage .pageHeader h3 {
  font-size: 1.3rem;
  text-align: center;
  margin-top: 15px; }
  @media (max-width: 768px) {
    #giftListPage .pageHeader h3 {
      font-size: 0.9rem; } }

.caution {
  font-size: 0.4rem !important; }

.thin-border-bottm-line {
  border-bottom: solid 1px gray; }

.bg-brown {
  background: #796A55; }

#subscription {
  position:relative;}
#subscription #leftPaneButton {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100; }

#subscription .leftPaneTitle {
  display: none;
  width: 0%; }

#subscription .category-item {
  display: none;
  width: 0%; }
  #subscription .category-item a {
    width: 0%;
    display: none; }

#subscription .leftPaneTitle-active {
  font-size: 0.4rem;
  color: #555;
  margin: 0 auto;
  text-align: left;
  padding: 20px 0 0;
  font-size: 0.5rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: block;
  width: 85%; }

#subscription .category-item-active {
  display: block;
  width: 85%;
  font-size: 0.6rem;
  color: #555;
  list-style-type: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  #subscription .category-item-active a {
    display: block;
    background-color: #CBCCCB;
    color: #555;
    margin: 10px 0;
    line-height: 25px;
    padding-left: 5px; }
  #subscription .category-item-active .facebookBtn {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #3a5998;
    border-radius: 5px;
    color: white;
    font-size: 1rem; }

#subscription .transform {
  position: absolute;
  top: 0;
  left: -100%;
  background-color: #9E9F9E;
  height: 100%;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  #subscription .transform .category-item-active {
    display: block;
    width: 85%;
    font-size: 1rem;
    color: #555;
    list-style-type: none;}
    #subscription .transform .category-item-active a {
      display: block;
      background-color: #CBCCCB;
      color: #555;
      margin: 10px 0;
      line-height: 25px;
      padding: 5px 0 5px 5px ; }

#subscription .transform-active {
  background-color: #9E9F9E;
  height: 100%;
  width: 200px;
  opacity: 1.0; }
  
#subscription #leftPane {
  background-color: #9E9F9E; }
#subscription .arrowbutton {
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5000;
  -webkit-appearance: none;
  border: 0;
  background: #555;
  border-radius: 0 0 20px 0;
  height: 30px;
  width: 80px;
  cursor: pointer;
  pointer-events: auto;  
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}
#subscription #leftPanel_toggle {
  position: absolute;
  display: none;
  opacity: 0;}
  #subscription #leftPanel_toggle:checked ~ .transform {
    background-color: #9E9F9E;
    height: 100%;
    left: 0;
    opacity: 1.0;}
  #subscription #leftPanel_toggle:checked ~ .leftPaneTitle {
    font-size: 0.4rem;
    color: #555;
    margin: 0 auto;
    text-align: left;
    padding: 20px 0 0;
    font-size: 0.5rem;
    display: block;
    width: 85%; }
#subscription .arrow {
  position: relative;
  display: inline-block;
  margin-top: -10px;}
#subscription .arrow::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 3px #eee;
  border-right: solid 3px #eee;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;}
#subscription .arrow::after{
  white-space: pre-wrap;
  content: '雑誌';
  color: #eee;
  font-size: 0.8rem;
  font-weight: bold;
  position: absolute;
  left: 22px;
  margin-top: -5px;}

#subscription #mainArea {
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*margin-top: 30px;*/
  overflow: auto; }
  @media all and (min-width: 1200px) and (-ms-high-contrast: none) {
    #subscription #mainArea .benefit *::-ms-backdrop, #subscription #mainArea .benefit .col-xl-7 {
      -ms-flex: none;
      flex: none;
      max-width: none; } }
  #subscription #mainArea .benefit .section {
    margin: 50px 0; }
    #subscription #mainArea .benefit .section .section-header {
      margin-bottom: 10px; }
      #subscription #mainArea .benefit .section .section-header .title-img {
        margin-right: 20px;
        width: 5rem;
        height: 5rem;
        -o-object-fit: contain;
        object-fit: contain; }
      @media all and (-ms-high-contrast: none) {
        #subscription #mainArea .benefit .section .section-header *::-ms-backdrop, #subscription #mainArea .benefit .section .section-header .title-img {
          width: auto; } }
      #subscription #mainArea .benefit .section .section-header h4 {
        font-size: 1.1rem;
        color: #A82836;
        margin-top: 5px; }
      #subscription #mainArea .benefit .section .section-header a {
        color: white;
        font-size: 0.6rem;
        background: #A82836;
        margin: 0;
        padding: 3px 15px; }
    #subscription #mainArea .benefit .section .section-body {
      margin: 15px; }
    #subscription #mainArea .benefit .section p {
      color: #555;
      font-size: 0.8rem;
      margin: 0; }
    #subscription #mainArea .benefit .section .p-lg {
      font-size: 0.9rem; }
    #subscription #mainArea .benefit .section .img-wrap {
      width: 100%;
      height: auto;
      text-align: center;
      margin: 25px 0 35px; }
  #subscription #mainArea .benefit .benefit-1 .sample-img {
    width: 150px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    margin-left: 110px; }
  @media (min-width: 1300px) {
    #subscription #mainArea .benefit .benefit-1 {
      position: relative; }
      #subscription #mainArea .benefit .benefit-1 .sample-img {
        position: absolute;
        top: 20px;
        right: 0;
        margin-left: 0; } }
  #subscription #mainArea .benefit .benefit-nanao img {
    width: 80%;
    margin: 20px 0 40px; }
  #subscription #mainArea .benefit .benefit-alba img {
    width: 80%;
    margin: 20px 0 40px; }
  #subscription #mainArea .container {
    max-width: 1000px !important; }
    #subscription #mainArea .container .infoBtn {
      float: right;
      padding: 3px 12px;
      border: solid 1px #555;
      font-size: 0.7rem; }
    #subscription #mainArea .container .btn-wrap {
      text-align: center;
      width: 100%; }
      #subscription #mainArea .container .detail-btn {
        color: white;
        font-size: 1.0rem;
        background: #A82836;
        margin: 10px 0;
        padding: 6px 30px; }
    #subscription #mainArea .container #contents {
      width: 100%;
      margin: 2rem auto 0;
      color: #555;
      text-align: center; }
      @media screen and (max-width:767px) {
        #subscription #mainArea .container #contents {
          margin-top:1rem;}
        #subscription #mainArea .container .infoBtn {
          margin-bottom:15px;} }
      #subscription #mainArea .container #contents #title {
        margin-bottom: 2rem; }
        #subscription #mainArea .container #contents #title h4 {
          color: #796A55;
          margin-bottom: 2rem !important; }
        #subscription #mainArea .container #contents #title p {
          margin: 0;
          font-size: 0.8rem;
          line-height: 1.2rem; }
      #subscription #mainArea .container #contents #description {
        width: 100%;
        height: auto;
        background-color: white;
        border: solid 10px #C9BC9C;
        margin-bottom: 40px; }
        #subscription #mainArea .container #contents #description h3 {
          text-align: center;
          font-size: 1.3rem;
          padding-top: 10px; }
          #subscription #mainArea .container #contents #description h3 span {
            font-size: 2.0rem; }
        #subscription #mainArea .container #contents #description #price {
          margin: 0 auto;
          width: 430px; }
          #subscription #mainArea .container #contents #description #price p {
            margin: 0;
            font-size: 0.8rem;
            line-height: 0.8rem;
            text-align: left; }
          #subscription #mainArea .container #contents #description #price table {
            text-align: center; }
            #subscription #mainArea .container #contents #description #price table th, #subscription #mainArea .container #contents #description #price table td {
              border: solid white;
              border-width: 5px 2px;
              border-collapse: separate; }
            #subscription #mainArea .container #contents #description #price table .row1 {
              background-color: #635443;
              color: white;
              height: 30px; }
            #subscription #mainArea .container #contents #description #price table .row2 {
              background-color: #DCD3C0;
              height: 45px; }
            #subscription #mainArea .container #contents #description #price table .row3 {
              background-color: #DDDEDE;
              line-height: 45px; }
            #subscription #mainArea .container #contents #description #price table .col1 {
              width: 63px;
              font-size: 1.2rem; }
            #subscription #mainArea .container #contents #description #price table .col2 {
              width: 366px; }
      #subscription #mainArea .container #contents #benefits h3 {
        width: 500px;
        font-size: 1.7rem;
        color: #796A55;
        background-color: #DCD3C0; }
      #subscription #mainArea .container #contents #benefits .summery {
        border: solid 2px #A99B7C;
        height: auto;
        background-color: white; }
        #subscription #mainArea .container #contents #benefits .summery .container {
          max-width: 600px;
          margin-top: 10px; }
          #subscription #mainArea .container #contents #benefits .summery .container .col-2 {
            position: relative; }
            #subscription #mainArea .container #contents #benefits .summery .container .col-2 .title {
              position: absolute;
              right: 0;
              margin: 10px 0;
              width: 70px;
              height: 70px;
              line-height: 70px;
              background-color: #DCD3C0;
              border-radius: 50%;
              font-size: 0.9rem;
              font-weight: bold; }
          #subscription #mainArea .container #contents #benefits .summery .container .col-10 {
            margin: 0;
            padding: 0 20px; }
            #subscription #mainArea .container #contents #benefits .summery .container .col-10 .right-dotted-border {
              background-image: -webkit-linear-gradient(top, #000, #000 1px, transparent 1px, transparent 4px);
              background-image: -o-linear-gradient(top, #000, #000 1px, transparent 1px, transparent 4px);
              background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
              background-size: 1px 6px;
              background-position: right;
              background-repeat: repeat-y; }
            #subscription #mainArea .container #contents #benefits .summery .container .col-10 .benefit-name {
              margin: 0; }
      #subscription #mainArea .container #contents #apply-buttons .btn-area-title-box {
        position: relative;
        width: auto;
        height: auto; }
      #subscription #mainArea .container #contents #apply-buttons .btn-area-title {
        position: absolute;
        top: -15px;
        left: 0;
        text-align: center;
        width: 100%;
        font-weight: 700;
        font-size: 1.5rem;
        -webkit-text-stroke: white 8px; }
      #subscription #mainArea .container #contents #apply-buttons .inner-text {
        position: absolute;
        top: -15px;
        left: 0;
        text-align: center;
        width: 100%;
        font-weight: 700;
        font-size: 1.5rem; }
      #subscription #mainArea .container #contents #apply-buttons .btns-box {
        border: solid 2px #A99B7C;
        margin-top: 40px; }
        #subscription #mainArea .container #contents #apply-buttons .btns-box .d-flex {
          max-width: 800px;
          width: auto;
          margin: 10px auto 0;
          padding: 20px; }
          #subscription #mainArea .container #contents #apply-buttons .btns-box .d-flex .subscription-btn {
            border: solid 1px white;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 50%;
            min-width: 200px;
            font-size: 0.9rem;
            color: white; }
            #subscription #mainArea .container #contents #apply-buttons .btns-box .d-flex .subscription-btn .large-text {
              font-size: 1.4rem; }
          #subscription #mainArea .container #contents #apply-buttons .btns-box .d-flex .red-btn {
            background-color: #981D25;
            margin-right: 10px; }
          #subscription #mainArea .container #contents #apply-buttons .btns-box .d-flex .green-btn {
            background-color: #2D9736; }
      #subscription #mainArea .container #contents #apply-buttons #subscription-btns {
        height: 120px;
        background-color: #A99B7C; }
        #subscription #mainArea .container #contents #apply-buttons #subscription-btns .subscription-btn {
          height: 70px;
          padding: 17px 0; }
      #subscription #mainArea .container #contents #apply-buttons #gift-btns {
        height: 90px;
        background-color: white; }
      #subscription #mainArea .container #contents #apply-buttons #overseas-btns {
        height: 90px;
        background-color: white; }
      #subscription #mainArea .container #contents #apply-buttons #dancyu-button {
        border: solid 2px #981D26;
        border-radius: 20px;
        width: 70%;
        height: 40px;
        min-width: 400px;
        margin: 30px auto;
        line-height: 37px; }
      #subscription #mainArea .container #contents #detail-infos {
        font-size: 0.7rem; }
        #subscription #mainArea .container #contents #detail-infos .detail-info-pane {
          border: solid 2px #A99B7C;
          background-color: white;
          height: auto;
          padding-bottom: 10px;
          margin-bottom: 20px; }
          #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-title {
            background-color: #837647;
            text-align: left;
            color: white;
            font-size: 0.8rem;
            padding: 5px 15px; }
          #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body {
            padding: 20px; }
            #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body .detail-info-contents {
              padding-left: 25px;
              text-align: left; }
              #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body .detail-info-contents p {
                font-size: 0.8rem;
                text-align: left;
                margin: 0; }
            #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body .number-mark {
              background-color: #837647;
              color: white;
              font-size: 1.1rem;
              height: 20px;
              line-height: 20px;
              width: 30px;
              border-radius: 10px;
              float: left;
              position: relative;
              top: -2px;
              margin-right: 10px; }
            #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body h5 {
              font-weight: bold;
              font-size: 1.1rem;
              line-height: 1.1rem;
              text-align: left;
              margin-bottom: 15px; }
            #subscription #mainArea .container #contents #detail-infos .detail-info-pane .detail-info-body input {
              border: solid 1px gray;
              color: #555;
              background-color: white;
              border-radius: 3px;
              padding: 7px 15px;
              margin-top: 3px; }
      #subscription #mainArea .container #contents .purchase-card {
        margin: 0 auto 100px;
        text-align: center;
        width: 400px;
        height: auto;
        background: white;
        -webkit-box-shadow: 0 0 8px lightgray;
        box-shadow: 0 0 8px lightgray; }
        #subscription #mainArea .container #contents .purchase-card p {
          font-size: 0.9rem;
          margin: 0; }
        #subscription #mainArea .container #contents .purchase-card select {
          font-size: 0.6rem;
          width: 100%;
          height: 25px;
          background: white; }
        #subscription #mainArea .container #contents .purchase-card a {
          background: #981D26;
          color: white;
          font-size: 0.9rem;
          padding: 8px 90px; }
      #subscription #mainArea .container #contents .yoyakubox {
        border: solid 2px #796a55;
        margin-bottom: 1em;
        padding: 10px;
        text-align: left; }
        #subscription #mainArea .container #contents .yoyakubox .title {
          color:#796a55;
          font-weight: bold;
          font-size: 150%;}
        #subscription #mainArea .container #contents .yoyakubox .newSubTitle{
          color:#c30d23;
          font-weight: bold;
          font-size: 120%;}
        #subscription #mainArea .container #contents .yoyakubox .renewSubTitle{
          color:#23ac38;
          font-weight: bold;
          font-size: 120%;}
        
        #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn {
          padding: 0 !important;
          text-align: center; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn :hover {
            opacity: 0.7; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn h4 {
            font-size: 2.2rem;
            color: white; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .yearTxt {
            font-size: 1.8rem;
            color: white; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn span {
            font-size: 0.9rem;
            color: white; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn p {
            font-size: 1.5rem;
            color: white;
            margin-bottom: 0; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .label {
            margin-top: 15px;
            font-size: 1.2rem; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .btnInner {
            width: 90%;
            margin: 0 auto;
            padding: 10px; }
          @media screen and (max-width:767px) {
            #subscription #mainArea .container #contents .yoyakubox .title {
              color:#796a55;
              font-weight: bold;
              font-size: 110%;}
            #subscription #mainArea .container #contents .yoyakubox .newSubTitle{
              color:#c30d23;
              font-weight: bold;
              font-size: 100%;}
            #subscription #mainArea .container #contents .yoyakubox .renewSubTitle{
              color:#23ac38;
              font-weight: bold;
              font-size: 100%;}
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .btnInner {
              padding: 3px;}
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn h4 {
              font-size: 1.5rem;
              margin-bottom: 0;}
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .yearTxt {
              font-size: 1.2rem;
              color: white; }
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn span {
              font-size: 0.9rem;
              color: white; }
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn p {
              font-size: 1.2rem;
              color: white;
              margin-bottom: 0; }
            #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .label {
              margin-top: 0px;
              font-size: 1rem; }
          }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-1 {
            background: #BC5252; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-2 {
            background: #9DB964; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-3 {
            background: #F39656; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-4 {
            background: #27AE58; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-5 {
            background: #54ACC3; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-6 {
            background: #3C71AD; }
          #subscription #mainArea .container #contents .yoyakubox .yoyakuBtn .color-7 {
              background: #A8617B; }

#gift_howtoOrder .container {
  max-width: 700px; }
  #gift_howtoOrder .container .div-title {
    width: 100%;
    height: auto;
    margin-top: 40px; }
    #gift_howtoOrder .container .div-title .square {
      width: 30px;
      height: 30px;
      background: #B93346;
      display: inline-block; }
    #gift_howtoOrder .container .div-title h4 {
      line-height: 30px;
      margin: 0 10px;
      display: inline-block;
      font-size: 1.1rem;
      font-weight: bold;
      vertical-align: top; }
  #gift_howtoOrder .container .div-body {
    width: 100%; }
    #gift_howtoOrder .container .div-body .font-size-L {
      font-size: 0.9rem; }
    #gift_howtoOrder .container .div-body .font-size-M {
      font-size: 0.8rem; }
    #gift_howtoOrder .container .div-body .font-size-S {
      font-size: 0.7rem; }
    #gift_howtoOrder .container .div-body .row {
      width: 100%; }
      #gift_howtoOrder .container .div-body .row .left-unit {
        height: auto;
        padding: 0 0 0 10px; }
        #gift_howtoOrder .container .div-body .row .left-unit .text-box {
          width: 70%;
          height: 100%;
          float: left; }
          #gift_howtoOrder .container .div-body .row .left-unit .text-box p {
            margin: 0; }
        #gift_howtoOrder .container .div-body .row .left-unit .img-box {
          position: relative;
          width: 29%;
          height: 180px;
          float: right; }
          #gift_howtoOrder .container .div-body .row .left-unit .img-box .qr-code {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 70px;
            height: 70px; }
          #gift_howtoOrder .container .div-body .row .left-unit .img-box .deviceImg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 60px; }
      #gift_howtoOrder .container .div-body .row .right-unit {
        height: auto;
        padding: 0 5px 0 0; }
        #gift_howtoOrder .container .div-body .row .right-unit .img-box {
          text-align: center; }
          #gift_howtoOrder .container .div-body .row .right-unit .img-box img {
            width: 55px;
            height: 75px; }
    #gift_howtoOrder .container .div-body .bullet-point-box .bullet-point {
      font-size: 0.8rem;
      vertical-align: bottom; }
    #gift_howtoOrder .container .div-body .bullet-point-box p {
      margin: 0;
      line-height: 1rem; }
  #gift_howtoOrder .container .border-line {
    width: 100%;
    height: 1px;
    background: #555;
    margin: 10px 0; }
  #gift_howtoOrder .container .p-title {
    margin-left: -6px; }

.carousel-indicators li {
  width: 7px;
  height: 7px;
  border-radius: 50%; }

.carousel-control-prev {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  z-index: 1000; }

.carousel-control-next {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  z-index: 1000; }

.htmlarea-showtableborders img{
margin-right: 10px;
margin-top: 10px;
}
audio{
	margin-top: 20px!important;
display: inline-block!important;
float: left;
}
.audio_cap{
font-size:90%;
	margin-left: 20px;
margin-top: 15px;
display: inline-block!important;
float: left;
}
@media only screen and (max-width: 480px) {
.audio_cap{
	margin-left:0px;
}
}

#member.mypage ul li a {
  font-size: 14px;
}

#ext.guide .guide-item {
  margin-left: 1rem;
}

#ext.guide .guide-item p {
  margin-left: 1rem;
}

#ext.guide .guide-item .sub {
  margin-left: 1rem;
}

#ext.guide .itemlist li {
  font-size: 100%;
}

#ext.guide .itemlist ul {
  padding-bottom: 0px;
}

#ext.guide .itemlist ul li {
  margin-left: 20px;
}

#cartFlow #ext.guide {
  font-size: 0.9rem;
}