@charset "UTF-8";
/*
Theme Name: bluestract
Version: 1.0
Description: bluestract用のオリジナルテーマ
Author: Miki Kohinata
License: GNU General Public License v2 or later（phpファイルに限る）
License URI: LICENSE.txt
*/


/* =======================================================
* common
* ======================================================= */
body {
  font-family: 'Open Sans', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  font-size: .875em;
  line-height: normal;
  color: #333;
  letter-spacing: .5px;
}
@media screen and (min-width: 680px){
  .pc { display:inline; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){
  .pc { display:none; }
  .sp { display:inline; }
}
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
#footer {
  background-color: #fff;
  max-width: 1300px;
  width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}
.page #footer {
  background-color: #fff;
  max-width: 96px;
  width: 96px;
  margin: 0 auto;
  box-sizing: border-box;
}
#footer .footer_logo {
  width: 109px;
  margin: 0 8.10% 20px;
}
.page #footer .footer_logo {
  width: 96px;
  margin: 0 0 10px;
  position: relative;
}
.page #footer .footer_logo::after {
  width: 96px;
  height: 20px;
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
img {
	max-width: 100%;
	height: auto;
}
a {
  outline: none;
	color: #666;
	text-decoration: none;
}
a:focus, *:focus {
   outline:none;
}
a img {
    box-shadow: none;
}
.pagination_wrapper {
  display: none;
}
.cf.opt-tag {
  display: none;
}
.opt-tag li.recommend {
  display: none;
}
.entry-content p, .item-description p {
  line-height: 180%;
}
.entry-content th, .item-description th, .entry-content td, .item-description td, .item-info .itemGpExp, .item-info .itemGpExp dt, .item-info .itemGpExp dd, #respond .form-submit, #wc_reviews .comment-form, #cart_table, #cart_table th, #cart_table td, #cart_table .quantity input, .customer_form, .customer_form th, .customer_form td, #wc_delivery .customer_form, #delivery_flag th, #cart #point_table, #cart #point_table td, #cart #coupon_table, #cart #coupon_table td, #confirm_table, #confirm_table th, #confirm_table td, #memberinfo table, #memberinfo tr:first-child th:first-child, #memberinfo th, #memberinfo td, #memberinfo #history_head th, #memberinfo #history_head td, #memberinfo .retail th, #memberinfo .retail td, #memberinfo .customer_form, #memberinfo .customer_form th, #memberinfo .customer_form td, #memberinfo .customer_form tr:first-child th:first-child, #loginform table, #loginform th, #loginform td, #wc_login .loginbox input.loginmail, #wc_login .loginbox, input.loginpass, #wc_member .loginbox input.loginmail, #wc_member .loginbox input.loginpass, .item-description .inner, .item-info .skuform, .item-info form .skuform:first-child, .tab-list, .tab-list li::after, .tab-box, #searchbox fieldset, .customer_form tr, .customer_form tr:first-child, .comment-area, .comment-area li, .comment-area li:last-child {
    border-color: #eee !important;
}
.item-info .skubutton {
  border-radius: 6px;
  width: 115px;
  height: 45px;
  padding: 0;
  line-height: 1;
}
.item-info .skubutton,
.incart-btn .total-quant,
#memberinfo table.retail .redownload_link a {
  font-family: 'Open Sans', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  background-color: #2c4197 !important;
}

.item-info .skubutton:hover,
#memberinfo table.retail .redownload_link a:hover {
  opacity: 0.8;
}
#img-box .itemimg:before {
  position: relative;
}
.maxbutton {
  cursor: pointer;
position: relative;
text-decoration: none;
display: inline-block;
vertical-align: middle;
border-color: #505ac7;
width: 115px;
height: 45px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-width: 2px;
background-color: rgba(44, 65, 151, 1);
box-shadow: none;
color: #fff;
font-weight: bold;
}
.bs_btn .maxbutton-1.maxbutton.maxbutton-cd .mb-text {
  white-space: nowrap;
}
.maxbutton .mb-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
}
.maxbutton.nolink {
  /*pointer-events: none;*/
  /*opacity: 0.8;*/
  cursor: pointer;
}
@media screen and (max-width:768px) {
  #footer .footer_logo {
    width: 85px;
  }
  .item-info .skubutton {
    height: 40px;
    font-size: 0.75rem;
  }

}
@media screen and (max-width:430px) {
  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  #footer .footer_logo {
    width: 85px;
    margin: 0.8rem auto;
  }
  .skuform .right {
    /*width: 100% !important;*/
  }
  .skuform .right .cart-button .skubutton {
    max-width: 130px !important;
  }
  .item-info .skubutton {
    width: 80px;
    height: 35px;
    font-size: 0.65rem;
  }
  .page #footer {
    max-width: 100%;
    width: 100%;
  }
  .page #footer .footer_logo {
    width: 86px;
    margin: 19px auto 0;
    position: relative;
  }
}
/* =======================================================
* Top
* ======================================================= */
.slick-item {
	display: flex;
  flex-wrap: wrap;
  padding: 0 0.5em;
}
.home #main {
  width: auto;
  margin: 0;
  padding: 0;
}
.home #main #primary {
  width: 1300px;
  /*max-width: 1400px;*/
  max-width: 1300px;
  margin: 0 auto;
  padding-bottom: 0;
}
.home #main.two-column #content {
  width: auto;
  float: none;
  margin: 8.10% 8.10% 20px;
}
.home #content .front-il.entries {
  margin-bottom: 0;
}
.home #content .front-il .slick-initialized .slick-slide {
  display: flex;
  flex-wrap: wrap;
}
.home #content .front-il .list-wrap {
  overflow: hidden;
  margin-bottom: 40px;
}
.home #content .front-il .list-wrap .main-visual {
  float: left;
  width: 45.591%;
  margin-right: 8.632%;
  padding: 0;
  clear: inherit;
}
.home #content .front-il .list-wrap .slick-area {
  width: 45.777%;
  float: right;
}
.home #content .front-il .list-wrap .slick-area .slick-list {
  padding: 0 !important;
}
.home #content .front-il .list-wrap article {
  float: left;
  /*width: 16.1432%;*/
  /*width: 14.695%;*/
  width: 42.5%;
  /*margin-right: 6.557%;*/
  margin-right: 10%;
  margin-top: 0;
  /*margin-bottom: 1%;*/
  margin-bottom: 0;
  padding: 0;
  clear: inherit;
}
.home #content .front-il .list-wrap article:nth-child(3) {
  /*margin-right: 0;*/
  margin-top: 0;
}
.home #content .front-il .list-wrap article:nth-child(5) {
  margin-right: 0;
  margin-top: 0;
}
.home #content .front-il .list-wrap article:nth-child(2) {
  margin-right: 8.632%;
}
.home #content .front-il .list-wrap article:nth-child(2n) {
  margin-right: 0;
}

.home #content .front-il .itemname,
.home #content .front-il .list-wrap article .item-info .catname {
  margin-bottom: 0;
  /*height: 5rem;*/
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: left;
  max-height: none;
  overflow: visible;
}
.home #content .front-il .itemname small {
  font-size: 8px;
}
.home #content .front-il .itemname a,
.home #content .front-il .catname span {
  /*padding-top: 0.5rem;
  padding-bottom: 40px;*/
  padding-top: 0.6rem;
  padding-bottom: calc(36px + 0.8rem);
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 0.08em;
}
.home #content .front-il .list-wrap .itemimg{
  overflow: visible;
  margin-bottom: 0;
}
.home #content .front-il .list-wrap article .item-info .itemimg {
  display: block;
  width: 100%;
  position: relative;
  font-size: 0;
}
.home #content .front-il .list-wrap article .item-info .itemimg a {
  /*transform-origin: 50% 50%;
  transition: transform 500ms cubic-bezier(0.785,0.135,0.15,0.86);
  height: auto !important;
  width: 100%;
  height: 100%;
  z-index: 10;*/
}
/*
.home #content .front-il .list-wrap article .item-info .itemimg a::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #009bdb;
  transform: scale(0, 1);
  width: 100%;
}
.home #content .front-il .list-wrap article .item-info .itemimg a:hover{
 animation: hover .6s forwards;
}
.home #content .front-il .list-wrap article .item-info .itemimg a:hover::before{
  animation: hover-in .3s forwards alternate, hover-out .3s .3s forwards alternate;
}


@keyframes hover {
  0%, 100% {
    color: #333;
  }
  50% {
    color: #fff;
  }
}
@keyframes hover-in {
  0% {
    transform-origin: left top;
    transform: scale(0, 1);
  }
  100% {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}
@keyframes hover-out {
  0% {
    transform-origin: right top;
    transform: scale(1, 1);
  }
  100% {
    transform-origin: right top;
    transform: scale(0, 1);
  }
}

.home #content .front-il .list-wrap article .item-info .itemimg a:hover img{
 opacity: .2;
}

*/


.home #content .front-il .list-wrap article .item-info:hover .itemname a{
  color: #009bdb;
}
@media screen and (max-width:768px) {

  .home #content .front-il .itemname,
  .home #content .front-il .list-wrap article .item-info .catname {
    font-size: 0.6rem;
    line-height: 1.5;
  }
  .home #content .front-il .itemname a, .home #content .front-il .catname span {
    line-height: 1.2;
    padding-top: 0.5rem;
  }
  #content .maxbutton {
    height: 40px;
    max-width: 130px;
    margin-bottom: 0.5rem;
  }
  #content .maxbutton .mb-text {
    font-size: 0.75rem;
    line-height: 1.1;
  }
  .home #content .front-il .list-wrap article {
    width: 46%;
    margin-right: 8%;
  }
}
@media screen and (max-width:430px) {
  .home #main #primary {
    width: auto;
  }
  .home #content .front-il .list-wrap {
    overflow: hidden;
    margin-bottom: 0;
  }
  .home #main.two-column #content {
    /*margin: 12% 12% 0%;*/
    /*margin: 15% 15% 0%;*/
    margin: 0;
  }
  .home #content .front-il .list-wrap {
    /*margin: 0 15%;*/
    margin: 0 22% 25%;
  }
  .home #content .front-il .list-wrap .main-visual {
    /*float: none;
    width: 100%;*/
    float: none;
    width: auto;
    position: fixed;
    z-index: 1;
    left: 0;
    /*padding: 15%;*/
    /*padding: 12% 22%;*/
    padding: 8.5% 22%;
    margin: 0;
    background-color: #fff;
  }
  .home #content .front-il .list-wrap .post {
    margin-right: 12.334%;
    width: 43.833%;
  }
  .home #content .front-il .list-wrap .post:nth-child(2),
  .home #content .front-il .list-wrap .post:nth-child(3)
   {
    /*margin-top: 15.785%;*/
    /*margin-top: 100vw;*/
    /*argin-top: calc(100vw - 35%);*/
    /*margin-top: calc(100vw - 48%);*/
  }
  .home #content .front-il .list-wrap .post:nth-child(5n+2) {
    margin-right: 12.334%;
  }
  .home #content .front-il .list-wrap .post:nth-child(2) {
    /*margin-right: 12.334%;*/
  }

  .home #content .front-il .list-wrap .post:nth-child(4) {
    margin-right: 12.334%;
  }
  .home #content .front-il .list-wrap .post:nth-child(7) {
    margin-right: 12.334%;
  }
  .home #content .front-il .list-wrap .post:nth-child(even) {
    margin-right: 0;
  }
  .home #content .front-il .itemname,
  .home #content .front-il .list-wrap .post .item-info .catname {
    font-size: 0.65rem;
    line-height: 1.7;
    /*height: 3.5rem;*/
    height: 2.8rem;
  }
  .home #content .front-il .itemname,
  .home #content .front-il .list-wrap article .item-info .catname {
    height: 65px !important;
  }
  .home #content .front-il .itemname a,
  .home #content .front-il .catname span {
    padding-top: 0.5rem;
    line-height: 1.3;
    padding-top: 0.7rem;
  }
  #content .maxbutton {
    width: 80px;
    height: 35px;
    margin-bottom: 0;
  }
  #content .maxbutton .mb-text {
    font-size: 0.65rem;
  }
  .home #content .front-il .list-wrap .slick-area {
    width: 100%;
    float: none;
    margin-top: calc(100vw - 44%);
  }
  .slick-item {
    padding: 0;
  }
}
/* =======================================================
* Single
* ======================================================= */
.single #main {
  max-width: 980px;
  margin: 89.1px auto 0;
  width: 100%;
  padding: 0 6.4385em;
}

.single .post #img-box .itemimg img {
  width: 100%;
  /*border: 1px solid #eee;*/
}
.single .slick-slider,
.single .slick-slider .slick-list,
.single .slick-slider .slick-track {
  height: auto !important;
}
.single .slick-slider .slick-list {
  padding: 0 0 50px !important;
}

.single .slick-vertical .slick-slide {
  float: left;
  /*width: auto !important;*/
  width: 12.5% !important;
  padding: 0 0.1rem 0.2rem;
  /*padding: 0 0.285rem 0.2rem;*/
  box-sizing: border-box;
}
.single .slick-vertical .slick-slide:first-child {
  padding-left: 0;
}
.single .slick-vertical .slick-slide:last-child {
  padding-right: 0;
}
.single .slick-vertical .slick-slide img {
  width: 100%;
}
.single #itempage{
  /*border-top: 1px solid #eee;*/
}
.single #itempage .item-info {
  width: 100%;
  /*margin: 0 0 3.5714em;*/
  margin: 0;
}
.single .item-info .c-box {
  margin: 0 0 3.5714em;
}
.single .item_page_title {
  border-bottom: 1px solid #eee;
  padding-bottom: 2.5rem;
  margin: 0 0 2.7rem;
}
.single .item-info .skuform {
  border-bottom-width: 0;
}
.single  .item-info form .skuform:first-child {
  border-top-width: 0;
}
.single .item-description .inner {
  padding-bottom: 3.5714em;
  border-bottom: 0;
}
@media screen and (max-width:768px) {
  .single .slick-vertical .slick-slide {
    width: 25% !important;
    margin: 0;
  }
  .single.postid-141 {
    overflow:hidden;
  }
  .single.postid-141 .slick-vertical .slick-slide {
    padding: 0 0.1rem 0.15rem;
  }
  .single .slick-slider .slick-list {
    padding: 0 0 10px !important;
  }
}
@media screen and (max-width:375px) {
  .single #main {
    /*padding: 0 15%;*/
    padding: 0 11%;
    /*margin-top: 15%;*/
    margin-top: 12%;
  }
  .single #itempage .item-info {
    width: 100%;
    /*margin: 0 0 1.75em;*/
    margin: 0;
  }
  .single .item_page_title {
     padding-bottom: 1.9rem;
     margin: 0 0 1rem;
  }
  .single .item-info .c-box {
     margin: 0 0 1em;
  }
  .single .item-description .inner {
     margin: 0;
  }
}

/* =======================================================
* Page
* ======================================================= */
.page #main {
    max-width: 980px;
    margin: 6.4285em auto 0;
    width: 100%;
    padding: 0 6.4385em;
    box-sizing: border-box;
}
.page #main #content {
  width: 640px;
  margin: 0 auto 80px;
}
/*
.page #main #content {
  width: 800px;
  margin: 0 auto 80px;
}*/
.page #main #content p {
  margin-bottom: 1.0714em;
  line-height: 180%;

  font-size: 100%;
}
.page #main #content h1 {
    border-bottom: 1px solid #eee;
    padding-bottom: 2.5rem;
    margin: 0 0 2.7rem;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.page #main #content h1 span.field_price {
    position: absolute;
    right: 0;
}
.item-info .field_price {
    font-size: 1.7142em;
    font-weight: normal;
    margin: 0;
    line-height: normal;
}


@media screen and (max-width:768px) {
.page #main {
  max-width: 100%;
  margin: 3em auto 0;
  width: 100%;
  padding: 0 3em;
}
.page #main #content {
  width: 100%;
  margin: 0 auto 80px;
}
.page #main #content h1 {
    font-size: 1.2857em;
    padding-bottom: 1em;
    margin: 1em 0 1rem;
    margin-top: 0.5rem;
}
.item-info .field_price {
    font-size: 1.3em;
}
}
/* =======================================================
* page - bluestract RECORDS
* ======================================================= */
.postid-141 #itemimg-sub .slick-list .slick-track {
  /*left: 2.3% !important;*/
}
.slick-initialized .slick-slide {
  padding: 0 !important;
}
@media screen and (max-width:768px) {
  .postid-141 #main {
    margin: 0;
    padding: 0;
  }
  .postid-141 .slick-track {
    left: 0 !important;
  }
  .postid-141 #itemimg-sub
   {
    padding: 0 11%;
  }
  .postid-141 .item_page_title {
    margin: 0 11%;
  }
  .postid-141 .item-description {
    padding: 0 11%;
  }
  .postid-141 .item-description .inner {
    margin: 15% 0 0;
  }
  .postid-141 #itemimg-sub .slick-list .slick-track {
    left: 0% !important;
  }



}

/* =======================================================
* page - fasion
* ======================================================= */


#fashion h1 ,#our-favourite-shop h1 ,#bluestract h1 ,#access h1 ,#music h1  {
  display: none;
}
#fashion h1.dp-a ,#our-favourite-shop h1.dp-a ,#bluestract h1.dp-a ,#access h1.dp-a ,#music h1.dp-a {
  display: block;
}
#fashion .grad-wrap {
  position: relative;
}

#fashion .grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ*/
}
#fashion .grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
#fashion .grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
#fashion .grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
#fashion .grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
#fashion .grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
#fashion .grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

#fashion .grad-btn {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: -15px;
    left: 0;
    width: 148px;
    margin: auto;
    padding: .5em 0;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
}
#fashion .grad-btn:hover {
  background: #fff;
  color: #009e8f;
}


.item-info {
  overflow: hidden;
}
.item-info .right {
  float: right;
}

#bluestract table td {
  vertical-align: top;
  padding: 5px 0;
  line-height: 180%;
}