@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*ヘッダー*/
/*メイン*/
.u-fade-type-up {
  transform: translateY(50px);
  opacity: 0; }

.u-fade-type-up.is-active {
  transition: .6s;
  transform: translateY(0);
  opacity: 1; }

.is-active .u-fade-type-up {
  transition: .6s;
  transform: translateY(0);
  opacity: 1; }
  .is-active .u-fade-type-up:nth-child(2) {
    transition-delay: .4s; }

#h1_back {
  width: 100%;
  background-image: url("../img/about/top_img.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  padding: 6em 0; }
  #h1_back h1 {
    width: 50%;
    margin: 0 auto;
    padding: 4em 0;
    background-color: rgba(255, 255, 255, 0.6); }
    #h1_back h1 img {
      width: 425px;
      display: block;
      margin: 0 auto; }

#about {
  margin: 4em auto;
  color: #666; }
  #about .about_top {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #about .about_top .back01 {
      width: 20%; }
      #about .about_top .back01 img {
        width: 100%; }
    #about .about_top .multiple-item {
      width: 70%;
      display: block; }
  #about h2 {
    width: 96%;
    margin: 5em auto 0;
    color: #00aab4;
    font-size: 175%;
    text-align: center; }
  #about .mattress {
    width: 90%;
    margin: 2em 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #about .mattress .back02 {
      width: 20%; }
    #about .mattress .area01 {
      width: 80%; }
  #about p {
    width: 96%;
    margin: 5em auto 0;
    text-align: center; }
  #about figure {
    width: 100%;
    margin: 5em 0 0; }

.back04 {
  width: 100%;
  background-image: url("../img/about/back04.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 8em 0;
  margin: 5em 0 0;
  position: relative; }

#company {
  margin: 0 auto;
  color: #666; }
  #company h2 {
    width: 96%;
    margin: 0 auto;
    color: #00aab4;
    font-size: 175%;
    text-align: center; }
  #company table {
    margin: 2em 0 0;
    width: 100%; }
    #company table tr {
      border-bottom: 1px solid #b0b0b0; }
      #company table tr th {
        width: 20%;
        padding: 0.5em 0;
        text-align: left;
        font-weight: normal;
        vertical-align: top; }
      #company table tr td {
        width: 80%;
        padding: 0.5em 0; }
        #company table tr td a {
          color: #666;
          text-decoration: none; }
          #company table tr td a:hover, #company table tr td a:active {
            color: #666;
            text-decoration: underline; }

.back04_b {
  position: absolute;
  bottom: -94px;
  right: 0;
  width: 195px; }

#access_map {
  margin: 5em auto 0; }
  #access_map h2 {
    width: 96%;
    margin: 0 auto 2em;
    color: #00aab4;
    font-size: 175%;
    text-align: center; }
  #access_map .ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden; }
    #access_map .ggmap iframe, #access_map .ggmap object, #access_map .ggmap embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  #about .about_top, #company, #access_map {
    width: 1280px; }

  /*フッター*/ }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1299px) {
  /*ヘッダー*/
  /*メイン*/
  #about .about_top, #company, #access_map {
    width: 90%; }

  /*フッター*/ }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet1  */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*メイン*/
  #h1_back {
    background-size: cover;
    padding: 3em 0; }
    #h1_back h1 {
      width: 100%; }
      #h1_back h1 img {
        width: 80%; }

  h2 {
    font-size: 150% !important; }

  #about {
    margin: 2em auto;
    color: #666; }
    #about .about_top {
      margin: 0 auto;
      flex-direction: column; }
      #about .about_top .back01 {
        width: 30%;
        margin: 0 0 0 auto; }
        #about .about_top .back01 img {
          width: 100%; }
      #about .about_top .multiple-item {
        width: 90%;
        margin: 0 auto; }
    #about h2 {
      margin: 2.5em auto 0;
      width: 96%; }
    #about .mattress {
      width: 90%;
      margin: 2em 0 0 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: row-reverse;
      align-items: flex-end; }
      #about .mattress .back02 {
        width: 20%; }
      #about .mattress .area01 {
        width: 80%; }
    #about figure {
      margin: 2.5em 0 0; }

  .back04 {
    background-size: cover;
    padding: 4em 0;
    margin: 2.5em 0 0; }

  #company {
    margin: 0 auto;
    color: #666; }
    #company h2 {
      width: 96%;
      margin: 0 auto;
      color: #00aab4;
      font-size: 175%;
      text-align: center; }
    #company table {
      margin: 2em 0 0;
      width: 100%; }
      #company table tr {
        border-bottom: 1px solid #b0b0b0; }
        #company table tr th {
          width: 25%; }
        #company table tr td {
          width: 75%; }

  .back04_b {
    position: absolute;
    bottom: -95px;
    right: 0;
    width: 97.5px; }

  #access_map {
    width: 100%;
    margin: 8em 0 0; }
    #access_map .ggmap {
      padding-bottom: 86.25%; }

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