/*タイトル。クリック部。右端の開閉ボタンを含む。*/
.accordion__title {
    background-color: #F0F0F0;
    border: 1px solid transparent;  /*これは不要っぽい*/
    color: #000;    /*文字色*/
    padding: 1em .625em .625em 0em;  /*paddingを設定しておかないとエリア自体がすごく狭くなる。[上][右][下][左]*/
    position: relative; /*「要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。」これも消せないのでは。*/
    cursor: pointer;
    user-select: none;  /*文字選択をできるか。ここをクリックするのだから文字選択はできない方がいい*/
}
  
  /*右端の+,-記号は、文字ではなくここで数学的描画で書かれているっぽい*/
  /*参照：https://flex-box.net/accordion/#co-index-3　*/
  .accordion__title::before, .accordion__title::after {
    content: '';
    display: block;
    background-color: #464; /*右端記号の色*/
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
  }
    /*タイトルクリック時の右端の記号のアニメーション*/
  .accordion__title::after {
    transform: rotate(270deg);
    transition-duration: .3s;
  }
  
  .accordion__title:hover/*,
  .accordion__title:active,
  .accordion__title.is-active*/ { 
    background-color: #cfc;
  }
  
    .accordion__title.is-active::before {
    opacity: 0;
  }
  
  .accordion__title.is-active::after {
    transform: rotate(0);
  }
  
  /*クリックで表示される部分。*/
  .accordion__content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0 1em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition-duration: .3s;
  }
  
  .accordion__content.is-open {
    border: 1px solid #F7F7F7;
    padding: .625em 1em;
    line-height: normal; /* numberに書き換える*/
    height: auto;
    opacity: 1;
  }





@media screen and (min-width: 769px) {
  #top .accordion__container {
    font-size:20px;
  }
    #top .accordion__title {
    font-size:20px;
  }
  #top .accordion__content {
    font-size:16px;
  }
  .section_article .accordion__container {
    font-size:18px;
  }
  .section_article .accordion__content {
    font-size:16px;
  }
  .accordion__content.is-open { /*一つだけ開くための設定。プラスHTMLで3箇所追記*/
    display: block;
  }
}

@media screen and (max-width: 768px) {
  #top .accordion__container {
    font-size:17px;
  }
  #top .accordion__content {
    font-size:15px;
  }
  .section_article .accordion__container {
    font-size:16px;
  }
  .section_article .accordion__content {
    font-size:15px;
  }
  .accordion__content.is-open { 
    display: block;
  }
}

@media print { 
  #top .accordion__container {
    font-size:20px;
  }
  #top .accordion__content {
    font-size:16px;
  }
  .section_article .accordion__container {
    font-size:18px;
  }
  .section_article .accordion__content {
    font-size:16px;
  }
  .accordion__content.is-open {
    display: block;
  }
}