@media (min-width: 769px) {

  main.quality {

  }
  .quality #kitchen,
  .quality #security {
    padding-top: 60px;
  }

  main.quality #page_tab {
    padding: 60px 0 10px;
  }
  main.quality #page_tab ul {
    display: flex;
    gap: 10px;
  }
  main.quality #page_tab ul li {
    list-style: none;
    padding: 1em 0;
    width: calc(50% - 5px);
    text-align: center;
    border: #4b4945 solid 1px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
  }
  main.quality #page_tab ul li.active {
    color: #fff;
    background-color: #4b4945;
    cursor: unset;
    pointer-events: none;
  }

  main.quality ul.contents_tab {
    display: flex;
    gap: 10px;
  }
  main.quality ul.contents_tab li {
    list-style: none;
    width: calc(25% - 5px);
    border: #4b4945 solid 1px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
  }
  main.quality ul.contents_tab li.active {
    color: #fff;
    background-color: #4b4945;
    cursor: unset;
    pointer-events: none;
  }
  main.quality ul.contents_tab li a {
    display: block;
    padding: 1em 0;
    font-size: .8em;
    text-align: center;
    color: #4b4945;
  }
  main.quality ul.contents_tab li.active a {
    color: #fff;
  }

  main.quality h2.ttl {
    padding-top: 40px;
    font-weight: normal;
    line-height: 3rem;
    border-bottom: #000 solid 1px
  }
  main.quality h2.ttl + p {
    font-size: .9em;
  }
  main.quality h2.ttl + p span {
    display: block;
    font-size: 80%;
    text-align: right;
  }
  

  main.quality ol {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 100px;
    padding: 0;
  }
  main.quality #storage ol.storage {
    margin-bottom: unset;
  }

  /* main.quality section#facility:not(.active),
  main.quality section#safety:not(.active) {
    display: none;
  }
  main.quality section#facility.active,
  main.quality section#safety.active {
    display: block;
  } */

  main.quality ol li {
    list-style: none;
    width: calc(33.33% - 20px);
  }
  main.quality ol li.w1 {
    width: 100%;
  }
  main.quality ol li.w2 {
    width: calc(66.66% - 10px)
  }
  main.quality ol li.w15 {
    width: calc(50% - 15px)
  }
  main.quality #storage ol.walldoor li:first-child {
    position: relative;
  }
  main.quality #storage ol.walldoor li:first-child::after {
    content: "▶";
    position: absolute;
    right: -30px;
    top: 50%;
    width: 30px;
    font-size: 1.2rem;
    text-align: center;
    color: #4c4946;
    transform: translateY(-50%);
  }
  main.quality #security ol li:nth-child(2) {
    align-self: flex-end;
  }

  main.quality ol li img {
    display: block;
  }
  main.quality ol li img:nth-child(n+2) {
    /* padding-top: 1em; */
  }
  main.quality ol #structure li:first-child img {
    margin-left: -20%;
    width: 120%;
  }

  main.quality ol li p.name {
    margin-bottom: .2em;
    padding: .5em 0;
    font-size: .9em;
    line-height: 1.2em;
  }
  main.quality #kitchen ol li p.name {
    height: 2em;
  }
  main.quality ol li p.explanation {
    font-size: .8em;
  }
  main.quality ol li p.explanation span {
    display: inline-block;
    font-size: 80%;
  }

  main.quality #support .pas {

  }
  main.quality #support h2 + p {
    margin-top: 2em;
    font-size: 1.2em;
  }
  main.quality #support .pas h3 {
    padding: .4em 0;
    font-weight: normal;
    text-align: center;
    line-height: 1em;
    border: #666 solid 1px;
  }
  main.quality #support .pas h3 + p,
  main.quality #support .smooth-e h3 + p {
    padding: .5em 0;
    font-size: .8em;
    text-align: justify;
    /* text-indent: -.5em; */
  }

  main.quality #support .ground,
  main.quality #support .smooth-e {
    padding: 20px;
  }
  main.quality #support .ground h3,
  main.quality #support .smooth-e h3 {
    position: relative;
    padding-bottom: .5em;
    font-weight: normal;
    border-bottom: 1px solid #4c4946;
  }
  main.quality #support .ground h3 img,
  main.quality #support .smooth-e h3 img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    width: auto;
    height: 30px;
  }
  main.quality #support .ground ol {
    margin-bottom: unset;
  }
  main.quality #support .ground ol li figure {
    margin: unset;
  }
  main.quality #support .ground ol li figure figcaption {
    margin:.5em 0 1em;
    font-size: 60%;
  }

}


@media (max-width: 768px) {

  main.quality {

  }
  .quality #kitchen,
  .quality #security {
    padding-top: 30px;
  }

  main.quality #page_tab {
    padding: 20px 0 10px;
  }
  main.quality #page_tab ul {
    display: flex;
    gap: 10px;
  }
  main.quality #page_tab ul li {
    list-style: none;
    padding: 1em 0;
    width: calc(50% - 5px);
    font-size: .9em;
    text-align: center;
    border: #4b4945 solid 1px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
  }
  main.quality #page_tab ul li.active {
    color: #fff;
    background-color: #4b4945;
    cursor: unset;
    pointer-events: none;
  }

  main.quality ul.contents_tab {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  main.quality ul.contents_tab li {
    list-style: none;
    width: calc(50% - 7px);
    border: #4b4945 solid 1px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
  }
  main.quality ul.contents_tab li.active {
    color: #fff;
    background-color: #4b4945;
    cursor: unset;
    pointer-events: none;
  }
  main.quality ul.contents_tab li a {
    display: block;
    padding: .5em 0;
    font-size: .8em;
    text-align: center;
    color: #4b4945;
  }
  main.quality ul.contents_tab li.active a {
    color: #fff;
  }

  main.quality h2.ttl {
    /* padding-top: 40px; */
    font-weight: normal;
    line-height: 3rem;
    border-bottom: #000 solid 1px
  }
  main.quality h2.ttl + p {
    font-size: .9em;
  }
  main.quality h2.ttl + p span {
    display: block;
    font-size: 80%;
    text-align: right;
  }
  

  main.quality ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0;
  }
  main.quality #storage ol.storage {
    margin-bottom: unset;
  }

  /* main.quality section#facility:not(.active),
  main.quality section#safety:not(.active) {
    display: none;
  }
  main.quality section#facility.active,
  main.quality section#safety.active {
    display: block;
  } */

  main.quality ol li {
    list-style: none;
    width: calc(50% - 10px);
  }
  main.quality ol li.w1 {
    width: 100%;
  }
  main.quality ol li.w2 {
    /* width: calc(66.66% - 5px); */
    width: 100%;
  }
  main.quality ol li.w15 {
    /* width: calc(50% - 15px); */
    width: 100%;
  }
  main.quality #structure ol li:first-child {
    width: 100%;
  }
  main.quality #powderroom ol li:nth-child(2),
  main.quality #bathroom ol li:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  main.quality #powderroom ol li:nth-child(2) > div,
  main.quality #bathroom ol li:nth-child(2) > div {
    width: calc(50% - 5px);
  }

  main.quality #storage ol.walldoor li:first-child {
    position: relative;
  }
  main.quality #storage ol.walldoor li:first-child::after {
    content: "▼";
    position: relative;
    left: 50%;
    bottom: -5px;
    width: 30px;
    font-size: 1.2rem;
    text-align: center;
    color: #4c4946;
    transform: translateX(-50%);
  }
  main.quality #security ol li:nth-child(2) {
    /* align-self: flex-end; */
  }

  main.quality ol li img {
    display: block;
  }
  main.quality ol li img:nth-child(n+2) {
    /* padding-top: 1em; */
  }
  main.quality ol #structure li:first-child img {
    margin-left: -20%;
    width: 120%;
  }

  main.quality ol li p.name {
    margin-bottom: .2em;
    padding: .5em 0;
    font-size: .9em;
    line-height: 1.2em;
  }
  main.quality #kitchen ol li p.name {
    height: 2em;
  }
  main.quality ol li p.explanation {
    font-size: .8em;
  }
  main.quality ol li p.explanation span {
    display: inline-block;
    font-size: 80%;
  }

  main.quality #support .pas {

  }
  main.quality #support h2 + p {
    margin-top: 2em;
    font-size: 1em;
  }
  main.quality #support .pas h3 {
    padding: .4em 0;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    line-height: 1em;
    border: #666 solid 1px;
  }
  main.quality #support .pas h3 + p,
  main.quality #support .smooth-e h3 + p {
    padding: .5em 0;
    font-size: .8em;
    text-align: justify;
    /* text-indent: -.5em; */
  }

  main.quality #support .ground,
  main.quality #support .smooth-e {
    /* padding: 20px; */
  }
  main.quality #support .ground h3,
  main.quality #support .smooth-e h3 {
    position: relative;
    padding-bottom: .5em;
    font-weight: normal;
    border-bottom: 1px solid #4c4946;
  }
  main.quality #support .ground h3 img,
  main.quality #support .smooth-e h3 img {
    margin-top: 10px;
    width: auto;
    height: 30px;
  }
  main.quality #support .ground ol {
    margin-bottom: unset;
  }
  main.quality #support .ground ol li figure {
    margin: unset;
  }
  main.quality #support .ground ol li figure figcaption {
    margin:.5em 0 1em;
    font-size: 60%;
  }

}