@charset "Shift_JIS";

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

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

.hpb-parts-hl-style
{
    padding: 0.5em 0.2em !important;
    margin: 0.5em 0px !important;
    border-color: #000000;
}

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

.hpb-parts-img-02
{
    background-color: #ffffff;
}

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

.hpb-parts-pbox-style
{
    border-color: #ffffff;
}
.hpb-parts-pbox-style h4
{
    padding: 0px !important;
}
.hpb-parts-pbox-style img
{
    margin-bottom: 0px !important;
    background-color: #ffffff;
}

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

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/
/*==========================================
    ふきだし
============================================*/
 
/* 全体 */
.sb-box {
  position: relative;
  overflow: hidden;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0; /* 画像の位置を上から0に */
  width: 80px; /* 画像の幅 */
  height: 80px; /* 画像の高さ */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
  /*border-radius: 50%; 画像を丸く表示する */
  border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 80px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 83px; /* ネームの位置を上から83に */
  color: #777; /* ネームのカラー */
  font-size: 10px; /* ネームのフォントサイズ */
}
/* アイコンネーム（左） */
.icon-name-left {
  left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 0 105px 15px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
  float: right;
}
/* 吹き出し内のテキスト藍 */
.sb-txt-c {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 12px; /* 吹き出しを角丸に */
  background: #deefff; /* 吹き出しの背景色 */
  color: #003399; /* 吹き出し内のテキストのカラー */
  font-size: 12px; /* 吹き出し内のフォントサイズ */
  line-height: 1.4; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 15px; /* 吹き出し内の上下左右の余白 */
  text-align: left;
}
.sb-txt-c > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出し内のテキスト紅 */
.sb-txt-m {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 12px; /* 吹き出しを角丸に */
  background: #ffefff; /* 吹き出しの背景色 */
  color: #990099; /* 吹き出し内のテキストのカラー */
  font-size: 12px; /* 吹き出し内のフォントサイズ */
  line-height: 1.4; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 15px; /* 吹き出し内の上下左右の余白 */
  text-align: left;
}
.sb-txt-m > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出し内のテキスト黄 */
.sb-txt-y {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 12px; /* 吹き出しを角丸に */
  background: #fffbbb; /* 吹き出しの背景色 */
  color: #7f6000; /* 吹き出し内のテキストのカラー */
  font-size: 12px; /* 吹き出し内のフォントサイズ */
  line-height: 1.4; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 15px; /* 吹き出し内の上下左右の余白 */
  text-align: left;
}
.sb-txt-y > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出し内のテキスト黒 */
.sb-txt-k {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 12px; /* 吹き出しを角丸に */
  background: #d6d6d6; /* 吹き出しの背景色 */
  color: #767171; /* 吹き出し内のテキストのカラー */
  font-size: 12px; /* 吹き出し内のフォントサイズ */
  line-height: 1.4; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 15px; /* 吹き出し内の上下左右の余白 */
  text-align: left;
}
.sb-txt-k > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出し内のテキスト影の男*/
.sb-txt-s {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 12px; /* 吹き出しを角丸に */
  background: #585858; /* 吹き出しの背景色 */
  color: #e7e7ff; /* 吹き出し内のテキストのカラー */
  font-size: 12px; /* 吹き出し内のフォントサイズ */
  line-height: 1.4; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 15px; /* 吹き出し内の上下左右の余白 */
  text-align: left;
}
.sb-txt-s > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}

/* 吹き出しの三角（左）藍 */
.sb-txt-left-c:before {
  left: -10px;
  border-width: 7px 12px 7px 0;
  border-color: transparent #deefff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left-c:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（左）紅 */
.sb-txt-left-m:before {
  left: -10px;
  border-width: 7px 12px 7px 0;
  border-color: transparent #ffefff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left-m:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（左）黄 */
.sb-txt-left-y:before {
  left: -10px;
  border-width: 7px 12px 7px 0;
  border-color: transparent #fffbbb transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left-y:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（左）黒 */
.sb-txt-left-k:before {
  left: -10px;
  border-width: 7px 12px 7px 0;
  border-color: transparent #d6d6d6 transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left-k:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（左）影の男 */
.sb-txt-left-s:before {
  left: -10px;
  border-width: 7px 12px 7px 0;
  border-color: transparent #585858 transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left-s:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右）藍 */
.sb-txt-right-c:before {
  right: -10px;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #deefff; /* 背景色と同じカラーに */
}
.sb-txt-right-c:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右）紅 */
.sb-txt-right-m:before {
  right: -10px;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #ffefff; /* 背景色と同じカラーに */
}
.sb-txt-right-m:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右）黄 */
.sb-txt-right-y:before {
  right: -10px;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fffbbb; /* 背景色と同じカラーに */
}
.sb-txt-right-y:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右）黒 */
.sb-txt-right-k:before {
  right: -10px;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #d6d6d6; /* 背景色と同じカラーに */
}
.sb-txt-right-k:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右）影の男 */
.sb-txt-right-s:before {
  right: -10px;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #585858; /* 背景色と同じカラーに */
}
.sb-txt-right-s:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}

/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* アイコン画像 */
  .icon-img {
    width: 60px; /* 画像の幅を-20px */
    height: 60px; /* 画像の高さを-20px */
  }
  /* アイコンネーム */
  .icon-name {
    width: 60px; /* 画像の幅に合わせて-20px */
    top: 62px; /* ネームの位置を上から62に */
    font-size: 9px; /* ネームのフォントサイズを-1px */
  }
  /* 吹き出し（左） */
  .sb-side-left {
    margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
  }
  /* 吹き出し（右） */
  .sb-side-right {
    margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
  }
  /* 吹き出し内のテキスト */
  .sb-txt {
    padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
  }
}

/*==========================================
    しかくボタン
============================================*/

a.btn_04 {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  height: 55px;
  position: relative;
  background: #000080;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 13px;
  font-weight:bold;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.btn_04:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
a.btn_04:hover {
  background: #fff;
  color: #000080;
}
a.btn_04:hover:before {
  border-top: 2px solid #000080;
  border-right: 2px solid #000080;
}

/*==========================================
    ステッチBOX
============================================*/
.box-design {
  margin: 20px auto;
  padding: 10px 30px 10px 20px;
  background: #b2d3e4;
  box-shadow: 0 0 0 10px #b2d3e4;
  border: 2px dashed #fff;
  color: #2e5777; /* 吹き出し内のテキストのカラー */
  font-size: 13px; /* 吹き出し内のフォントサイズ */
}
.box-design-tt {
  position: relative;
  transform: translateX(-10%);
  padding: 10px 20px 10px 20px;
  background-color: #336b86;
  color: #fff;
  margin: 5px 20px 0px 20px;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
}

/*==========================================
    影の男BOX
============================================*/
.s-box-design {
  margin: 20px auto;
  padding: 10px 30px 10px 20px; /* 上・右・下・左 */
  background: #b2b8e4;
  box-shadow: 0 0 0 10px #b2b8e4; /* ステッチ周囲 */
  border: 2px dashed #fff;
  color: #081040; /* 吹き出し内のテキストのカラー */
  font-size: 13px; /* 吹き出し内のフォントサイズ */
  font-weight: bold;
}
.s-box-design-tt {
  position: relative;
  transform: translateX(-10%);
  background-color: #0c0050;
  color: #fff;
  margin: 5px -40px 20px 20px;
  padding: 10px 20px;
  height: 20px; /* 帯高さ */
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible; /* はみ出しを許可 */
  z-index: 1;
}

.title-text {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}

.title-icon {
  position: absolute;
  right: -40px; /* はみ出し調整 */
  top: -40px; 
  width: 110px;
  height: auto;
  z-index: 2;
}

/*==========================================
    画像横並び
============================================*/

.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 300px; /*画像サイズ指定*/
  margin: 20px 0 0 -20px; /* 上右下左*/
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  margin: 0 0 0 10px;
  padding: 20px 0 0 0; /* 上だけ20px、他は0 */
}

/*==========================================
    画像横並び 影の男
============================================*/

.flexS {
  display: flex; /*横並び*/
}
.flexS .image {
  width: 200px; /*画像サイズ指定*/
  margin: 20px 0 0 -20px; /* 上右下左*/
  padding: 0 0 -20px 0; 
  overflow: hidden;
  position: relative;
}
.flexS .text {
  margin: 0 0 0 10px;
  padding: 20px 0 10px 0;
}