/* ---------- custom style's by girasol.inc ---------- */

/**
  style.css ... body
 */
body {
  background-color: #F5F5F5; /*whitesmoke*/
}

/* pc.contents.partial.box style's */

/*
  style.css ... .content-info-box
*/
.content-info-box {
  /*padding: 15px;*/
  padding: 5px;
  overflow: auto;;
}

/*
  style.css ... .content-info-box h3
*/
.content-info-box h3 {
  /*font-size: 0.875rem;*/
  font-size: 1.0em;
  /*margin-bottom: 0.5rem;*/
  margin-bottom: 0.0rem;
}

/*
  style.css ... .content-info-box h3 a
*/
.content-info-box h3 a {
  font-weight: bold;
}

/*
  style.css ... .box-contents-numbers
*/
.box-contents-numbers {
  /*padding: 10px 0 0;*/
  padding: 0;
}
.box-contents-numbers .content-status-box {
  display: inline-block;
}

/*
  style.css ... .content-list-item article
*/
.content-list-item article {
  /*border: 1px solid #cccccc;*/
  border: none;
}

/*
  style.css ... .favorite.active i
*/
.favorite {
  cursor: pointer;
  padding: 0 5px 0 5px!important;
}
.favorite.active i {
  /*color: #e8bb33;*/
  color: #eb3458;
}
.favorite i:hover {
  color: #eb3458;
}

/*
  style.css ... .subtitles
*/
.subtitles {
  padding: 0 5px 0 5px!important;
  font-size: 1.0rem;
}
.subtitles span {
  padding: 0!important;
}

/*
  yellow.css
*/
.favorite:hover {
  /*background: #ffbf00;*/
  background: none;
}
a {
  /*color: #997300;*/
  color: #6B5200;
}
a:visited, a:focus {
  /*color: #997300;*/
  color: #6B5200;
}
a:hover {
  /*color: #ffbf00;*/
  color: #C19400;
}
.btn-theme {
  /*background: #ffbf00;*/
  /*border-color: #ffbf00;*/
  background: #E1AC00;
  border-color: #E1AC00;
}
.box-footer {
  /*border-top-color: #ffbf00;*/
  border-top-color: #E1AC00;
}
#toTopBtn {
  /*border-color: #ffbf00;*/
  border-color: #E1AC00;
}
.btn-theme-complement {
  background: #F5F5F5; /*whitesmoke*/
  border-color: #ced4da;
  color: #6B5200!important;
}
.btn-theme-complement:hover {
  background: #F0F0F0; /*snowwhite*/
  border-color: #ced4da;
  color: #C19400!important;
}
.btn-slick-custom,
.btn-slick-custom:hover {
  border: solid 1px lightgray;
}
.btn-slick-custom {
  background-color: #F5F5F5; /*whitesmoke*/
}
.btn-slick-custom:hover {
  background-color: #F0F0F0; /*snowwhite*/
}
.btn-theme-nobg {
  background: none;
  border: none;
}
.btn-global-nav, .btn-global-nav:visited, .btn-global-nav:focus {
  /*color: #333333;*/
  color: #6B5200!important;
}
.btn-global-nav:hover {
  /*background: #ffbf00;*/
  background: none;
  color: #C19400!important;
}
.dropdown-wrapper:hover .box-dropdown-key {
  /*background: #ffbf00;*/
  background: none;
  color: #C19400!important;
}
.dropdown-wrapper:hover .box-dropdown-key::after {
  /*border-top-color: #ffbf00;*/
  border-top-color: #F0F0F0; /*snowwhite*/
  color: #C19400!important;
}
.link-list a {
  color: #6B5200!important;
}
.link-list a:hover {
  background: #F0F0F0; /*snowwhite*/
  color: #C19400!important;
}
.page-item.active .page-link {
  /*background-color: #ffbf00;*/
  /*border-color: #ffbf00;*/
  background-color: #E1AC00;
  border-color: #E1AC00;
}

/*
  style.css ... .ttl-xs .ttl-sm
*/
.ttl-xs {
  font-size: 1.25rem;
  /*margin-bottom: 1rem;*/
  margin-bottom: 0.0rem;
}
.ttl-sm {
  font-size: 1.5rem;
  /*margin-bottom: 1rem;*/
  margin-bottom: 0.0rem;
}
.ttl-xxs {
  font-size: 1.0rem;
  margin-bottom: 0.0rem;
}

/*
  style.css ... .tile-inner
*/
.tile-inner {
  /*padding: 30px;*/
  /*background: #ffffff;*/
  /*box-shadow: 0px 2px 2px 0px #ccc;*/
  padding: 10px;
  background: #FCFCFC;
  box-shadow: none;
}

/*
  style.css ... .btn-area-center
*/
.btn-area-center {
  margin-top: 0.0rem;
  text-align: center;
}

/*
  style.css ... .box-section + .box-section
*/
.box-section + .box-section {
  /*padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #ccc;*/
  padding-top: 0;
  margin-top: 0;
  border-top: 1px solid #ccc;
}


/* pc.partial.header style's */

/*
  style.css ... .box-header
*/
.box-header {
  width: 100%;
  height: 50px;
  /*position: relative;*/
  position: fixed;
  z-index: 1040;
  /*border-bottom: 1px solid #F0F0F0;*/
  border-bottom: 1px solid #ffffff;
  background-color: #ffffff;
  transition: all .2s ease;
}

/*
  style.css ... .nav-inner
*/
.nav-inner {
  /*padding: 0.5rem 0;*/
  padding: 0;
}

/*
  style.css ... .nav-inner + .nav-inner
*/
.nav-inner + .nav-inner {
  border-top: 1px solid #F0F0F0;
  /*box-shadow: 0px 2px 2px 0px #ccc;*/
  box-shadow: none;
}

/*
  style.css ... .logo-area
*/
.logo-area {
  transition: all .5s ease;
  position: relative;
  /*padding-top: 50px;*/
  padding-top: 0;
}

/*
  style.css ... .logo-area a
*/
.logo-area a {
  display: block;
  /*position: absolute;*/
  position: relative;
  top: 0;
  left: 0;
  width: fit-content;
  width: -moz-fit-content;
  height: 100%;
}
/*
  style.css ... .logo-area a img
*/
.logo-area a img {
  max-width: 100%;
  /*max-width: 100%;*/
  height: 50px;
}

/*
  bootstrap.css ... .container
*/
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/*
  girasol original style ( bootstrap.css の girasol独自拡張 )
*/
.container-complement {
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
}

/*
  bootstrap.css ... .row
*/
.row {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  /*margin-right: -15px;*/
  /*margin-left: -15px;*/
  /*margin-right: 0;*/
  /*margin-left: 0;*/
}

/*
  bootstrap.css ... .col-1...
*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  /*padding-right: 0;*/
  /*padding-left: 0;*/
  /*padding-right: 10px;*/
  /*padding-left: 10px;*/
}

/**
  style.css ... .content-list-item
 */
.content-list-item {
  /*margin: 1rem 0;*/
  margin: 0.5rem 0;
  padding: 0 5px;
}

/**
  style.css ... .box-main
 */
.box-main {
  /*margin-top: 50px;*/
  /*margin-left: 240px;*/
  /*margin-bottom: 20px;*/
}

/*
  style.css ... .box-header.scroll .logo-area
*/
.box-header.scroll .logo-area {
  /*padding-top: 25px;*/
  padding-top: 50px;
}

/*
  style.css ... .box-header.scroll > .container
*/
.box-header.scroll > .container {
  padding-top: 5px;
  padding-bottom: 5px;
}

/*
  girasol original style
*/
.box-menu {
  position: fixed;
  left: 240px;
  top: 50px;
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  border-right: 1px solid #F0F0F0;
  background-color: #ffffff;
  z-index: 1041;
}
.box-menu div {
  width: 50px;
  height: 50px;
  padding: 10px;
}

/*
  girasol original style
*/
.box-tags {
  position: fixed;
  left: 0;
  top: 50px;
  padding-left: 290px;
  width: 100%;
  width: -webkit-fill-available;
  width: -moz-available;
  text-align: center;
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  background-color: #ffffff;
  z-index: 1039;
  /*visibility: hidden;*/
}
.box-tags .left-button,
.box-tags .right-button {
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  /*position: absolute;*/
}
.tag-list {
  padding: 0;
  margin: 0 30px;
  /*display: flex;*/
  /*display: inline-block;*/
  max-height: 51px;
  white-space: nowrap;
  overflow-x: hidden;
  /*scrollbar-width: thin;*/
  /*scrollbar-color: gray #F5F5F5;*/
}
.tag-list > li {
  display: inline-block;
  text-align: center;
  margin: 2px 0;
}

/*
  girasol original style
*/
.tag-label,
.tag-label:hover {
  border: solid 1px lightgray;
  border-radius: 17px;
  margin: 8px 2px;
  padding: 2px 10px;
  cursor: pointer;
}
.tag-label {
  background-color: #F5F5F5; /*whitesmoke*/
}
.tag-label:hover {
  background-color: #F0F0F0; /*snowwhite*/
}
.box-tags-left-button,
.box-tags-right-button {
  position: fixed;
  top: 50px;
  text-align: center;
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  background-color: #ffffff;
  z-index: 1040;
  /*visibility: hidden;*/
}
.box-tags-left-button {
  left: 0;
  padding-left: 290px;
  background: linear-gradient(to right, #ffffff 80%, transparent);
}
.box-tags-right-button {
  right: 0;
  background: linear-gradient(to left, #ffffff 80%, transparent);
}
.box-tags-left-button div,
.box-tags-right-button div {
  width: 40px;
  height: 50px;
  display: flex;
}
.box-tags-left-button div a,
.box-tags-right-button div a {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*
  girasol original style
*/
.guide-wrapper {
  /*margin-top: 100px;*/
  border-bottom: solid 1px #F0F0F0;
}
.guide-title {
  padding: 5px 10px;
}
.box-guide {
  position: fixed;
  left: 0;
  top: 50px;
  /*width: 240px;*/
  max-width: 240px;
  background-color: #ffffff;
  bottom: 0;
  z-index: 1041;
  overflow-y: hidden;
  /*visibility: hidden;*/
  scrollbar-width: thin;
  scrollbar-color: gray #F5F5F5; /*whitesmoke*/
}
.box-guide:hover {
  overflow-y: auto;
}
.box-guide::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
.box-guide::-webkit-scrollbar-track{
  background-color: #F5F5F5; /*whitesmoke*/
}
.box-guide::-webkit-scrollbar-thumb{
  background-color: gray;
}
.box-guide ul {
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
.guide-li,
.guide-li-ca {
  cursor: pointer;
}
.guide-li-ca {
  padding-top: 10px;
  padding-bottom: 10px;
}
.guide-li:hover,
.guide-li-ca:hover {
  background-color: #F0F0F0; /*snowwhite*/
}
.guide-li-ca-sub:hover {
  background-color: #E0E0E0; /*lightgray*/
}
.guide-li a div {
  padding: 7px 20px;
}
.guide-li a,
.guide-li a:hover,
.guide-li-ca a,
.guide-li-ca a:hover {
  display: block;
  text-decoration: none;
}
.guide-li a,
.guide-li a:hover {
  font-size: 14px;
}
.guide-li-ca a,
.guide-li-ca a:hover {
  font-size: 14px;
}
.guide-li-ca-sub a,
.guide-li-ca-sub a:hover {
  font-size: 12px;
}
.guide-li span,
.guide-li-ca span {
  vertical-align: text-bottom;
}
.guide-i {
  margin-right: 10px;
  font-size: 24px;
}
.guide-i-ca {
  margin-right: 5px;
  font-size: 20px;
}
.guide-li-ca div {
  padding: 0 10px;
}
.guide-li-ca-sub div {
  padding: 0 15px;
}
.guide-li-ca > a > div > span {
  font-weight: bold;
}
.guide-footer {
  max-width: 240px;
}
.guide-footer .notice span {
  font-size: 12px;
  color: #696969; /*dimgray*/
}
.guide-footer .notice {
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.guide-footer .legal {
  padding-left: 15px;
  padding-right: 15px;
}
.guide-footer .legal a {
  font-size: 12px;
}
.guide-footer .spqr {
  padding-left: 15px;
  padding-right: 15px;
}
.spqr .box {
  width: fit-content;
  padding: 2px;
  border: 1px solid lightgray;
  border-radius: 4px;
}
.spqr .box span {
  font-size: 12px;
}
.guide-footer .copyright {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
}
.guide-footer .copyright span {
  font-size: 12px;
  color: gray;
}


/* pc.layouts.app / pc.layouts.single style's */

/*
  girasol original style
*/
.box-wrapper {
  /*position: absolute;*/
  /*top: 100px;*/
  /*left: 240px;*/
  padding-top: 100px;
  padding-left: 240px;
}

/*
  girasol original style
*/
.box-wrapper-complement {
  padding-top: 70px;
}

/*
  style.css ... .box-breadCrumb
*/
.box-breadCrumb {
  /*padding: 8px 0;*/
  padding: 0;
}

/*
  style.css ... .list-breadCrumb
*/
.list-breadCrumb {
  margin-bottom: 0;
  list-style: none;
  /*padding: 0;*/
  padding: 2px;
  font-size: 0.875rem;
}


/* responsive style's */
/* 1199以下 */
@media (max-width: 1199px) {
  .related-video { display: inherit!important; }
}
/* 992以下 */
@media (max-width: 992px) {
  .box-guide { left: -240px; }
  .box-menu { left: 0; }
  .box-tags-left-button { padding-left: 50px; }
  .box-tags { padding-left: 50px; }
  .box-wrapper { padding-left: 0; }
  .related-video { display: inherit!important; }
}
/* 767以下 */
@media (max-width: 767px) {
  .box-sort .btn {
    font-size: 0.75rem;
    /*width: 50%;*/
    width: auto;
    border: none;
  }
  .my-account-box {
    /*display: none;*/
  }
  .related-video {
    display: flex!important;
  }
  .related-video-width-limit {
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
}
/* 768以上 */
@media (min-width: 768px) {

}
.box-header .justify-content-sb {
  justify-content: space-between;
}
/* 993以上 */
@media (min-width: 993px) {
  .box-guide { left: 0; }
  .box-menu { left: 240px; }
  .box-tags-left-button { padding-left: 290px; }
  .box-tags { padding-left: 290px; }
  .box-wrapper { padding-left: 240px; }
}
/* 1200以上 */
@media (min-width: 1200px) {
  .col-xl-2 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .video-width-limit {
    max-width: 1200px;
  }
  .related-video {
    display: flex;
  }
}
/* 1888以上 */
@media (min-width: 1888px) {
  .col-xl-2 {
    -webkit-box-flex: 0;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row {
    justify-content: center;
  }
  .related-video-width-limit {
    max-width: 400px;
  }
}
/* 2272以上 */
@media (min-width: 2272px) {
  .col-xl-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
}

/* parts style's */

/*
  style.css ... .pagination
*/
.pagination {
  /*margin: 1rem 0;*/
  margin: 0.2rem 0;
}

/*
  style.css ... .box-content
*/
.box-content {
  /*margin-bottom: 30px;*/
  margin-bottom: 25px;
}

/*
  style.css ... .js-list-slide
*/
.js-list-slide {
  /*margin: 10px 0;*/
  margin: 5px 0;
}

/*
  style.css ... .btn-area-center .btn, .btn-area-right .btn
*/
.btn-area-center .btn, .btn-area-right .btn {
  display: inline-block;
  /*margin: 10px;*/
  margin: 5px;
}

/*
  style.css ... .box-sort
*/
.box-sort {
  /*padding: 15px 0;*/
  padding: 0;
  text-align: center;
  letter-spacing: -.4em;
}
.box-sort .btn[class*="active"] {
  background: none;
  color: #6B5200;
}
.box-sort .btn, .box-sort .btn:visited, .box-sort .btn:focus {
  color: #6B5200;
}
.box-sort .btn:hover {
  background: none;
  color: #C19400;
}

/*
  style.css ... .category-info-area
*/
.category-info-area {
  padding-top: 2px;
}

/*
  girasol original style
*/
.description p {
  margin-top: 0.5rem;
}

/*
  style.css ... .box-related-content
*/
.box-related-content h2 {
  font-size: 1.0rem;
}
.box-related-content .content-list {
  padding: 0;
}

/*
  girasol original style
*/
.related-video-width-limit {
  padding-left: 0;
  padding-right: 0;
}


/*
  style.css ... .news-info
*/
.news-info a {
  margin-left: 0.5rem;
}

/*
  style.css ... .content-thumbnail
*/
.content-thumbnail {
  border: 1px solid #F0F0F0; /*snowwhite*/
}