@charset 'UTF-8';
/*---------------------------------------------------------------------------------
cntList
-----------------------------------------------------------------------------------
font size
147% = 24px
135% = 22px
122% = 20px
110% = 18px
97%  = 16px
85%  = 14px
72%  = 12px
60%  = 10px
---------------------------------------------------------------------------------*/

/*
コンテンツ共通
---------------------------------------------------------------------------------*/
.wrapCnt {
  border: 1px solid #a0a0a0;
  line-height: 1.5;
  margin: 0 0 10px;
  overflow: hidden;
  width: 668px;
}

.wrapCnt h3 {
  margin: 0;
}

.balloon {
  background: #fff;
  border: 2px solid #ccc;
  font-size: 72%;
  padding: 5px;
  position: relative;
  text-align: left;
}

.balloon:after,
.balloon:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  pointer-events: none;
  right: 100%;
  width: 0;
}

.balloon:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
  top: 45%;
}

.balloon:before {
  border-color: rgba(160, 160, 160, 0);
  border-right-color: #ccc;
  border-width: 13px;
  margin-top: -13px;
  top: 45%;
}

/*
コンテンツ - お役立ちCONTENTS
---------------------------------------------------------------------------------*/
#useful h3 {
  margin-bottom: 10px;
}

#useful ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0 4px;
  text-align: left;
}

#useful li {
  display: inline-block;
  margin: 0 5px 10px;
  padding: 0;
  vertical-align: top;
  width: 315px;
}

#useful a {
  display: block;
  float: left;
  width: 145px;
}

#useful .balloon {
  margin: 0 0 0 135px;
  width: 170px;
}

#useful .balloon a {
  color: #333;
  display: inline;
  float: none;
  text-decoration: none;
}

#useful .balloon a:hover {
  position: static;
  text-decoration: underline;
}