@charset "utf-8";
/* CSS Document */

/*アコーディオン全体*/
.acordion {
      width: 90%;
      padding: 10px 10px 20px;
      margin: auto;
    }
.acordion input {
      display: none; /*チェックボックスを隠す*/
    }
/*バー部分*/
.acordion label {
      cursor :pointer;
      display: block;
      text-decoration: none;
      color: #152332;
      line-height: 3;
      position: relative;
      margin: 0 0 10px;
      padding: 10px;
      background-color: #ffffff;
      border-radius: 10px;
    }
/*開いたときに表示される部分*/
.acordion ul {
      margin: 0;
      padding: 0;
      list-style: none;
      margin-bottom: 20px;
      /*border-bottom: #D6D2D2 1px solid;*/
    }
.acordion li {
      height: 0;
      overflow-y: hidden;
      transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
      -webkit-transition: padding-bottom 0.5s, padding-top 0.5s
      -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
      -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
      -o-transition: padding-bottom 0.5s, padding-top 0.5s;

    }
#acordion_bar01:checked ~ #links01 li,
#acordion_bar02:checked ~ #links02 li, 
#acordion_bar03:checked ~ #links03 li, 
#acordion_bar04:checked ~ #links04 li,
#acordion_bar05:checked ~ #links05 li,
#acordion_bar06:checked ~ #links06 li,
#acordion_bar07:checked ~ #links07 li,
#acordion_bar08:checked ~ #links08 li,
#acordion_bar09:checked ~ #links09 li,
#acordion_bar10:checked ~ #links10 li,
#acordion_bar11:checked ~ #links11 li,
#acordion_bar12:checked ~ #links12 li,
#acordion_bar13:checked ~ #links13 li,
#acordion_bar14:checked ~ #links14 li,
#acordion_bar15:checked ~ #links15 li,
#acordion_bar16:checked ~ #links16 li,
#acordion_bar17:checked ~ #links17 li, 
#acordion_bar18:checked ~ #links18 li, 
#acordion_bar19:checked ~ #links19 li,
#acordion_bar20:checked ~ #links20 li,
#acordion_bar21:checked ~ #links21 li,
#acordion_bar22:checked ~ #links22 li,
#acordion_bar23:checked ~ #links23 li{
      height: auto; /*開いたときに表示されるliの高さ*/
      opacity: 1;
      background: #fff;
      padding: 10px;
      text-indent: -3.5em;
      padding-left: 6em;
    }
/*開いたときの下の余白*/
#acordion_bar01:checked ~ #links01 li:last-child,
#acordion_bar02:checked ~ #links02 li:last-child,
#acordion_bar03:checked ~ #links03 li:last-child, 
#acordion_bar04:checked ~ #links04 li:last-child,
#acordion_bar05:checked ~ #links05 li:last-child,
#acordion_bar06:checked ~ #links06 li:last-child,
#acordion_bar07:checked ~ #links07 li:last-child,
#acordion_bar08:checked ~ #links08 li:last-child,
#acordion_bar09:checked ~ #links09 li:last-child,
#acordion_bar10:checked ~ #links10 li:last-child,
#acordion_bar11:checked ~ #links11 li:last-child,
#acordion_bar12:checked ~ #links12 li:last-child,
#acordion_bar13:checked ~ #links13 li:last-child,
#acordion_bar14:checked ~ #links14 li:last-child,
#acordion_bar15:checked ~ #links15 li:last-child,
#acordion_bar16:checked ~ #links16 li:last-child,
#acordion_bar17:checked ~ #links17 li:last-child, 
#acordion_bar18:checked ~ #links18 li:last-child, 
#acordion_bar19:checked ~ #links19 li:last-child,
#acordion_bar20:checked ~ #links20 li:last-child,
#acordion_bar21:checked ~ #links21 li:last-child,
#acordion_bar22:checked ~ #links22 li:last-child,
#acordion_bar23:checked ~ #links23 li:last-child{
      margin-bottom: 20px;
    }
/*閉じた状態の矢印描画*/
.acordion label:after{
      content:"";
      display:block;
      width:8px;
      height:8px;
      border-top: #666 2px solid;
      border-right: #666 2px solid;
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      position:absolute;
      right: 2%;
      top: 0;
      bottom: 15%;
      margin: auto;
    }
/*開いた状態の矢印描画*/
.acordion input[type=checkbox]:checked + label:after{
      content:"";
      display:block;
      width:8px;
      height:8px;
      border-top: #666 2px solid;
      border-right: #666 2px solid;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      position:absolute;
      right: 2%;
      top: 7%;
      bottom: 0;
      margin: auto;
    }
    
    @media screen and (max-width: 480px){
    .acordion {
      width: 100%;
    }
    .acordion label {
      line-height: 1.5;
      font-size: 13px;
    }
    
    .acordion li {
      line-height: 1.5;
      font-size: 13px;}
    
    }