@charset "UTF-8";

/* --------------------cssのみのアコーディオン-------------------- */
.accordion  {
  margin-inline: 0;
  border-bottom:1px solid #a9a9a9
}
.accordion_title {
  position: relative;
  border: none;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  padding: 30px 20px 30px 55px ;
  line-height: 1.6em;
  background: url(http://ma-zero.com/img/iconq.svg) no-repeat top 30px left 10px / 35px;
  color: #01b11e;
}
summary.accordion_title::-webkit-details-marker {
  display:none;
}
.accordion_title:after {
  content: "+";
  position: absolute;
  top: calc(50% - 0.5em);
  right: 20px;
  line-height: 1;
  padding: 0;
  pointer-events: none;
  color: #01B11E;
}
.accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
  transition: all 0.6s ease 0s;
}
.accordion .accordion_contents {
  padding: 30px 20px 30px 55px ;
  background: url(http://ma-zero.com/img/icona.svg) #f2f2f2 no-repeat top 30px left 10px / 35px;
}
.accordion .accordion_contents > *:first-of-type {
  margin-top: 0;
}
.accordion .accordion_contents > *:last-of-type {
  margin-bottom: 0;
}
.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
  transition: all 0.6s ease 0s;
}
.accordion[open] .accordion_contents {
  padding: 30px 20px 30px 55px ;
}
.accordion[open] .accordion_title:after {
  content: "−";
  color: #01B11E;
}


/* --------------------css+javascriptのアコーディオン-------------------- */

.iconq {
    position: absolute;
    top: 15px;
    left: 0;
    background: #707070;
    color: #fff;
    border-radius: 0 20px 20px 0;
    padding: 0 20px;
    margin-right: 10px;
    font-size: .8rem;
    height: 30px;
    line-height: 30px;
}
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    /* max-width: 900px; */
    margin:0 auto;
}
.accordion-area li{
    /* margin: 10px 0; */
}
.accordion-area section {
  /* border: 1px solid #ccc; */
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    line-height: 1.8rem;
    padding: 15px 50px 15px 60px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
}
.title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
}
.title::after{
    top:48%;
    right: 15px;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}
.title.close::after{
  transform: rotate(-45deg);
}

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





/*PCのみ*/
@media (min-width: 768px) {



}

@media (max-width: 768px) {

  .accordion_title:after {
    right: 0px;
  }

}