@charset "UTF-8";

/*アコーディオンaccd
===================================*/

/*アコーディオン全体*/
.accd-area {
  list-style: none;
  width: 100%;
  max-width: 900px; /* default 900 */
  margin: 0 auto;
}

.accd-area li {
  margin: 5px 0;
}

/*.accd-area section {
  border: 1px solid #be0606;
}*/
.stmt:hover {
  color: #8e886a;
}

/*タイトル（明細、Statement）*/
.stmt {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1rem; /*文字倍率100％*/
  color: #555;
  font-weight: 500;
  padding: 0 0 0 60px;
  transition: all 0.5s ease;
}

/*アイコンの＋と×*/
.stmt::before,
.stmt::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #555;
}
.stmt::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}
.stmt::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}

/*closeというクラスがついたら形状変化*/

.stmt.close::before {
  transform: rotate(45deg);
}

.stmt.close::after {
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  background: #fff;
  margin: 0 3% 3% 0%;
  /*padding: 3%;*/
}

/*紹介ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.pjt {
  font-size: 1rem; /*文字サイズ100%*/
  /*border-bottom: 1px solid #c0c0c0 /*下線の幅、線種、色の指定*/
}

/*項目見出し設定*/
.pjt dt {
  clear: both;
  /*letter-spacing: 0.1em; /*文字間隔を少し広くとる指定*/
  font-size: 1.2rem; /*文字サイズ100%*/
  font-weight: 600; /*太字にする*/
  color: #555;/*文字色*/
  padding: 15px 5px 5px; /*上、左右、下への余白*/
}
/*内容設定*/
.pjt dd {
  overflow: hidden;
  border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
  padding: 0px 20px 5px; /*上、左右、下への余白*/
}
/*右に回り込みの小さな画像*/
.pjt dd .img {
  width: auto; /*画像の幅*/
  float: right; /*右に回り込み*/
  margin-left: 30px;
}