div.index_table01 {
    margin: 0 0 0 20px;
    max-width: 680px;
}

table.index01 {
    width: 332px;
    float: left;
}

table.index01 th {
    text-align: left;
}

table.index01 td {
    padding: 10px 20px 25px 10px;
}

table.index02 {
    width: 299px;
    float: right;
}

table.index02 thead th {
    padding: 0 0 15px;
    text-align: center;
}

table.index02 tbody td div {
    border: 1px solid #CCC;
    border-top: none;
    padding: 5px 10px;
}

table.petBorder {
    border: 1px solid #CCC;
}

table.petBorder td {
    padding: 10px;
}

.public-pet-qa .content table{
  width: 100%;
}

.public-pet-qa .content table.qa_inner td table td img {
  max-width: 557px;
  width: 100%;
}

#bottomNavi {
    margin: 90px 0 0;
    height: 30px;
    position: relative;
}

#bottomNavi li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bottomNavi .back {
    position: absolute;
    left: 0px;
    top: 0px;
}

#bottomNavi .next {
    position: absolute;
    right: 0px;
    top: 0px;
}

#contents div.procedure ol {
    max-width: 650px;
    margin: 0 auto;
    list-style: none;
}

#contents div.procedure ol li {
    padding-top: 10px;
    clear: both;
    background: url(/sites/default/files/public/pet/images/arrow.gif) 130px bottom no-repeat;
}

#contents div.procedure ol li div {
    float: right;
    max-width: 257px;
    padding: 10px 0;
    width: 35%;
}

#contents div.procedure ol li.step03 {
    padding-bottom: 20px;
}

#contents div.procedure ol li.step04 {
    padding-bottom: 30px;
}

#contents div.procedure ol li {
    padding-top: 10px;
    clear: both;
    background: url(/sites/default/files/public/pet/images/arrow.gif) 130px bottom no-repeat;
}

#contents div.procedure ol li.step07 {
    background: none;
}

#contents li.step01 {
    height: 137px;
}

#contents li.step02 {
    height: 177px;
}

#contents li.step03 {
    height: 150px;
}

#contents li.step04 {
    height: 130px;
}

#contents li.step05 {
    height: 162px;
}

#contents li.step06 {
    height: 175px;
}

#contents li.step07 {
    height: 212px;
}

table.qa_outer {
    max-width: 680px;
    margin: 0 auto 5px;
}

table.qa_outer td {
    padding: 1px;
}

table.qa_inner {
    width: 100%;
}

table.qa_inner th {
    font-weight: bold;
    color: #4ea2cf;
}

table.qa_inner th, table.qa_inner td {
    text-align: left;
    padding: 8px;
}

table.qa_inner td th {
    width: 30px;
}

table.qa_inner td th, table.qa_inner td td {
    padding: 0px;
    vertical-align: top;
}

table.qa_inner img {
    margin-right: 5px;
}

.p_read {
    margin: 1em 25px;
    padding: 0;
}

table.panf_table {
    margin-left: 25px;
}

table.panf_table h4 {
    font-size: 16px;
    font-weight: bold;
}

.margin_b50 {
    margin-bottom: 50px;
}

table.panf_tabmini {
    border-top: 1px dotted #666;
    border-bottom: 1px dotted #666;
    margin: 10px 0;
}

table.panf_tabmini th, table.panf_tabmini td {
    padding: 8px;
}

div.dott{
    max-width: 580px;
    background: url(/sites/default/files/public/pet/images/dotted.gif) #fff repeat-x;
    margin: 25px
}

.public-pet-index .field--name-body > table {
  margin-left: 10px;
  width: 100%;
  max-width: 680px;
}

.public-pet-petct section.col-sm-9 .content img {
  display: block;
  margin: 10px auto;
}

.public-pet-info .content table {
  max-width: 580px;
  width: 100%;
}

.public-pet-info .content table[width="580"] td {
  word-break: break-all;
}
#contents div.procedure ol li p {
  float: left;
  width: 65%;
  text-indent: -25px;
}

p.ptop {
    margin: 0 20px 30px 0;
    clear: both;
    text-align: right;
}

p.ptop a {
    display: inline-block;
    background-image: url(../../../images/public/icon_arrowtop.gif);
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0 0 0 12pt;
    clear: both;
    text-decoration: none;
}

.public-pet-movie .view-header #toptitle div img {
  width: 100%;
}

.public-pet-movie .view-header #menu {
  text-align: center;
}

.public-pet-movie .view-header #menu ul {
  padding-left: 0;
  margin: 30px 0 20px;
}

.public-pet-movie .view-header #menu ul li {
    display: inline-table;
    width: 165px;
    height: 45px;
    background-color: #20aee5;
    line-height: 150%;
    text-align: center;
    margin-right: 1px;
    margin-bottom: 5px;
    vertical-align: top;
}

.public-pet-movie .view-header #menu ul li a {
    display: table-cell;
    width: 100%;
    height: 45px;
    color: #FFFFFF;
    vertical-align: middle;
}

.public-pet-movie .view-header #menu ul li a:hover {
    background-color: #d3effa;
    color: #20aee5;
}

.public-pet-movie .view-content .cols-1 .views-field-title h4 {
  color: #20aee5;
}

@media screen and (max-width: 768px) {
  .p_read {
    margin: 1em auto;
    max-width: 580px;
  }

  .public-pet-index table {
    width: 100%;
  }

  .public-pet-info .content table[width="580"] > tbody > tr > td {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .public-pet-info table.panf_table > tbody > tr {
    display: flex;
    flex-direction: column-reverse;
  }

  div.index_table01 {
    margin: 0;
  }

  table.index01 {
    max-width: 332px;
    float: none;
  }

  table.index01 img {
    width: 100%;
  }

  table.index02 {
    max-width: 299px;
    float: none;
  }
  table.petBorder td {
    width: 50%;
  }

  #contents div.procedure ol li div {
    width: 100%;
    float: none;
    margin: 0 auto;
  }

  #contents div.procedure ol li p {
    text-align: center;
    float: none;
    width: 100%;
  }

  #contents div.procedure ol li {
    background-position-x: center;
  }

  #contents div.procedure ol {
    width: fit-content;
    margin: 0 auto;
  }

  #contents div.procedure ol li {
    height: auto;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
  }

  .public-pet-index .field--name-body > table {
    margin-left: 0;
  }

}