@charset "UTF-8";
@import url("base.css");
@import url("lightbox.min.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*ヘッダー*/
/*メイン*/
#m_top {
  width: 100%;
  position: relative; }
  #m_top h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 250%;
    color: #fff;
    text-shadow: 0px 0px 10px black; }

#clean_top {
  width: 80%;
  margin: 5em auto 0; }
  #clean_top h2 {
    font-size: 250%;
    color: #182d7b;
    text-align: center;
    margin: 1em 0 0.5em; }
  #clean_top .clean_images {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #clean_top .clean_images figure {
      width: 48%; }
  #clean_top p {
    text-align: center;
    margin: 2em auto 0; }
  #clean_top #reason {
    width: calc(80% - 240px);
    position: relative;
    margin: 6em auto 2em 2.5%;
    background-color: #2eb6aa;
    padding: 2em 220px 2em 20px;
    border-radius: 10px;
    color: #fff; }
    #clean_top #reason h3 {
      font-size: 187%; }
    #clean_top #reason dl {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between; }
      #clean_top #reason dl dt {
        position: relative;
        width: 180px;
        height: 180px;
        background-color: #363636;
        border-radius: 50%;
        font-size: 120%;
        font-weight: bold; }
        #clean_top #reason dl dt span {
          position: absolute;
          display: inline-block;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          width: 180px;
          text-align: center; }
      #clean_top #reason dl dd {
        width: calc(100% - 200px);
        font-size: 120%; }
    #clean_top #reason figure {
      position: absolute;
      top: 50%;
      right: -200px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      width: 400px; }

#room {
  width: 80%;
  margin: 5em auto 0; }
  #room h2 {
    font-size: 250%;
    color: #182d7b;
    text-align: center;
    margin: 1em 0 0.5em; }
  #room .room_inner {
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #room .room_inner figure {
      width: 48%; }
  #room p {
    text-align: center;
    margin: 1em auto 0; }
  #room ul {
    width: 70%;
    margin: 5em auto 0; }
    #room ul li {
      width: 100%; }
      #room ul li:nth-child(n+2) {
        margin: 2em 0 0; }
      #room ul li h3 {
        font-size: 187%;
        color: #182d7b;
        text-align: center; }
      #room ul li .f_inner {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        #room ul li .f_inner figure {
          width: 48%;
          margin: 2em 0 0; }

.back01 {
  background-color: rgba(54, 54, 54, 0.1);
  padding: 2em 0;
  margin: 5em 0 0; }

#clean_tray {
  width: 80%;
  margin: 0 auto; }
  #clean_tray h2 {
    font-size: 250%;
    color: #182d7b;
    text-align: center;
    margin: 1em 0 0.5em; }
  #clean_tray ol li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #clean_tray ol li:nth-child(n+2) {
      margin: 4em 0 0; }
    #clean_tray ol li dl {
      width: 66%; }
      #clean_tray ol li dl dt {
        font-size: 187%;
        font-weight: bold;
        color: #2eb6aa; }
      #clean_tray ol li dl dd {
        margin: 0.5em 0 0; }
    #clean_tray ol li figure {
      width: 30%; }
    #clean_tray ol li .photos {
      width: 100%;
      margin: 2em 0 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end; }
      #clean_tray ol li .photos figure {
        width: 30%;
        margin: 0 0 0 2em; }

#product {
  width: 80%;
  margin: 5em auto 0; }
  #product h2 {
    font-size: 250%;
    color: #182d7b;
    text-align: center;
    margin: 1em 0 0.5em; }
  #product ul {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #product ul li {
      width: 31.333%; }
      #product ul li figure {
        width: 80%;
        margin: 0 auto 1em; }
      #product ul li h3 {
        font-size: 187%;
        font-weight: bold;
        color: #2eb6aa;
        text-align: center; }
      #product ul li p a {
        display: block;
        background-color: #182d7b;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        text-align: center;
        width: 150px;
        padding: 0.25em 0;
        border-radius: 6px;
        margin: 2em auto 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
        #product ul li p a:hover, #product ul li p a:active {
          background-color: #1A3390; }

#bottom_map {
  width: 80%;
  margin: 5em 0 0;
  background-color: #b2b2b2;
  padding: 4em 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  #bottom_map li {
    width: 48%; }
    #bottom_map li iframe {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto; }
    #bottom_map li dl {
      margin: 0.5em 0 0; }
      #bottom_map li dl dt {
        color: #fff;
        font-size: 130%;
        font-weight: bold; }
      #bottom_map li dl dd i {
        color: #fff;
        font-style: normal;
        background-color: #2eb6aa;
        width: 50px;
        border-radius: 5px;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        line-height: 1;
        padding: 0.2em 0;
        margin: 0 5px 0 0; }
      #bottom_map li dl dd a {
        color: #363636;
        text-decoration: none; }
        #bottom_map li dl dd a:hover, #bottom_map li dl dd a:active {
          color: #363636;
          text-decoration: underline; }

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc02 */
@media screen and (min-width: 2160px) and (max-width: 2200px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* pc03 */
@media screen and (min-width: 1366px) and (max-width: 1400px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  #clean_top {
    width: 1280px; }

  #clean_tray {
    width: 1280px; }

  /*フッター*/ }
@media only screen and (min-width: 1300px) and (max-width: 1450px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #clean_top h2 {
    font-size: 250%;
    color: #182d7b; }
  #clean_top #reason {
    width: 58%;
    padding: 1em 150px 1em 10px; }
    #clean_top #reason h3 {
      font-size: 187%; }
    #clean_top #reason dl dt {
      width: 150px;
      height: 150px; }
      #clean_top #reason dl dt span {
        width: 150px; }
    #clean_top #reason dl dd {
      width: calc(100% - 180px);
      font-size: 100%; }
    #clean_top #reason figure {
      width: 300px; }

  #clean_tray h2 {
    font-size: 250%;
    color: #182d7b; }
  #clean_tray ol li dl {
    width: 61%; }
  #clean_tray ol li figure {
    width: 35%; }
  #clean_tray ol li .photos figure {
    width: 35%;
    margin: 0 0 0 2em; }

  /*フッター*/ }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #m_top {
    width: 100%;
    margin: 80px 0 0; }
    #m_top h1 {
      font-size: 200%; }

  #clean_top h2 {
    font-size: 180%; }
  #clean_top #reason {
    width: 96%;
    padding: 1em 2% 1em 2%; }
    #clean_top #reason h3 {
      font-size: 187%; }
    #clean_top #reason dl dt {
      width: 150px;
      height: 150px; }
      #clean_top #reason dl dt span {
        width: 150px; }
    #clean_top #reason dl dd {
      width: calc(100% - 160px);
      font-size: 100%; }
    #clean_top #reason figure {
      display: none; }

  #room {
    width: 90%; }
    #room h2 {
      font-size: 180%; }
    #room .room_inner {
      width: 60%; }
    #room ul {
      width: 90%; }

  #clean_tray h2 {
    font-size: 180%; }
  #clean_tray ol li dl {
    width: 61%; }
    #clean_tray ol li dl dt {
      font-size: 156%; }
  #clean_tray ol li figure {
    width: 35%; }
  #clean_tray ol li .photos figure {
    width: 35%;
    margin: 0 0 0 2em; }

  #product {
    width: 90%; }
    #product h2 {
      font-size: 180%; }
    #product ul {
      width: 100%; }
      #product ul li h3 {
        font-size: 156%; }

  #bottom h2 {
    font-size: 130%; }
    #bottom h2 span {
      font-size: 130%; }
    #bottom h2::before {
      margin-left: -30px;
      border: 30px solid transparent;
      border-top: 30px solid #363636; }

  #bottom_map {
    width: 90%;
    padding: 4em 5%; }

  /*フッター*/ }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #m_top {
    width: 100%;
    margin: 80px 0 0; }
    #m_top h1 {
      font-size: 200%; }

  #clean_top {
    width: 90%;
    margin: 2.5em auto 0; }
    #clean_top h2 {
      font-size: 160%; }
    #clean_top .clean_images {
      width: 90%;
      flex-direction: column; }
      #clean_top .clean_images figure {
        width: 90%;
        margin: 1em auto 0; }
    #clean_top #reason {
      width: 96%;
      position: relative;
      margin: 2em auto;
      background-color: #2eb6aa;
      padding: 2em 2%; }
      #clean_top #reason h3 {
        font-size: 156%;
        text-align: center;
        margin: 0 0 0.5em; }
      #clean_top #reason dl {
        flex-direction: column; }
        #clean_top #reason dl dt {
          position: relative;
          width: 96%;
          padding: 1em 2%;
          height: auto;
          background-color: #363636;
          border-radius: 10px;
          font-size: 120%;
          font-weight: bold; }
          #clean_top #reason dl dt span {
            position: static;
            display: inline-block;
            left: 0;
            top: 0;
            -webkit-transform: translateY(0%);
            transform: translateY(0%);
            width: 100%;
            text-align: center; }
            #clean_top #reason dl dt span br {
              display: none; }
        #clean_top #reason dl dd {
          width: 96%;
          margin: 1em 0 0;
          font-size: 100%; }
      #clean_top #reason figure {
        display: none; }

  #room {
    width: 90%;
    margin: 2.5em auto 0; }
    #room h2 {
      font-size: 160%; }
    #room .room_inner {
      width: 80%; }
    #room ul {
      width: 90%;
      margin: 2.5em auto 0; }
      #room ul li {
        width: 100%; }
        #room ul li:nth-child(n+2) {
          margin: 2em 0 0; }
        #room ul li h3 {
          font-size: 187%;
          color: #182d7b;
          text-align: center; }
        #room ul li .f_inner {
          flex-direction: column; }
          #room ul li .f_inner figure {
            width: 100%; }

  .back01 {
    background-color: rgba(54, 54, 54, 0.1);
    padding: 2em 0;
    margin: 2.5em 0 0; }

  #clean_tray {
    width: 90%; }
    #clean_tray h2 {
      font-size: 160%; }
    #clean_tray ol li {
      width: 100%;
      flex-direction: column; }
      #clean_tray ol li:nth-child(n+2) {
        margin: 2em 0 0; }
      #clean_tray ol li dl {
        width: 100%; }
        #clean_tray ol li dl dt {
          font-size: 130%; }
        #clean_tray ol li dl dd {
          margin: 0.5em 0 0; }
      #clean_tray ol li figure {
        width: 100%;
        margin: 1em 0 0; }
      #clean_tray ol li .photos {
        width: 100%;
        margin: 0;
        flex-direction: column; }
        #clean_tray ol li .photos figure {
          width: 100%;
          margin: 2em 0 0; }

  #product {
    width: 90%;
    margin: 2.5em auto 0; }
    #product h2 {
      font-size: 160%; }
    #product ul {
      width: 100%;
      margin: 0 auto;
      flex-direction: column; }
      #product ul li {
        width: 100%; }
        #product ul li:nth-child(n+2) {
          margin: 2em 0 0; }
        #product ul li figure {
          width: 70%;
          margin: 0 auto 1em; }
        #product ul li h3 {
          font-size: 130%;
          font-weight: bold;
          color: #2eb6aa;
          text-align: center; }
        #product ul li p a {
          margin: 0.5em auto 0; }

  #bottom_map {
    width: 90%;
    margin: 2.5em 0 0;
    padding: 2em 5%; }
    #bottom_map li {
      width: 100%; }
      #bottom_map li:nth-child(n+2) {
        margin: 1em 0 0; }
      #bottom_map li dl dt {
        font-size: 120%; }

  /*フッター*/ }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }