@charset "UTF-8";
@import url(./common.css);
/*==================================================================*/
/* style css　*/
/*==================================================================*/
#contents {
  margin-bottom: 0;
}

/* -------------------------------------------- */
/* mainvisual */
/* -------------------------------------------- */
@keyframes anime {
  0% {
    opacity: 100;
  }

  100% {
    opacity: 100;
    transform: scale(1.1);
  }
}

#mainvisual {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#mainvisual .mainvisual-in {
  height: 100vh;
  background: url("/image/mainvisual.jpg") no-repeat center center;
  background-size: cover;
  animation-name: anime;
  animation-delay: 0;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
#mainvisual .inblock .catch-area {
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
}
#mainvisual .inblock .catch-area h1 {
  margin-bottom: 1em;
  font-size: 3em;
  color: #fff;
  font-feature-settings: "palt";
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
#mainvisual .inblock .catch-area .logo img {
  max-width: 270px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------- */
/* intro */
/* -------------------------------------------- */
.intro {
  padding: 5em 0 0;
  background: url("/image/gold_left.png") no-repeat left top, linear-gradient(to top, #ededed 0%, #ededed 5%, #ffffff 30%);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.intro .text-area {
  width: 40%;
  margin-bottom: 5em;
}
.intro .text-area .s-title {
  margin-bottom: 2em;
  font-size: 1.8em;
}
.intro .text-area .s-title span {
  display: block;
}
.intro .text-area .text {
  margin-bottom: 3em;
}
.intro .text-area .base-btn {
  text-align: right;
}
.intro .photo {
  width: 50%;
  text-align: right;
}
.intro .photo img {
  vertical-align: bottom;
}

/* -------------------------------------------- */
/* product */
/* -------------------------------------------- */
.product {
  padding: 7em 0;
  background: url("/common_img/cloud_right.png") no-repeat right top, url("/common_img/cloud_left.png") no-repeat left bottom;
}
.product .product-in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 4em;
}
.product .product-in a {
  width: 23%;
  text-decoration: underline;
}
.product .product-in a:hover {
  text-decoration: none;
}
.product .product-in a dl dt .oj-image {
  width: 100%;
  height: 230px;
}
.product .product-in a dl dd {
  text-align: center;
}
.product .base-btn {
  text-align: center;
}

/* -------------------------------------------- */
/* mirai */
/* -------------------------------------------- */
.mirai {
  background: url("/image/product_treat.png") no-repeat right top, url("/image/product_photo.png") no-repeat left top, black;
  padding: 8em 0;
}
.mirai .text {
  width: 55%;
  margin-left: auto;
}
.mirai .text .s-title {
  margin-bottom: 1.5em;
  font-size: 1.8em;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.mirai .text .read {
  margin-bottom: 3em;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.mirai .text .base-btn {
  text-align: right;
}

/* -------------------------------------------- */
/* scene */
/* -------------------------------------------- */
.scene {
  padding: 7em 0;
  background: url("/common_img/bg_scene.jpg") repeat;
  box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.05);
}
.scene .s-title {
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 1.8em;
}
.scene .s-title span {
  display: inline-block;
}
.scene .ex-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3em;
}
.scene .ex-area dl {
  position: relative;
  margin: 0 0.5%;
  max-width: 31.333%;
}
.scene .ex-area dl dd {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
}
.scene .ex-area dl dd span {
  position: relative;
}
.scene .ex-area dl dd span:before {
  position: absolute;
  top: -1.8em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  font-weight: 900;
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  font-size: 1.8em;
}
.scene .ex-area dl.hospital span:before {
  content: "\f0f8";
}
.scene .ex-area dl.school span:before {
  content: "\f549";
}
.scene .ex-area dl.hotel span:before {
  content: "\f594";
}
.scene .scene-in {
  display: flex;
  justify-content: space-between;
}
.scene .scene-in .text {
  width: 45%;
}
.scene .scene-in .text .read {
  margin-bottom: 3em;
}
.scene .scene-in .text .base-btn {
  text-align: right;
}
.scene .scene-in .photo {
  width: 50%;
  text-align: right;
}

/* -------------------------------------------- */
/* catalog */
/* -------------------------------------------- */
.catalog {
  padding: 7em 0;
}
.catalog .base-title {
  margin-bottom: 3em;
}
.catalog .catalog-in {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.catalog .catalog-in .box {
  position: relative;
  width: 25%;
  margin-right: 3em;
  display: flex;
  flex-direction: column;
}
.catalog .catalog-in .box:last-child {
  margin-right: 0;
}
.catalog .catalog-in .box .text-digital {
  position: absolute;
  top: -1.7em;
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  width: 100%;
  text-align: center;
  color: #9e0b0e;
  font-size: 1.1em;
  font-feature-settings: "palt";
}
.catalog .catalog-in .box .photo {
  margin-bottom: .5em;
  text-align: center;
}
.catalog .catalog-in .box dl .c-title {
  position: relative;
  margin-bottom: 1em;
  padding-bottom: .2em;
  font-size: 1.1em;
  text-align: center;
  border-bottom: 1px solid #a11215;
}
.catalog .catalog-in .box dl .c-title:before {
  position: absolute;
  bottom: -3px;
  left: -5px;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a11215;
}
.catalog .catalog-in .box dl .c-title:after {
  position: absolute;
  bottom: -3px;
  right: -5px;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a11215;
}
.catalog .catalog-in .box dl dd {
  margin-bottom: 1em;
  font-size: .9em;
  line-height: 1.4;
}
.catalog .catalog-in .box .catalog-btn {
  margin-top: auto;
}
.catalog .catalog-in .box .catalog-btn a {
  display: block;
  padding: .5em;
  background: #fff2f2;
  border: 1px solid #9e0b0e;
  text-align: center;
  color: #9e0b0e;
  font-size: .9em;
}
.catalog .catalog-in .box .catalog-btn a:after {
  content: "\f518";
  font-weight: 900;
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  padding-left: .5em;
}
.catalog .catalog-in .box .catalog-btn a:hover {
  opacity: .7;
  transition: .3s;
  text-decoration: none;
}
.catalog .catalog-in .box .toi-btn a {
  background: #f6f6f6;
  border: 1px solid black;
  color: #000;
}
.catalog .catalog-in .box .toi-btn a:after {
  content: "\f105";
  font-weight: 900;
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  padding-left: .5em;
}

/* -------------------------------------------- */
/* news */
/* -------------------------------------------- */
.news {
  background: url("/common_img/bg_scene.jpg") repeat;
  box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.05);
}
.news .news-bg {
  padding: 7em 0 5em;
}
.news .news-in {
  padding: 3em 3em 5em 3em;
  background: rgba(255, 255, 255, 0.8);
}
.news .news-in .info-area {
  margin-bottom: 4em;
}
.news .news-in .info-area a {
  margin-bottom: .5em;
}
.news .news-in .info-area a:hover {
  text-decoration: none;
}
.news .news-in .info-area a dl {
  position: relative;
  display: flex;
  padding: 1em;
  border-bottom: 1px solid black;
}
.news .news-in .info-area a dl dt {
  width: 12%;
  margin-right: 3%;
  text-align: center;
}
.news .news-in .info-area a dl dd {
  width: 85%;
  padding-right: 3em;
  text-decoration: underline;
}
.news .news-in .info-area a dl dd:hover {
  text-decoration: none;
}
.news .news-in .info-area a dl:after {
  position: absolute;
  content: "\f105";
  font-weight: 900;
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  border: 1px solid black;
  border-radius: 30px;
  height: 30px;
  width: 30px;
  text-align: center;
  display: inline-block;
  right: 1em;
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
}
.news .news-in .base-btn {
  text-align: center;
}

/* -------------------------------------------- */
/* access */
/* -------------------------------------------- */
.access {
  padding: 7em 0 0;
}
.access .map {
  position: relative;
  padding-bottom: 30%;
  height: 0;
  overflow: hidden;
}
.access .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1025px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  #mainvisual {
    height: 70vh;
  }
  #mainvisual .mainvisual-in {
    height: 70vh;
  }
  #mainvisual .inblock .catch-area h1 {
    font-size: 2.4em;
  }

  /* -------------------------------------------- */
  /* intro */
  /* -------------------------------------------- */
  .intro {
    display: block;
  }
  .intro .text-area {
    width: 90%;
    margin: 0 auto -3em;
  }
  .intro .text-area .s-title {
    margin-bottom: 1em;
  }
  .intro .text-area .s-title span {
    display: inline-block;
  }
  .intro .text-area .base-btn {
    text-align: center;
  }
  .intro .photo {
    width: 70%;
    margin-left: auto;
  }

  /* -------------------------------------------- */
  /* product */
  /* -------------------------------------------- */
  .product {
    padding: 5em 0;
  }
  .product .product-in a {
    width: 24%;
  }
  .product .product-in a dl dt .oj-image {
    height: 200px;
  }
  .product .product-in a dl dd {
    font-size: .9em;
  }

  /* -------------------------------------------- */
  /* mirai */
  /* -------------------------------------------- */
  .mirai {
    background-size: auto,50%;
    padding: 8em 0 3em;
  }
  .mirai .text {
    width: 70%;
  }

  /* -------------------------------------------- */
  /* catalog */
  /* -------------------------------------------- */
  .catalog {
    padding: 7em 0 3em;
  }
  .catalog .catalog-in {
    justify-content: space-between;
  }
  .catalog .catalog-in .box {
    width: 48%;
    margin-bottom: 2em;
    margin-right: 0;
    padding: 2.5em 1.5em;
    border: 10px solid whitesmoke;
  }
  .catalog .catalog-in .box:nth-child(odd) {
    margin-right: 4%;
  }
  .catalog .catalog-in .box .text-digital {
    top: .5em;
  }

  /* -------------------------------------------- */
  /* news */
  /* -------------------------------------------- */
  .news .news-bg {
    background-size: 45%;
  }
  .news .news-in {
    padding: 1.5em 1.5em 2.5em 1.5em;
  }
  .news .news-in .info-area {
    margin-bottom: 3em;
  }
  .news .news-in .info-area a dl dt {
    width: 15%;
    margin-right: 3%;
  }
  .news .news-in .info-area a dl dd {
    width: 82%;
  }
}
/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 769px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  #mainvisual {
    height: 50vh;
  }
  #mainvisual .mainvisual-in {
    height: 50vh;
  }
  #mainvisual .inblock .catch-area h1 {
    font-size: 2em;
  }

  /* -------------------------------------------- */
  /* intro */
  /* -------------------------------------------- */
  .intro .text-area .s-title {
    margin-bottom: 1em;
    font-size: 1.5em;
  }
  .intro .photo {
    width: 80%;
  }

  /* -------------------------------------------- */
  /* product */
  /* -------------------------------------------- */
  .product {
    background-size: 30%;
  }
  .product .product-in {
    margin-bottom: 2em;
  }
  .product .product-in a {
    width: 48%;
  }
  .product .product-in a dl {
    margin-bottom: 1.5em;
  }

  /* -------------------------------------------- */
  /* mirai */
  /* -------------------------------------------- */
  .mirai {
    background-size: 30%,80%;
  }
  .mirai .text {
    width: 100%;
    padding-top: 35%;
  }
  .mirai .text .s-title {
    margin-bottom: 1em;
    font-size: 1.5em;
  }
  .mirai .text .base-btn {
    text-align: center;
  }

  /* -------------------------------------------- */
  /* scene */
  /* -------------------------------------------- */
  .scene {
    padding: 5em 0;
  }
  .scene .s-title {
    margin-bottom: 1em;
    font-size: 1.5em;
  }
  .scene .ex-area {
    margin-bottom: 2em;
  }
  .scene .ex-area dl {
    max-width: 50%;
    margin: 0;
  }
  .scene .ex-area dl dd span:before {
    font-size: 1.6em;
  }
  .scene .scene-in {
    flex-direction: column-reverse;
  }
  .scene .scene-in .photo {
    margin-bottom: 1em;
    width: 100%;
    text-align: center;
  }
  .scene .scene-in .text {
    width: 100%;
  }
  .scene .scene-in .text .base-btn {
    text-align: center;
  }

  /* -------------------------------------------- */
  /* news */
  /* -------------------------------------------- */
  .news .news-bg {
    padding: 7em 0 4em;
    background-size: 45%;
  }
  .news .news-in {
    padding: 1em 1em 2.5em 1em;
  }
  .news .news-in .info-area {
    margin-bottom: 3em;
  }
  .news .news-in .info-area a dl {
    display: block;
    padding: 1em 0.5em;
  }
  .news .news-in .info-area a dl dt {
    width: 100%;
    margin-right: 0;
    text-align: left;
  }
  .news .news-in .info-area a dl dd {
    width: 100%;
    padding-right: 1.8em;
  }
  .news .news-in .info-area a dl:after {
    right: 0;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    font-size: .9em;
  }

  /* -------------------------------------------- */
  /* access */
  /* -------------------------------------------- */
  .access .map {
    padding-bottom: 40%;
  }
}
/*===========================================================================*/
/*  media quary:479px  */
/*===========================================================================*/
@media screen and (max-width: 479px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  #mainvisual {
    margin-bottom: 1em;
  }
  #mainvisual .inblock .catch-area h1 {
    margin-bottom: .5em;
    font-size: 1.6em;
  }
  #mainvisual .inblock .catch-area .logo img {
    max-width: 220px;
  }

  /* -------------------------------------------- */
  /* intro */
  /* -------------------------------------------- */
  .intro {
    padding: 3em 0 0;
    background: url("/image/gold_left.png") no-repeat left top;
    background-size: 50%;
  }
  .intro .text-area {
    margin: 0 auto;
  }
  .intro .text-area .s-title {
    font-size: 1.3em;
  }
  .intro .text-area .text {
    margin-bottom: 2em;
  }
  .intro .photo {
    width: 100%;
  }

  /* -------------------------------------------- */
  /* product */
  /* -------------------------------------------- */
  .product .product-in a dl dt .oj-image {
    height: 150px;
  }

  /* -------------------------------------------- */
  /* mirai */
  /* -------------------------------------------- */
  .mirai {
    background-size: 30%,100%;
  }
  .mirai .text .s-title {
    font-size: 1.3em;
  }

  /* -------------------------------------------- */
  /* scene */
  /* -------------------------------------------- */
  .scene {
    padding: 3em 0;
  }
  .scene .s-title {
    margin-bottom: .5em;
    font-size: 1.3em;
  }
  .scene .ex-area {
    margin-bottom: 0;
  }
  .scene .ex-area dl dd {
    font-size: .9em;
  }

  /* -------------------------------------------- */
  /* catalog */
  /* -------------------------------------------- */
  .catalog .catalog-in {
    display: block;
  }
  .catalog .catalog-in .box {
    width: 100%;
  }

  /* -------------------------------------------- */
  /* access */
  /* -------------------------------------------- */
  .access .map {
    padding-bottom: 80%;
  }
}