/**** PC版 ****/
@media only screen and (min-width:600px) {

      .article-body{
        line-height:initial !important;
      }

      .formula-area-box{
        display: flex;
        justify-content: flex-start;
        padding: 0 0 0 20px;
      }

      .unit-row{
        float: left;
      }

      .unit-row:nth-child(1){
        width: 32%;
      }

      .unit-row:nth-child(2){
        width: 34%;
      }

      .unit-row:nth-child(3){
        width: 35%;
      }

      .calc-part{
        background-color: #f8f8f8;
        padding:20px;
        width: 98%;
      }

      .calc-title{
        font-weight:bold;
      }

      .calc-cont{
        margin:0 10px 0 30px;
        line-height: 30px;
      }

      .input-text {
        height: 28px;
        font-size: 16px;
        flex-grow: 0.5;
        min-width: 40px;
        max-width: 180px;
        padding:0 0 0 10px;
      }

      .error-message {
        color: red;
        font-size: 0.8em;
        margin-left:32px;
      } 
    
    }
    
    /**** スマホ版 ****/
    @media screen and (max-width: 600px) {
              
      .formula-area-box{
        padding: 0 0 0 10px;
      }

      .unit-row{
        margin:10px 0 0 0;
      }

      .calc-part{
        background-color: #f6f1f1;
        padding:10px 0;
        margin: 5px 0;
        width: 100%;
      }

      .calc-title{
        margin:0 15px 0 10px;
        font-weight:bold;
      }

      .calc-cont{
        margin:0 10px 0 10px;
        line-height: 30px;
      }

      .input-text {
        height: 28px;
        font-size: 16px;
        min-width: 50px;
        max-width: 200px!important;
        padding:0 0 0 10px;
      }

      .input-text::placeholder {
        color: transparent;
      }
    }

    .cont_title{
        margin:50px 0 0 0!important;
    }

    .unit{
      margin:0 0 0 5px;
    }
    
  .focused {
    background-color: #e0f7fa !important;
  }
    
  .key:hover {
      background-color: #d4d4d4;
  }
    
  .result-box{
      margin:5px 0 0 0;
      display:block;
  }
    
  .article-header__inner {
      padding-bottom: 0px !important;
  }
  
  .article-body>*:not([class*="epb-spacer"]):not(:first-child) {
    margin-top: 10px;
  }
  
  .article-body{
  line-height:var(--ep-base-line-height-sp, 1.8) !important;
  }
  
  .article-body table{
  width:initial !important;
  }
  
  .meta-category {
    display:none;
  }
  
  table td{
  padding:initial !important;
  border:initial !important;
  }
  
  td, th{
  word-break:initial !important;
  }

h3{
margin-top:30px;
}

.length-result{
  margin:20px 0 0 10px;
}

.Accordion {
    /*margin: 3em auto;
    max-width: 60vw;*/
    width: 100%;
    margin:5px 0 0 0;
  }
  .toggle {
  display: none;
  }
  .option {
  position: relative;
  margin-bottom: 1em;
  background: #f3f3f3;
  }
  .title,
  .content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
  }
  .title {
  /*border: solid 1px #ccc;*/
  padding: 1em;
  display: block;
  color: #111;
  font-weight: bold;
  }
  .title::after,
  .title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #111;
    transition: all 0.3s;
  }
  .title::after {
    transform: rotate(90deg);
  }
  .content {
    max-height: 0;
    overflow: hidden;
  }
  .toggle:checked + .title + .content {
  max-height: 1500px;
  transition: all 1.5s;
  }
  .toggle:checked + .title::before {
  transform: rotate(90deg) !important;
  }