@charset "shift_jis";

/*============ 商品ページ個別CSS ===========*/

/* ページ固有の色を下記3つの要素に同一で入力 (白ヌキ文字を置いても読める程度の濃さで）*/

h2 .itemtitle, .open-link a:hover span, .open-link a:active span, .hidden-link a:hover span, .hidden-link a:active span, #container .main1c .button:hover,#container .main1c .button:active
{
	color: #D1954C; /* キーカラーを指定 */
}

h2::before, h2::after, .accordion-block div, .tab-menu dl dt, .open-link a span,.hidden-link a span, p.point-number, .topimage h1, .whole-bg, .main1c .button, .whole-topimage, h3::before, .spec-title::before, .style-h3::before
{
	background: #D1954C; /* キーカラーを指定 */
}

h3, .style-h3, .open-link a span,.hidden-link a span, .spec-title, .main1c .button, .underline
{
	border-color: #D1954C; /* キーカラーを指定 */
}
.clear {
	clear:both;
}

/*メインコンテンツブロック*/

.jacket{
	border:none;
	box-shadow:none;
}




.clearfix:after {
  content: " ";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
  overflow:visible;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.float-img{
    float: left;
    width: 65%;
}

.section{
    background: #fff;
}
.main1c .inner{
    background: #fff;
    width: 1100px;
    padding: 0 50px;
    margin: 0 auto;
}
h2::after{
    margin-top: 0;
}
.section h2 .bg{
   
    background: linear-gradient(rgba(255,255,255,1) 50% ,rgba(234,216,191,1) 90%);
    font-size: 32px;
   
    padding: 30px 10px 25px;
    position: relative;
    margin: 0;
    font-weight: bold;
}

.tracklist h3,.benefits h3,.spec-title{
     background: linear-gradient(-90deg, rgba(255,255,255,1),rgba(234,216,191,.3));
}
.topimage h1{
   /* border-radius: 50px;*/
    background: #87771D!important;
    color: #fff;
    padding: 10px 0;
}
ul.li-s-no{
    list-style: none!important;
}
ul.li-s-no li{
    display: inline-block;
    width: 45%;
    margin-left: 0;
    vertical-align: top;
    box-sizing: border-box;
    padding: 5px;
    font-size: 14px;
}
ul.li-s-no li strong{
    display: block;
}
.red{
    color: red;
}
.col2-2 ul.li-s-no li{
    font-weight: bold;
}
.bg-box{
    position: relative;
}
.bg-box .bg-img{
    position: absolute;
    bottom: -50px;
    right: 0;
    width: 70%;
    max-width: 700px;
    z-index: 0;
}
.bg-box .col2-1,.bg-box .col2-2{
    position: relative;
    z-index: 1;
}
.tracklist h3 span{
    display: inline-block;
    font-size: 60%;
    margin-left: 5px;
}

.bg-box01{
    background: #F2EADF;
    padding: 10px;
}

ul.cont-2-box{
    margin-bottom: 0;
}
ul.cont-2-box li{
    float: left;
    width: 50%;
    margin-left: 0;
    list-style: none;
}
.flex-ttl{
    display: flex;
	align-items: center;
}
.flex-ttl:after{
    content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
    margin-left: .4em;
}
.color-blue{
    color: #5976BA;
}
.color-red{
    color: #EB6872;
}
.color-green{
    color: #00AC97;
}
.color-yellow{
    color: #C1AB04;
}
.color-gray{
    color: #727171;
}
.size-l{
    font-size: 22px!important;
}
.size-m{
    font-size:19px!important;
}
.size-s{
    font-size: 16px!important;
}

.bg-img{
    background: url("../../piano-zyozyouka/img/bg01.png") no-repeat center bottom;
    background-size: contain;
    padding-bottom: 250px;
}
p.point-number{
    background: none;
    margin-top: -10px
}
h2{
    color: #c60062;
}
.benefits p{
    font-size: 13px;
}
.abso01,.abso02 {
    position: relative;
}
.abso01 p{
    width: 55%;
}
.abso01 img{
    position: absolute;
    top: 20px;
    right: -20px;
    max-width: 207px;
    width: 50%;
}
.abso02 p{
    width: 35%;
}




.abso02 img{
    position: absolute;
    top: 30px;
    right: -20px;
    max-width: 329px;
    width: 80%;
}
.abso02 p.annotation{width: 100%;}
/*============ スマートフォン用 ===========*/
@media screen and (max-width: 767px) {
.float-img{
    float: none;
    width: 100%;
}

.abso02 img {

    position: absolute;
    top: 30px;
    right: -20px;
    max-width: 329px;
    width: 70%;

}
.bg-img {
    background:none;
	padding-bottom:0px;
}
    .main1c .inner{
        width: 100%;
        padding: 0;
    }
    .pc{
        display: none;
    }
    .section h2 .bg{
        background: none!important;
        font-size: 24px;
    }
    .bg-box .bg-img{
        position: static;
        width: 100%;
    }
    ul.cont-2-box li{
        float: none;
        width: 100%;
    }
  /* ここにスマホ専用のCSSを記入 */


}/* Media Query for SmartPhone */