@charset "Shift_JIS";

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

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

.hpb-parts-hl-style
{
    border-color: #56A9D9;
}

.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;
}

.hpb-parts-blist-style
{
    border-color: #56A9D9;
    background-color: #f3f3f3;
}
a.hpb-parts-blist-style:link
{
    color: #000000;
}
a.hpb-parts-blist-style:visited
{
    color: #000000;
}
a.hpb-parts-blist-style:hover
{
    color: #ff6600;
}
a.hpb-parts-blist-style:active
{
    color: #ff6600;
}

#hpb-nav {
  float: left;
}

#hpb-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


#hpb-main,
#hpb-inner,
#hpb-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hpb-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hpb-title.hpb-top-image {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hpb-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#hpb-main > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hpb-title.hpb-top-image {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hpb-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* タイトル帯を強制的に 80px に固定し、本文に被らないようにする */
body.hpb-layoutset-02 #hpb-title.hpb-top-image {
    width: 100% !important;
    height: 80px !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (min-width: 768px) {
    body#toppage #hpb-main {
        margin-top: -20px !important;
        position: relative;
        z-index: 1;
    }

#hpb-nav {
    margin-top: 20px !important;
}

body#toppage #hpb-header {
    margin-bottom: 60px !important;
}

body#toppage #hpb-header h1 {
    position: static !important;
}

body#toppage #hpb-headerMain {
    height: 40px !important;
    line-height: 40px !important;
}

.hpb-layoutset-01 #hpb-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hpb-layoutset-01 #hpb-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hpb-layoutset-01 #hpb-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 帯画像を基準点にする */
#hpb-title {
    position: relative !important;
}

/* タイトル文字を右上に重ねる（font-size:12px のまま） */

/* h1 の見た目はテンプレート通り 12px のまま */
#hpb-headerMain h1 {
    font-size: 12px !important;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
#hpb-header {
    position: absolute !important;
    top: 15px !important;   /* ← ここを調整するだけ */
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
}
#hpb-title {
    margin-top: 20px !important;   /* ← ここを10から20pxで調整 */
}

/* 画像（header.png）を確実に下げる */
#hpb-title {
    margin-top: 20px !important;   /* ← 10から20pxで調整 */
}

@media screen and (max-width: 568px) {
  #hpb-title img {
    display: none !important;
  }

@media screen and (max-width: 568px) {
  .hpb-title-image img {
    display: none !important;
  }

@media screen and (max-width: 568px) {
  #hpb-title-image img {
    display: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-page-title-image img {
    display: none !important;
  }

@media screen and (max-width: 568px) {
  .hpb-top-image {
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-main,
  #hpb-wrapper,
  #hpb-inner,
  #hpb-title,
  .hpb-top-image {
    background-image: none !important;
    background: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-main,
  #hpb-wrapper,
  #hpb-inner {
    background: none !important;
    background-image: none !important;
  }
@media screen and (max-width: 568px) {
  .hpb-page-title {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-page-title-image {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-top-image {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-container,
  #hpb-wrapper,
  #hpb-inner,
  #hpb-main {
    background: none !important;
    background-image: none !important;
  }
@media screen and (max-width: 568px) {
  .hpb-page-title,
  .hpb-page-title-image,
  .hpb-title-image,
  .hpb-top-image,
  #hpb-title,
  #hpb-main,
  #hpb-wrapper,
  #hpb-inner {
    background-image: none !important;
    background: none !important;
  }
  
@media screen and (max-width: 568px) {
  img[src*="header.png"] {
    display: none !important;
  }
}
@media screen and (max-width: 568px) {
  img[src*="header.png"] {
    display: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-page-title,
  .hpb-page-title-image,
  .hpb-title-image {
    background-image: none !important;
    background: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-page-title-image img {
    display: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-main {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-title {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  .hpb-top-image {
    background: none !important;
    background-image: none !important;
  }
  
@media screen and (max-width: 568px) {
  #hpb-title {
    background: none !important;
    background-image: none !important;
  }
}