FAQ_css

.accordion {

  width: 100%;

}

/* inputのチェックボックスを非表示 */

.accordion-hidden {

  display: none;

}

/* 見出しボタン部分 */

.accordion-open {

  display: block;

  padding: 10px 80px 10px 10px;

  background: #62c9c7;

  cursor: pointer;

  margin: 5px 0;

  position: relative;

}

/* ＋アイコン */

.accordion-open::before,

.accordion-open::after {

  content: '';

  width: 20px;

  height: 3px;

  background: #000;

  position: absolute;

  top: 50%;

  right: 5%;

  transform: translateY(-50%);

}

/* アイコンのー */

.accordion-open::after {

  transform: translateY(-50%) rotate(90deg);

  transition: .5s;

}

/* アコーディオンが開いたらーに */

.accordion-hidden:checked+.accordion-open:after {

  transform: translateY(-50%) rotate(0);

}

/* アコーディオン中身部分 */

.accordion-inner {

  display: block;

  height: 0;

  overflow: hidden;

  padding: 0;

  opacity: 0;

  transition: 0.5s;

  /* 表示速度の設定 */

  cursor: pointer;

}

/* チェックボックスにチェックが入ったら中身部分を表示する */

.accordion-hidden:checked+.accordion-open+.accordion-inner {

  height: auto;

  opacity: 1;

  padding: 10px;

}

/* 中にいろいろ入れたいとき */

.accordion-box {

  display: block;

  height: 0;

  overflow: hidden;

  padding: 0;

  opacity: 0;

  transition: 1s;

}

.accordion-hidden:checked+.accordion-open+.accordion-box {

  height: auto;

  opacity: 1;

  padding: 10px;

}

  /*タイトル*/

.titel_FAQ {

    text-align: center;

    color: black;

    text-decoration:underline;

    text-decoration-color: blue;

}

/*ヘッダー*/

header {

  display: flex;

  width: 100%;

  height: 100px;

  background-color: darkgrey;

  align-items: center;

}

 

.title {

  margin-right: auto;

}

 

.menu-item {

  list-style: none;

  display: inline-block;

  padding: 10px;

}

.input {

  display: flex;

  text-align: center;

  text-size-adjust: 50px;

}

/*検索ボックス*/

.searchInput {

  object-position: 50%;

}