@charset "utf-8";
/* CSS Document */
/*==============================
==============================
★　ABOUT　★
※　アコーディオン
==============================
==============================*/
/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin: 0 auto;
}
.accordion-area li {
  margin: 32px 0;
}
.accordion-area .the-sun img {
  width: 100px;
  height: 100px;
  opacity: 0.8;
}
.the-sun {
  border: 3px dotted #D8D8D8;
  background: url("../images/the-sun-bg.webp")no-repeat center/cover;
}
.the-moon {
  border: 3px dotted #D8D8D8;
  background: url("../images/the-moon-bg.jpg")no-repeat 10% /cover;
}
.accordion-area .the-moon img {
  width: 90px;
  height: 90px;
  opacity: 0.8;
  padding-bottom: 5px;
}
/*アコーディオンタイトル*/
.title {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 40px;
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  transition: all .5s ease;
  font-family: "Emilys Candy", "sans-serif";
  letter-spacing: 0.1em;
}
/*アイコンの＋と×*/
.title::before, .title::after {
  position: absolute;
  content: '';
  width: 30px;
  height: 2px;
  background-color: #D8D8D8;
}
.title::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}
.title::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before {
  transform: rotate(45deg);
}
.title .close::after {
  transform: rotate(-45deg);
}
.title:hover {
  opacity: 1.0;
  filter: brightness(200%);
}
/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  background-color: rgba(48, 48, 48, 0.5);
  margin: 0 3% 3% 3%;
  padding: 3%;
}
/*==============================
==============================*/
@media screen and (max-width: 651px) {
  .accordion-area li {
    margin: 20px 0;
  }
  .accordion-area .the-sun img {
    width: 70px;
    height: 70px;
  }
  .accordion-area .the-moon img {
    width: 60px;
    height: 60px;
  }
  .title {
    font-size: 32px;
  }
  .the-sun, .the-moon {
    border: 2px dotted #D8D8D8;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 426px) {
  .accordion-area .the-sun img {
    width: 50px;
    height: 50px;
  }
  .accordion-area .the-moon img {
    width: 40px;
    height: 40px;
  }
  /*アコーディオンタイトル*/
  .title {
    font-size: 20px;
    letter-spacing: 0.08em;
  }
  .title::before, .title::after {
    width: 20px;
  }
}