@charset "UTF-8";
/* # =================================================================
   # general
   # ================================================================= */
html {
  font-size: 16px;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body thead th {
  font-family: 'Noto Sans JP', sans-serif;
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

ul.inline-list {
  margin: 0;
}
ul.inline-list li {
  display: block;
  margin: 2px 8px;
}
ul.inline-list li:before {
  content: "・";
}
ul.inline-list li a {
  color: #000;
}

.ofi {
  object-fit: cover;
  /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 50%;
  /* 他のブラウザ用(＝通常の指定) */
  font-family: "object-fit: cover; object-position: 50% 50%;";
}

/* # =================================================================
   # bootstrap3 containerを拡張
   # ================================================================= */
@media (min-width: 1320px) {
  .container {
    width: 1280px;
  }
}
/* # =================================================================
   # form
   # ================================================================= */
form.search {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

input[type=search] {
  border: 1px solid #999;
  padding: 4px 8px;
  width: calc(100% - 64px);
}

input[type=submit] {
  background-color: #aaa;
  border: 1px solid #999;
  color: #fff;
  padding: 4px 8px;
  width: 60px;
}

input[type=text] {
  border: 1px solid #999;
  padding: 8px 4px;
  max-width: 100%;
}

textarea {
  width: 100%;
  border: 1px solid #999;
  height: 300px;
}

/* # =================================================================
   # #header
   # ================================================================= */
#header {
  position: relative;
}
#header .site-info {
  background-color: #333;
  margin: 0 -15px;
}
#header .site-info div {
  color: #fff;
  font-size: 0.8rem;
}
#header .container {
  position: relative;
}
#header .container .inner {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}
#header .container .inner .logo {
  margin: 0;
}
#header .container .inner > div {
  display: flex;
  align-items: flex-end;
}
#header .container .inner > div .shere-buttons {
  padding: 0 8px;
}
#header .container .inner > div .shere-buttons img {
  margin: 0 8px 3px 0;
}
#header .container .inner > div .tel {
  display: flex;
  align-items: flex-end;
}
#header .container .inner > div .tel a {
  display: flex;
  align-items: flex-end;
}
#header .container .inner > div .tel i {
  font-size: 2.4rem;
  color: #458cda;
  margin-right: 8px;
}

/* # =================================================================
   # #footer
   # ================================================================= */
#footer {
  margin-top: 48px;
  background: #333;
  color: #fff;
}
#footer .inner {
  display: flex;
  align-items: center;
  padding: 32px 0;
  flex-wrap: wrap;
}
#footer .inner > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#footer .inner .footer-left {
  width: 50%;
}
#footer .inner .footer-left img {
  margin: 8px;
}
#footer .inner .footer-left p {
  padding: 0 16px;
  line-height: 1.8;
}
#footer .inner .footer-right {
  width: 50%;
  border-left: 1px solid #fff;
}
#footer .inner .footer-right .footer-link ul li {
  margin-bottom: 8px;
}
#footer .inner .footer-right .footer-link ul li a {
  color: #fff;
  font-size: 0.8rem;
}
#footer .inner .footer-right .footer-link ul li a:before {
  content: "\f04b";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7rem;
  margin-right: 8px;
}
#footer .copyright {
  margin: 0 -15px;
  background-color: #fff;
  color: #000;
  text-align: center;
  font-size: 0.8rem;
}
#footer .copyright p {
  margin: 0;
  padding: 8px 0;
}

/* # =================================================================
   # content
   # ================================================================= */
#content .page-header {
  border-bottom: 1px solid #999;
  padding: 0;
  margin: 0 0 48px 0;
}
#content .page-header h2 {
  font-size: 1.6rem;
  border: none;
}
#content h2 {
  font-size: 1.2rem;
  border-bottom: 1px solid #999;
  padding-bottom: 6px;
  font-weight: 700;
  text-align: center;
}

/* # =================================================================
   # main
   # ================================================================= */
#main {
  padding-top: 16px;
}

/* # =================================================================
   # sidebar
   # ================================================================= */
#side {
  padding-top: 16px;
}
#side .side-widget {
  margin-bottom: 16px;
}
#side .side-widget h3 {
  font-size: 1.1rem;
}
#side .side-widget-text {
  border: 5px solid #ddd;
  padding: 24px;
}
#side .side-widget-text .side-more {
  text-align: right;
  margin-top: 8px;
}
#side .side-widget-text h3 {
  margin-top: 0;
  padding-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #999;
}
#side .side-widget-image {
  border: 1px solid #666;
}
#side .side-widget-image img {
  width: 100%;
}

/* # =================================================================
   # swiper
   # ================================================================= */
.swiper-container {
  margin-bottom: 32px;
}
.swiper-container .swiper-slide img {
  max-width: 100%;
  height: auto;
}

.swiper-pagination-bullet {
  width: 16px !important;
  height: 16px !important;
}

.swiper-pagination-bullet-active {
  background: #f00 !important;
}

/* # =================================================================
   # image-block
   # ================================================================= */
.image-block .main-image-view {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 0 5px;
}
.image-block .main-image-view:before {
  content: "";
  display: block;
  padding-top: 72.727272%;
}
.image-block .main-image-view > div {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.2s ease-out;
  background-color: #eee;
}
.image-block .main-image-view > div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-block .main-image-view > div.selected {
  opacity: 1;
}
.image-block .select-thumbnail {
  padding: 0 9px;
  padding-right: 15px;
}
.image-block .select-thumbnail > div {
  padding-left: 6px;
  padding-right: 0px;
  margin-top: 6px;
  margin-bottom: 6px;
  opacity: 0.7;
  transition: all 0.2s ease-out;
}
.image-block .select-thumbnail > div:before {
  content: "";
  display: block;
  padding-top: 72.727272%;
}
.image-block .select-thumbnail > div .thumbnail-wrap {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 100%;
  width: calc(100% - 8px);
}
.image-block .select-thumbnail > div .thumbnail-wrap img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.image-block .select-thumbnail > div.selected {
  opacity: 1;
}

/* # =================================================================
   # dl-pdf
   # ================================================================= */
.dl-pdf a {
  width: 100%;
  background: #333;
  color: #fff;
  display: block;
  text-align: center;
  padding: 16px 0;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* # =================================================================
   # detail-table price-table spec-table
   # ================================================================= */
table.detail-table {
  width: 100%;
}
table.detail-table th {
  text-align: center;
  background: #eef5fa;
  border: 1px solid #666;
  padding: 8px 16px;
  width: 40%;
}
table.detail-table td {
  border: 1px solid #666;
  padding: 8px 16px;
}

table.price-table {
  margin-bottom: 24px;
}
table.price-table td {
  text-align: right;
  position: relative;
}
table.price-table td:before {
  content: "￥";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

table.spec-table td {
  text-align: center;
}

/* # =================================================================
   # privacy
   # ================================================================= */
.privacy h3 {
  background-color: #999;
  color: #fff;
  font-size: 1.1rem;
  padding: 6px 32px;
  margin: 2.4rem 0 1.6rem;
  font-weight: 700;
}
.privacy p {
  line-height: 1.8;
  padding: 0 24px;
}

/* # =================================================================
   # chart
   # ================================================================= */
.chart {
  border: 1px solid #ccc;
  margin-top: 32px;
}
.chart .chart-nav {
  display: flex;
  margin: 0;
}
.chart .chart-nav li.nav-head {
  color: #000;
  background: #fff;
  padding: 8px;
  border: none;
}
.chart .chart-nav li {
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #999;
  border-left: 1px solid #666;
}
.chart .chart-nav li a {
  color: #fff;
  padding: 8px;
  width: 100%;
  display: block;
  font-size: 0.8rem;
}
.chart .chart-nav li a:before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7rem;
  margin-right: 8px;
}
.chart .chart-nav li.selected a {
  background: #333;
}
.chart .chart-draw-area {
  position: relative;
}
.chart .chart-draw-area > div {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: 0;
  transition: all 0.2s ease-out;
  display: none;
}
.chart .chart-draw-area > div.selected {
  opacity: 1;
  visibility: 1;
  display: block;
}

/* # =================================================================
   # pagination
   # ================================================================= */
.pagination {
  text-align: center;
}
.pagination li {
  margin: 4px;
  display: inline-block;
}

/* # =================================================================
   # section-news
   # ================================================================= */
.section-news {
  margin-bottom: 48px;
}
.section-news ul {
  padding-top: 8px;
}
.section-news ul li {
  border-bottom: 1px solid #ccc;
  margin-top: 8px;
}
.section-news ul li p.date {
  margin-bottom: 4px;
  color: #999;
}

/* # =================================================================
   # section-ranking
   # ================================================================= */
.section-ranking {
  padding-top: 8px;
}
.section-ranking .columns-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
}
.section-ranking .columns-wrapper .column {
  margin-bottom: 8px;
  display: inline-block;
}
.section-ranking .columns-wrapper .column table {
  border: 1px solid #ccc;
  width: 100%;
}
.section-ranking .columns-wrapper .column table thead th {
  text-align: center;
  font-size: 1.2rem;
  padding: 1.8rem 0;
  color: #fff;
  font-weight: 500;
}
.section-ranking .columns-wrapper .column table tbody th {
  border: 1px solid #ccc;
  padding: 0.6rem;
  font-size: 0.7rem;
}
.section-ranking .columns-wrapper .column table tbody td {
  border: 1px solid #ccc;
  padding: 0.6rem;
  font-size: 0.7rem;
  width: 70px;
}
.section-ranking .columns-wrapper .column .more-button a {
  text-align: center;
  display: block;
  width: 90%;
  margin: 16px auto;
  padding: 8px 0;
  border-radius: 4px;
  color: #fff;
}
.section-ranking .columns-wrapper .column:nth-child(3n-2) thead {
  background-color: #33cc99;
}
.section-ranking .columns-wrapper .column:nth-child(3n-2) .more-button a {
  background-color: #33cc99;
}
.section-ranking .columns-wrapper .column:nth-child(3n-1) thead {
  background-color: #44b9b9;
}
.section-ranking .columns-wrapper .column:nth-child(3n-1) .more-button a {
  background-color: #44b9b9;
}
.section-ranking .columns-wrapper .column:nth-child(3n) thead {
  background-color: #458cda;
}
.section-ranking .columns-wrapper .column:nth-child(3n) .more-button a {
  background-color: #458cda;
}

/* # =================================================================
   # genre-list
   # ================================================================= */
.genre-list .item-wrap {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.genre-list .item-wrap .item-image-wrap {
  margin-right: 16px;
  width: 121px;
  height: 88px;
  overflow: hidden;
}
.genre-list .item-wrap .item-image-wrap img {
  object-fit: cover;
  width: 121px;
  height: 88px;
}
.genre-list .item-wrap p {
  font-size: 1rem;
  font-weight: 700;
  padding: 8px;
}

.item-wrap h3 {
  font-size: 1.1rem;
  color: #000;
  margin: 0;
  font-weight: 700;
  line-height: 1.6;
}

/* # =================================================================
   # inquiry
   # ================================================================= */
.inquiry table {
  width: 100%;
}
.inquiry table th {
  background: #eef5fa;
  border: 1px solid #666;
  padding: 16px 32px;
}
.inquiry table td {
  border: 1px solid #666;
  padding: 8px 16px;
}
.inquiry .submit {
  text-align: center;
  margin: 24px;
}
.inquiry .submit input[type=submit] {
  display: inline-block;
  width: 300px;
  max-width: 60%;
  padding: 8px;
  background: #458cda;
  text-align: center;
}

@media screen and (max-width: 991px) {
  .inquiry table {
    border-bottom: 1px solid #666;
  }
  .inquiry table th {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .inquiry table td {
    display: block;
    width: 100%;
    border-bottom: none;
    border-top: none;
  }
}
/* # =================================================================
   # about
   # ================================================================= */
.about table {
  width: 100%;
}
.about table th {
  text-align: center;
  background: #eef5fa;
  border: 1px solid #666;
  padding: 16px 32px;
}
.about table td {
  border: 1px solid #666;
  padding: 16px 32px;
}

/* # =================================================================
   # ranking-list
   # ================================================================= */
.ranking-list .item-wrap {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.ranking-list .item-wrap .item-image-wrap {
  margin-right: 16px;
  width: 121px;
  height: 88px;
  overflow: hidden;
}
.ranking-list .item-wrap .item-image-wrap img {
  object-fit: cover;
  width: 121px;
  height: 88px;
}
.ranking-list .item-wrap .item-text-wrap {
  position: relative;
  width: 100%;
}
.ranking-list .item-wrap .item-text-wrap p.item-name {
  font-size: 1.1rem;
  font-weight: 700;
}
.ranking-list .item-wrap .item-text-wrap span.item-info {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px;
  color: #fff;
  background-color: #1b95e0;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* # =================================================================
   # gnav
   # ================================================================= */
#header #gnav {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: all 0.2s ease-out;
}
#header #gnav #menu-close {
  position: relative;
  display: block;
  text-align: right;
  color: #fff;
  font-size: 3rem;
  margin: 16px 32px;
}
#header #gnav .inner {
  color: #fff;
  margin: 0;
}
#header #gnav .inner ul {
  margin: 0 16px;
}
#header #gnav .inner ul li {
  display: block;
}
#header #gnav .inner ul li a {
  font-size: 1.2rem;
  color: #fff;
  padding: 16px;
  width: 100%;
  border-bottom: 1px solid #fff;
  display: block;
  position: relative;
}
#header #gnav .inner ul li a:after {
  content: "＞";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#header #gnav.active {
  visibility: 1;
  opacity: 1;
  height: 100vh;
}

/* # =================================================================
   # @media
   # ================================================================= */
@media screen and (min-width: 991px) {
  .pc-hide {
    display: none;
  }
}
/* col-md- 1199px以下 */
/* col-sm- 991px 以下 */
@media screen and (max-width: 991px) {
  .sp-hide {
    display: none;
  }

  #header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
  }
  #header .inner {
    margin: 0 -15px;
  }

  input[type=text] {
    width: 100%;
  }
}
/* col-xs- 767px 以下 */
@media screen and (max-width: 767px) {
  #footer .inner .footer-left {
    width: 100%;
  }
  #footer .inner .footer-right {
    width: 100%;
    border-left: none;
    border-top: 1px solid #fff;
  }
  #footer .inner .footer-right .footer-link ul {
    margin-top: 16px;
  }
  #footer .inner .footer-right .footer-link ul li {
    display: inline-block;
    margin: 8px 16px;
  }
}

/*# sourceMappingURL=style.css.map */