/* words */
.words{
    clear:both;
    width: 90%;
    margin: 0 auto 0 auto;
    text-align: center;
}
.words label{
    padding: 18px 0 12px 0;
    z-index: 20;
    display:block;
    height: 30px;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    border-bottom: 1px dotted #74bfe2;
    vertical-align:middle;
}
.words p{
  text-align: left;
}
.words input:checked + label,
.words input:checked + label:hover{
    border-bottom: 1px dotted #74bfe2;
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
 }
.words input{
    display: none;
}
.words article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.words article p{
    padding: 20px 0 10px 0;
    background: url() no-repeat 0 10px;
    line-height:1.7;
}
.words input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.words input:checked ~ article.ac-small{
    height: 350px;
}
.words input:checked ~ article.ac-medium{
    height: 400px;
}
.words input:checked ~ article.ac-large{
    height: 550px;
}
/* words2 
.words2{
    width: 100%;
    margin: 0 auto 0 auto;
    margin-bottom:20px;
    text-align: center;
}
.words2 label{
    width:800px;
    padding: 18px 0 12px 0;
    z-index: 20;
    display:table-cell;
    height: 30px;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px;
    vertical-align:middle;
}
.words2 input:checked + label,
.words2 input:checked + label:hover{
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
 }
.words2 input{
    display: none;
}
.words2 article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.words2 article p{
    padding: 20px 0 10px 0;
    line-height:1.7;
}
.words2 input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

}
.words2 input:checked ~ article.ac-small{
    height: 350px;
}
.words2 input:checked ~ article.ac-medium{
    height: 400px;
}
.words2 input:checked ~ article.ac-large{
    height: 550px;
}
*/

/* 1024px以上 ---------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){
 /* words */
  .words{
    /*
    float:left;
    width: 350px;
    margin: 10px auto 30px auto;
    text-align: center;
    */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .words div{
    width: 45%;
    margin: 0.5em;
  }
  .words label{
    padding: 18px 0 12px 0;
    z-index: 20;
    display:flex;
    justify-content: center;
    height: 30px;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px;
    vertical-align:middle;
  }
  .words input:checked + label,
  .words input:checked + label:hover{
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
   }
  .words input{
    display: none;
  }
  .words article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  }
  .words article p{
    padding: 20px 0 10px 0;
    background: url() no-repeat 0 10px;
    line-height:1.7;
  }
  .words input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
/*  box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);*/
  }
  .words input:checked ~ article.ac-small{
    height: 350px;
  }
  .words input:checked ~ article.ac-medium{
    height: 400px;
  }
  .words input:checked ~ article.ac-large{
    height: 550px;
  }

  /* words2 
  .words2{
    width: 350px;
    margin-left:370px;
    padding-top:10px;
      text-align: center;
  }
  .words2 label{
    width:350px;
    padding: 18px 0 12px 0;
    z-index: 20;
    display:table-cell;
    height: 30px;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px;
    vertical-align:middle;
  }
  .words2 input:checked + label,
  .words2 input:checked + label:hover{
    border-bottom: 1px dotted #74bfe2;
    background: url() no-repeat 0 10px #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
   }
  .words2 input{
    display: none;
  }
  .words2 article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  }
  .words2 article p{
    padding: 20px 0 10px 0;
    background: url() no-repeat 0 10px;
    line-height:1.7;
  }
  .words2 input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

  }
  .words2 input:checked ~ article.ac-small{ height: 350px; }
  .words2 input:checked ~ article.ac-medium{ height: 400px; }
  .words2 input:checked ~ article.ac-large{ height: 550px; }

*/
}