@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style
{
    border-color: #cccccc;
}

.hpb-parts-hl-style
{
    border-color: #cccccc;
    background-image: none !important;
}

.hpb-parts-cbox-style
{
    border-color: #cccccc;
}

.hpb-parts-hr-style
{
    border-color: #cccccc;
}

.hpb-parts-pbox-style
{
    border-color: #cccccc;
}
.hpb-parts-pbox-style h4
{
    padding: 0px !important;
}

.hpb-parts-blist-style
{
    border-color: #666666;
}
a.hpb-parts-blist-style:link
{
    color: #666666;
}
a.hpb-parts-blist-style:visited
{
    color: #666666;
}
a.hpb-parts-blist-style:hover
{
    color: #F89A07;
}
a.hpb-parts-blist-style:active
{
    color: #F89A07;
}

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/

/* === Top hero image override === */
#hpb-title.hpb-top-image{
  background-image: url("main-piano.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 320px;
}

/* === Top hero image force override (remove template layer) === */
#hpb-title.hpb-top-image{
  background: url("main-piano.jpg") center / cover no-repeat !important;
  height: 320px;
}

/* テンプレ側が疑似要素で画像を持ってる場合を潰す */
#hpb-title.hpb-top-image::before,
#hpb-title.hpb-top-image::after{
  background: none !important;
  content: none !important;
}

/* もし子要素に背景が入ってても潰す（保険） */
#hpb-title.hpb-top-image *{
  background-image: none !important;
}

/* トップ画像が右バナーに被らないように下に余白を作る */
#hpb-title.hpb-top-image{
  margin-bottom: 20px;
}

/* 右側バナー（ボタン）の“上に被さる動き”を止める */
#hpb-aside{
  position: relative;
  top: 0;
}

#hpb-title{
  position: relative;
  z-index: 2;
}
#hpb-aside{
  position: relative;
  z-index: 1;
}

/* 右側のバナーがトップ画像に被らないように押し下げる */
#banner{
  margin-top: 20px;
}

.cta-btn{
  display:inline-block;
  padding:16px 32px;
  background:#f06a2b;
  color:#fff;
  font-weight:bold;
  font-size:16px;
  text-decoration:none;
  border-radius:999px;
  transition:0.3s;
}

.cta-btn:hover{
  opacity:0.85;
}

.cta-btn{
  display:block;
  width:90%;
  max-width:420px;
  margin:30px auto;
  padding:18px 20px;

  background:#f06a2b;
  color:#fff;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  text-decoration:none;

  border-radius:999px;
  transition:0.3s;
}

.cta-btn:hover{
  opacity:0.85;
}

/* CTAボタン統一 */
.cta-btn{
  display:block;
  width:90%;
  max-width:420px;
  margin:30px auto;
  padding:18px 20px;

  background:#f06a2b;
  color:#fff;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  text-decoration:none;

  border-radius:999px;
  transition:0.3s;
}

.cta-btn:hover{
  opacity:0.85;
}

/* CTAボタン統一（強制上書き） */
a.cta-btn{
  display:block !important;
  width:90% !important;
  max-width:420px !important;
  margin:18px auto !important;
  padding:16px 18px !important;

  background:#f06a2b !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:16px !important;
  line-height:1.3 !important;
  text-align:center !important;
  text-decoration:none !important;

  border-radius:12px !important; /* まずは角丸固定。丸にしたければ後で999px */
  box-sizing:border-box !important;
}

a.cta-btn:hover{ opacity:.88; }