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

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

      .flex{
        display: flex;
      }

      .flex-item{
        font-size:120%;
      }

      .flex-item:nth-child(1){
        width: 25%;
        border:solid 1px #ddd;
        padding:15px;
      }

      .flex-item:nth-child(2){
        width: 45%;
        border:solid 1px #ddd;
        padding:15px;
      }

      .input-text {
        height: 25px;
        font-size: 16px;
        flex-grow: 0.5;
        min-width: 30px;
        max-width: 100px;
        padding:0 0 0 10px;
      }

      .flex-sample{
        display: flex;
      }

      .flex-sample-item:nth-child(1){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(2){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(3){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(4){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .error-message {
        color: red;
        font-size: 0.8em;
        margin-left:32px;
      }

      .answer-box-parent{
        margin:20px 0 0 0;
      }
          
      .answer-box-child{
        width: 76%;
        height: 170px;
        border:solid 1px #ccc;
        border-radius: 5px;
        background-color: #fdfdfd;
        font-size:30px;
        padding:15px 0 0 15px;
        line-height: 50px;
      }
    
    }
    
    /**** スマホ版 ****/
    @media screen and (max-width: 600px) {
              
      .flex{
        display: flex;
      }

      .flex-item{
        font-size:120%;
      }

      .flex-item:nth-child(1){
        width: 30%;
        border:solid 1px #ddd;
        padding:15px;
      }

      .flex-item:nth-child(2){
        width: 70%;
        border:solid 1px #ddd;
        padding:15px;
      }

      .input-text {
        height: 25px;
        font-size: 16px;
        flex-grow: 0.5;
        min-width: 20px;
        max-width: 70px;
        padding:0 0 0 10px;
      }

      .flex-sample{
        display: flex;
      }

      .flex-sample-item:nth-child(1){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(2){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(3){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }

      .flex-sample-item:nth-child(4){
        width: 20%;
        border:solid 1px #ddd;
        padding:5px;
      }
    }

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

  .cont{
    padding:0 20px 0 10px;
  }

    .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;
  }

  table.plan{
    border:solid 1px #ddd;
    padding:1px;
  }

  td.plan{
    border:solid 1px #ddd;
    padding:5px;
  }

  .ec-wrap{
    max-width: 980px;
    margin: 45px 0 56px 0!important;
    color: #1f2937;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  }
  .ec-head{ margin-bottom: 18px; }
  .ec-h2{
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin: 0 0 10px;
  }
  .ec-lead{
    margin: 0;
    line-height: 1.75;
    color: #374151;
  }

  /* ===== Grid / Cards ===== */
  .ec-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }
  @media (min-width: 860px){
    .ec-grid{ grid-template-columns: 1fr 1fr; }
  }
  .ec-card{
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 16px 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }
  .ec-h3{
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 10px;
  }
  .ec-text{
    margin: 0 0 10px;
    line-height: 1.75;
    color: #374151;
  }
  .ec-muted{ color: #6b7280; }
  .ec-strong{ font-weight: 800; }

  /* ===== Formula / Example ===== */
  .ec-formula, .ec-example, .ec-mini, .ec-callout{
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f9fafb;
    margin: 10px 0 12px;
  }
  .ec-formula-title, .ec-mini-title{
    font-size: .85rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
  }
  .ec-code{
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .92rem;
    line-height: 1.6;
    color: #111827;
    overflow-x: auto;
    white-space: nowrap;
  }
  .ec-inline{
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .92em;
  }

  /* ===== List ===== */
  .ec-list{
    margin: 8px 0 0;
    padding-left: 18px;
    color: #374151;
    line-height: 1.75;
  }
  .ec-list li{ margin: 6px 0; }

  /* ===== Badges ===== */
  .ec-badge-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 10px;
  }
  .ec-badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: .9rem;
    font-weight: 700;
    color: #111827;
  }
  .ec-badge-soft{
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
  }

  /* ===== Table ===== */
  .ec-table-wrap{
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin: 10px 0 10px;
  }
  .ec-table{
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
  }
  .ec-table thead th{
    text-align: left;
    padding: 10px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
    font-weight: 800;
  }
  .ec-table tbody td{
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
    color: #374151;
  }
  .ec-table tbody tr:last-child td{ border-bottom: none; }

  /* ===== Check list ===== */
  .ec-check{
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
  }
  .ec-check li{
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
    line-height: 1.65;
    color: #374151;
  }
  .ec-check li:last-child{ border-bottom: none; }
  .ec-check-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #111827;
    margin-top: 7px;
    flex: 0 0 auto;
  }

  /* ===== FAQ ===== */
  .ec-faq{ margin-top: 22px; }
  .ec-q{
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    padding: 0;
    margin: 10px 0;
    overflow: hidden;
  }
  .ec-q-title{
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 800;
    color: #111827;
    background: #f9fafb;
    list-style: none;
  }
  .ec-q-title::-webkit-details-marker{ display: none; }
  .ec-q-title:after{
    content: "＋";
    float: right;
    color: #6b7280;
    font-weight: 900;
  }
  details[open] .ec-q-title:after{ content: "－"; }
  .ec-a{
    padding: 12px 14px 14px;
    background: #ffffff;
  }