@charset 'utf-8';
#tuning_pack_lists{color:#fff;}

@media screen and (max-width: 770px) {
      #tuning_pack_lists{width: 100%;}
      #tuning_pack_lists >h2{
            display: block;
            background: #505050;
            font-size:18px;
            border-top:solid 1px #fff;
            border-bottom:solid 1px #fff;
            padding: 3px 10px;
            margin:  10px auto;
      }
      #tuning_pack_lists >ul >h3{
            display: block;
            font-size: 16px;
            font-weight: bold;
            margin: 5px 0;
            padding: 0 10px;
      }
      #tuning_pack_lists >ul >h3:before{
            display: inline-block;
            content: "■";
      }
      #tuning_pack_lists >ul >li{
            display:flex;
            flex-wrap:wrap;
            justify-content:left;
            padding: 0 10px;
      }
      #tuning_pack_lists >ul >li >div{
            width:calc(100%/1);/* 横幅を3等分 */
             height:auto;
             flex-direction:column;/* 高さを揃えるための指定 */
             margin-bottom: 16px;
             position: relative;
      }
      #tuning_pack_lists >ul >li >div >h4{
            display: block;
            margin: 5px 0;
            font-size: 16px;
      }
      #tuning_pack_lists >ul >li >div >ul{padding: 0 20px 80px 0;}
      #tuning_pack_lists >ul >li >div >ul >li{
            padding: 8px 0;
            border-bottom:dotted 1px #fff;
            font-size: 12px;
      }
      #tuning_pack_lists >ul >li >div >ul >li:last-child{
            //border-bottom:none;
            
      }
      #tuning_pack_lists >ul >li >div >ul >li:before{
            display: inline-block;content: "・";
      }
      #tuning_pack_lists >ul >li >div >ul >.body_blank{display: none;}
      #tuning_pack_lists >ul >li >div >ul >.op_flag:before,
      #tuning_pack_lists >ul >li >div >ul >.op_flag +li:before{display: none;}
      #tuning_pack_lists >ul >li >div >ul >.op_flag{font-weight: bold;}
      #tuning_pack_lists >ul >li >div >ul >.op_flag +li{border-bottom:none;}

      #tuning_pack_lists >ul >input{display: none;}
      #tuning_pack_lists >ul >li >div >span{
            width: calc(100% - 10px);
            border-top:solid 2px #fff;
            padding-top:8px;
            display: block;
            font-size:14px;
            font-weight: bold;
            padding-left:10px;
            position: absolute;
            left:0;bottom:10px;
      }
      
      #tuning_pack_lists >ul >input +label{
            display: block;
            overflow-y: auto;
            cursor: pointer;
            font-size: 14px;
            border: solid 1px #fff;
            padding: 4px 10px;
            margin-bottom: 10px;
            position: relative;
      }
      #tuning_pack_lists >ul >input +label:before{
            display: inline-block;
            content: "・";
      }
      .dli-plus {
      position: absolute;
      top:14px;
      right: 20px;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        line-height: 1;
        width: 1em;
        height: 0.2em;
        background: currentColor;
        border-radius: 0.1em;
      }
      .dli-plus::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform: rotate(90deg);
        transition: 0.2s;
      }
      #tuning_pack_lists >ul >input:checked +label .dli-plus::before{
            transform: rotate(180deg);
      }
      #tuning_pack_lists >ul >input +label +li{
            height: 0;
            overflow-y:hidden;
            transition: 0.2s;
      }
      #tuning_pack_lists >ul >input:checked +label +li{
            min-height: 0px;
            height: auto;
      }
}

@media screen and (min-width: 771px) {
      #tuning_pack_lists{width: 100%;}
      #tuning_pack_lists >h2{
            display: block;
            background: #505050;
            font-size:20px;
            border-top:solid 1px #fff;
            border-bottom:solid 1px #fff;
            padding: 3px 20px;
            margin:  10px auto;
      }
      #tuning_pack_lists >ul >h3{
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin: 5px 0;
            padding: 0 20px;
      }
      #tuning_pack_lists >ul >li{
            display:flex;
            flex-wrap:wrap;
            justify-content:left;
            padding: 0 20px;
      }
      #tuning_pack_lists >ul >li >div{
            width:calc(100%/3);/* 横幅を3等分 */
             height:auto;
             flex-direction:column;/* 高さを揃えるための指定 */
             margin-bottom: 16px;
             position: relative;
      }
      #tuning_pack_lists >ul >li >div >h4{
            display: block;
            margin: 5px 0;
            font-size: 16px;
      }
      #tuning_pack_lists >ul >li >div >ul{padding: 0 20px 0 0;}
      #tuning_pack_lists >ul >li >div >ul >li{
            padding: 8px 0;
            border-bottom:dotted 1px #fff;
      }
      #tuning_pack_lists >ul >li >div >ul >li:last-child{
            //border-bottom:none;
            margin-bottom: 2.6em;
      }
      #tuning_pack_lists >ul >li >div >ul >li:before{
            display: inline-block;content: "・";
      }
      #tuning_pack_lists >ul >li >div >ul >.body_blank:before{
            display: inline-block;content: "　";
      }
      #tuning_pack_lists >ul >li >div >ul >.op_flag:before,
      #tuning_pack_lists >ul >li >div >ul >.op_flag +li:before{display: none;}
      #tuning_pack_lists >ul >li >div >ul >.op_flag{font-weight: bold;}
      #tuning_pack_lists >ul >li >div >ul >.op_flag +li{border-bottom:none;}

      #tuning_pack_lists >ul >input{display: none;}
      #tuning_pack_lists >ul >li >div >span{
            width: calc(100% - 10px);
            border-top:solid 2px #fff;
            padding-top:8px;
            display: block;
            font-size:18px;
            font-weight: bold;
            padding-left:10px;
            position: absolute;
            left:0;bottom:10px;
      }
      
      #tuning_pack_lists >ul >input +label{
            display: block;
            cursor: pointer;
            font-size: 16px;
            border: solid 1px #fff;
            padding: 4px 20px;
            margin-bottom: 10px;
            position: relative;
      }
      #tuning_pack_lists >ul >input +label:before{
            display: inline-block;
            content: "・";
      }
      .dli-plus {
      position: absolute;
      top:14px;
      right: 20px;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        line-height: 1;
        width: 1em;
        height: 0.2em;
        background: currentColor;
        border-radius: 0.1em;
      }
      .dli-plus::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform: rotate(90deg);
        transition: 0.2s;
      }
      #tuning_pack_lists >ul >input:checked +label .dli-plus::before{
            transform: rotate(180deg);
      }
      #tuning_pack_lists >ul >input +label +li{
            height: 0;
            overflow-y:hidden;
            transition: 0.2s;
      }
      #tuning_pack_lists >ul >input:checked +label +li{
            min-height: 0px;
            height: 100%;
      }
}