@charset "UTF-8";

header {
  height: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 0 3rem;
  z-index: 10;
  transition: all 0.3s ease;
}

@media screen and (max-width: 959px) {
  header {
    padding: 0 2rem;
    height: 8rem;
  }
}

@media screen and (max-width: 767px) {
  header {
    padding: 0 1.5rem;
    height: 5rem;
  }
}

@media screen and (max-width: 320px) {
  header {
    padding: 0 0.5rem 0 1.5rem;
  }
}

.header__logo a {
  display: block;
  width: 15.5rem;
}

@media screen and (max-width: 959px) {
  .header__logo a {
    max-width: 15.5rem;
  }
}

@media screen and (max-width: 767px) {
  .header__logo a {
    max-width: 12rem;
  }
}

.head-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 700;
}

.head-nav>ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.head-nav>ul li {
  margin-right: 1.5rem;
  position: relative;
}

.head-nav>ul li a:hover {
  color: #555;
}

.head-nav .head-btn-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media screen and (max-width: 425px) {
  .head-nav .head-btn-wrap {
    display: none;
  }
}

.head-nav .head-btn {
  display: block;
  height: 4rem;
  margin-left: 0.5rem;
  text-align: center;
  min-width: 20rem;
}

@media screen and (max-width: 767px) {
  .head-nav .head-btn {
    min-width: auto;
  }
}

.head-nav .head-btn a {
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  color: #fff;
  background: #ff9c00;
  border-radius: 5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head-nav .head-btn a:hover {
  color: #fff;
  background: #ffbb00;
}

@media screen and (max-width: 959px) {
  .head-nav {
    width: auto;
  }

  .head-nav>ul {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .head-nav {
    width: auto;
  }

  .head-nav .head-btn {
    height: 3.5rem;
    margin-left: 0.5rem;
  }

  .head-nav .head-btn a {
    padding: 0 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
  }
}
.banner_request_wrap{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 8rem 0 3rem;
}
.banner_request_wrap .banner_request,
.banner_request_wrap .banner_aiddata{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  max-width: 340px;
  height: 4rem;
  background: #fff;
  color: #61b8d0;
  border-radius: 5rem;
  box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
  margin-bottom: 1rem;
}
.banner_request_wrap .banner_aiddata {
  margin-right: 0.5rem;
  color: #2e4f58;
  background: #e4f7fc;
}


@media screen and (max-width: 959px) {
  .banner_request_wrap{  
    padding-right: 7rem;
  }
}
@media screen and (max-width: 767px) {
  .banner_request_wrap{  
    justify-content: center;
    padding: 0;
    flex-direction: column;
  }
  .banner_request_wrap .banner_request,
  .banner_request_wrap .banner_aiddata {
    margin: 0 auto 1rem auto;
  }
}
.item__badge {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  min-width: 2rem;
  width: auto;
  height: 2rem;
  border-radius: 2rem;
  background: rgba(236, 13, 13, 0.8);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  right: -0.7rem;
  top: -0.2rem;
  z-index: 1;
  transition: all 0.6s ease 0.2s;
}

/**
 * ハンバーガー
**/
#nav-drawer {
  width: 3rem;
  height: 2rem;
  margin-left: 2rem;
  display: unset;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display: none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 3rem;
  height: 2rem;
  position: relative;
}

#nav-open span {
  position: absolute;
  height: 1px;
  width: 3rem;
  background: #fff;
  display: block;
  content: "";
  cursor: pointer;
}

#nav-open span::before,
#nav-open span::after {
  position: absolute;
  height: 1px;
  width: 2rem;
  background: #fff;
  display: block;
  content: "";
  cursor: pointer;
  transition: 0.2s;
}

#nav-open span:before {
  bottom: -0.7rem;
}

#nav-open span:after {
  bottom: -1.4rem;
}

#nav-open:hover span,
#nav-open:hover span::before,
#nav-open:hover span:after {
  width: 3rem;
  background: #ff9c00;
}

/*ハンバーガーアイコンをCSSだけで表現*/
/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 90%;
  max-width: 35rem;
  height: 100%;
  padding: 0 4rem 4rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s ease-in-out;
  transform: translateX(105%);
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked~#nav-close {
  display: block;
  opacity: 0.5;
}

#nav-input:checked~#nav-content {
  transform: translateX(0%);
  box-shadow: 0.6rem 0 2.5rem rgba(0, 0, 0, 0.15);
}

#nav-content ul {
  margin-top: 4rem;
}

#nav-content ul li {
  margin: 0;
}

#nav-content ul li a {
  padding: 0.5rem 0;
  font-weight: 500;
  display: block;
}

@media screen and (max-width: 767px) {
  #nav-content {
    max-width: 28rem;
    padding: 0 2rem 2rem;
  }

  #nav-content ul {
    margin-top: 2rem;
  }

  #nav-drawer {
    margin-left: 1.5rem;
  }
}

@media screen and (max-width: 320px) {
  #nav-drawer {
    margin-left: 0.5rem;
  }
}

/**
 * 下部固定ボタン
**/
@media only screen and (min-width: 569px) {
  .bottom-btn {
    display: none;
  }
}

.bottom-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  box-shadow: 0 -2px 1rem 0 rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.bottom-btn>div {
  margin: 0 auto;
}

.bottom-btn .btn-box__2 {
  max-width: 100%;
}

.bottom-btn .btn-box__2 .btn {
  flex-basis: 49%;
  max-width: none;
  margin: 0;
}

footer {
  width: 100%;
  background-color: #505050;
  padding: 3rem 0;
  font-size: 1.4rem;
  font-weight: 500;
}

footer {
  border: none;
}

.foot-nav li {
  margin: 1rem;
}

.foot-nav a {
  color: #fff;
  text-decoration: none;
}

.foot-nav a:hover {
  color: #61b8d0;
}

.foot-subnav {
  margin-top: 2rem;
  padding-top: 2rem;
  font-size: 1.2rem;
  border-top: 1px solid #868686;
  align-items: center;
  justify-content: space-between;
}

.foot-subnav .foot-nav {
  order: 1;
}

@media screen and (max-width: 767px) {
  .foot-subnav .foot-nav {
    order: 0;
  }
}

.foot-bottom {
  font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
  .foot-bottom {
    text-align: center;
    margin: auto;
  }
}

.foot__txt {
  color: #fff;
}

@media screen and (max-width: 767px) {
  footer {
    padding: 3rem 0 8rem;
  }

  .foot-nav li {
    width: 100%;
  }

  .foot-subnav {
    margin-top: 2rem;
  }

  .foot__txt {
    margin: 1rem 0 0;
  }
}

/**パンくず**/
.breadcrumb {
  background-color: #43a3c6;
}

.breadcrumb__list {
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #fff;
}

.breadcrumb__list a {
  color: #fff;
}

.breadcrumb__item::before {
  content: ">";
  padding: 0 0.5rem;
}

.breadcrumb__item:first-child::before {
  content: none;
}

@media screen and (max-width: 767px) {
  .breadcrumb__list {
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.1rem;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow: auto;
    white-space: nowrap;
  }

  .breadcrumb__item {
    display: inline;
    flex: 0 0 40%;
  }
}

/************************************
* search area
*************************************/

.search {
  padding: 0;
}

.search__area {
  padding: 0 2rem;
  color: #fff;
}

.search__area::before {
  content: "";
  background-color: #61b8d0;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.search__area>* {
  padding: 3rem 0;
}

@media screen and (max-width: 767px) {
  .search__area>* {
    padding: 2rem 0;
  }
}

.search__area .search__word {
  border-bottom: solid 1px #61b8d0;
}

.search__area .search__ttl {
  flex-basis: 15%;
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0 .5%;
}

@media screen and (max-width: 1024px) {
  .search__area .search__ttl {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
  .search__area .search__ttl {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }
}

.search__area .search__item {
  font-size: 1.5rem;
  font-weight: 500;
  flex-basis: 17.5%;
  margin: 0 .5%;
  /* margin-left: 1%; */
}

@media screen and (max-width: 767px) {
  .search__area .search__item {
    margin: 0 0 1rem;
    width: 100% !important;
  }
  .search__filter .select select {
    padding-left: 1.2rem;
  }
}

.search__area .search__item.select {
  flex-basis: 27%;
  margin: 0 .5%;
}

@media screen and (max-width: 1024px) {
  /* .search__area .search__item.select {
    flex-basis: 28%;
  } */
  .search__area .search__item.select,
  .modal__btn > span,
  .search__btn > span
   {
    font-size: 1.4rem !important;
  }
  .search__area .search__item {
    width: 17%;
  }
  .search__area .search__item.select {
    flex-basis: 27.5%;
  }
}

@media screen and (max-width: 767px) {
  .search__area .search__item.select {
    margin: 0 0 1rem;
  }
}

.search__area .search__item.select {
  width: 100%;
  max-width: 100%;
  font-size: 1.5rem;
}

.search__area--second {
  margin-top: 5rem;
}

.search__area--second .search__ttl {
  display: none;
}

.search__area--second .search__sort {
  justify-content: end;
}

@media screen and (max-width: 767px) {
  .search__area--second .search__sort {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.search__area--second .search__item {
  margin-left: 1rem;
}

@media screen and (max-width: 767px) {
  .search__area--second .search__item {
    margin-right: 1rem;
  }
}

.search__area--second .search__item a {
  background: #fff;
  color: #61b8d0;
  font-size: 1.4rem;
  font-weight: 500;
  width: 13rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3rem;
}

.search__area--second .search__item a:hover {
  background-color: #e4f7fc;
}

.search__word,
.search__sort,
.search__filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.search__btn {
  margin-top: 0;
  margin-left: auto;
}
.search__btn > span {
  width: 100%;
  height: 5rem;
  border-radius: 2.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .1rem;
  padding-bottom: 0.2rem;
  background: #1eb4dc;
  box-shadow: 0 0 1rem rgb(0 0 0 / 10%);
  /* background: #ff9c00; */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search__btn > span:hover {
  /* background: #43a3c6; */
  opacity: .9;
  cursor: pointer;
}
@media screen and (max-width: 767px) {

  .search__word,
  .search__sort,
  .search__filter {
    display: block;
    text-align: center;
  }
}

/****************modal****************/
#modal-drawer {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  color: #000;
}

.modal-unshown {
  display: none;
}

.modal__btn {
  margin-top: 0;
  margin-left: auto;
}

.btn__attract button {
  width: 100%;
  height: 5rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0;
  background: #ff9c00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__btn > span {
  position: relative;
  width: 100%;
  height: 5rem;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 0;
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: left;
  border: solid 1px #ccc;
  padding-left: 1rem;
}
.modal__btn > span::after {
  content: "+";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
  color: #333;
}
.btn__attract button:hover {
  background: #ffbb00;
}
.modal__btn > span:hover {
border: solid 1px #43a3c6;
cursor: pointer;
}
#modal-open {
  display: block;
}

#modal-close {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: 0.3s ease-in-out;
  z-index: 1000;
}

#modal-content {
  overflow: auto;
  position: fixed;
  width: 900px;
  height: 80%;
  top: 10%;
  left: calc(50% - 400px);
  padding: 2rem;
  background: #fff;
  border: 20px solid #fff;
  transform: translateX(180%);
  opacity: 0;
  border-radius: 6px;
  z-index: 1001;
}

#modal-content .btn {
  margin: 4rem auto;
}

#modal-input:checked~#modal-close {
  display: block;
  opacity: 0.5;
}

#modal-input:checked~#modal-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  opacity: 1;
}

#modal-content .table th,
#modal-content .table td {
  padding: 1rem 2rem;
}

@media only screen and (max-width: 959px) {
  #modal-content {
    width: 80%;
    left: 10%;
    padding: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  #modal-content {
    width: 98%;
    left: 1%;
    border: 10px solid #fff;
    padding: 1rem 0;
  }

  #modal-content .table td {
    padding: 1rem 1rem 1.5rem;
  }
  .modal__btn > span {
    padding-left: 1.2rem;
  }
  .modal__btn > span::after {
    right: 1.5rem;
  }
}

/*********************************
* search area end
 ********************************/

.result__item {
  background: #fff;
  box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.1);
}

.result__img a img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
  object-fit: scale-down;
  font-family: "object-fit: cover;";
}

.result__name {
  font-size: 1.2rem;
}

.result__ttl {
  margin: 0 0 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.search_result_desc .result__ttl a {
  color: #000;
}

.result__txt {
  font-size: 1.4rem;
}

.result__profile {
  margin-top: 0.5rem;
}

.result__btn {
  max-width: 100%;
  margin-top: 1rem;
}

.result__btn a {
  font-size: 1.4rem;
  border-radius: 5rem;
  height: 4rem;
  background-color: #61b8d0;
}

.result__btn a:hover {
  background-color: #97d4e5;
}

.sub .result__name,
.sub .result__eval,
.sub .result__profile {
  display: none;
}

.sub .result {
  padding-top: 2rem;
}

.sub .result__item {
  margin-bottom: 2rem;
}

@media screen and (max-width: 767px) {
  .sub .result__item {
    margin-bottom: 3rem;
  }
}

.sub .result__item>.result__img {
  display: none;
}

.sub .result__desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .sub .result__desc {
    flex-direction: column;
  }
}

.sub .result__top {
  padding: 3rem;
  width: 75%;
}

@media screen and (max-width: 767px) {
  .sub .result__top {
    order: 2;
    width: 100%;
    padding: 2rem;
  }
}

.sub .result__img {
  width: 25%;
  padding: 3rem;
  padding-left: 0;
}

@media screen and (max-width: 767px) {
  .sub .result__img {
    order: 1;
    width: 100%;
    padding: 2rem;
    padding-bottom: 0;
  }
}

.sub .result__middle {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #cacaca;
}

.sub .result__middle dl {
  display: flex;
  margin-bottom: 4px;
}

.sub .result__data-title {
  color: #61b8d0;
  font-weight: 700;
  font-size: 1.4rem;
  flex-basis: 30%;
}

@media screen and (max-width: 1024px) {
  .sub .result__data-title {
    flex-basis: 23%;
  }
}

@media screen and (max-width: 767px) {
  .sub .result__data-title {
    flex-basis: 70%;
  }
}

.sub .result__data-text {
  font-weight: 500;
  font-size: 1.4rem;
  flex-basis: 50%;
}

.sub .result__bottom {
  background: #f2f5f6;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sub .result__bottom {
    order: 3;
    flex-direction: column;
    padding: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .sub .result__bottom>* {
    margin-bottom: 1rem;
  }
}

.sub .result__btn {
  flex-basis: 30%;
  margin-left: 1%;
  margin-top: 0;
}

@media screen and (max-width: 1024px) {
  .sub .result__btn {
    flex-basis: 25%;
  }
}

@media screen and (max-width: 767px) {
  .sub .result__btn {
    flex-basis: 100%;
  }
}

.sub .result__btn a {
  font-size: 1.5rem;
}

@media screen and (max-width: 1024px) {
  .sub .result__btn a {
    font-size: 1.3rem;
  }
}

.sub .sample_req a {
  background: #fff;
  color: #61b8d0;
  border: solid 1px #61b8d0;
}

.sub .sample_req a:hover {
  background-color: #e4f7fc;
}

.sub .result__price {
  font-size: 2rem;
  font-weight: 700;
  flex-basis: auto;
}

@media screen and (max-width: 1024px) {
  .sub .result__price {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 767px) {
  .sub .result__price {
    flex-basis: 100%;
    margin-bottom: 2rem;
  }
}

.sub .result__star_wrap {
  flex-basis: 22%;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .sub .result__star_wrap {
    flex-basis: 100%;
  }
}

.sub .result__star {
  position: relative;
  font-size: 15px;
  margin-right: 0.5rem;
}

.sub .result__star:before,
.sub .result__star:after {
  display: block;
  top: 0;
  left: 0;
  letter-spacing: 1px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.sub .result__star:before {
  position: relative;
  color: #ceced0;
  content: "\f005\f005\f005\f005\f005";
}

.sub .result__star.val1:after {
  position: absolute;
  color: #ff9c00;
  content: "\f089";
}

.sub .result__star.val2:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005";
}

.sub .result__star.val3:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f089";
}

.sub .result__star.val4:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005";
}

.sub .result__star.val5:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f089";
}

.sub .result__star.val6:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f005";
}

.sub .result__star.val7:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f005\f089";
}

.sub .result__star.val8:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f005\f005";
}

.sub .result__star.val9:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f005\f005\f089";
}

.sub .result__star.val10:after {
  position: absolute;
  color: #ff9c00;
  content: "\f005\f005\f005\f005\f005";
}

.card__list {
  display: flex;
  flex-wrap: wrap;
}

.card__item {
  width: 23.5%;
  margin-right: 2%;
  margin-bottom: 2%;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

@media screen and (min-width: 768px) {
  .card__item:nth-child(4n) {
    margin-right: 0;
  }
}

.card__img {
  width: 100%;
}

.card__img img {
  width: 100%;
  height: 18rem;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.card__desc {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__ttl {
  margin: 1rem 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.card__btn .btn--small:first-child {
  margin-bottom: 0.5rem;
}

.card__item .btnBox .btn--small {
  width: 49%;
  margin-top: 2%;
}

@media screen and (max-width: 959px) {
  .card__img img {
    height: 14rem;
  }
}

@media screen and (max-width: 767px) {
  .card__item {
    width: 49%;
    padding: 1rem;
  }

  .card__item:nth-child(2n) {
    margin-right: 0;
  }

  .card__ttl {
    font-size: 1.5rem;
  }
}

.thread__list {
  margin-bottom: 3rem;
  padding: 4rem;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
}

.thread__item {
  border-top: 1px solid #e9eced;
}

.thread__item:last-child {
  border-bottom: 1px solid #e9eced;
}

.thread__item a {
  padding: 1.5rem;
  display: block;
}

@media screen and (max-width: 767px) {
  .thread__list {
    padding: 1rem 0;
    margin-bottom: 2rem;
  }
}

/**
 * チャット
**/
.chat {
  padding-bottom: 20rem;
}

@media only screen and (max-width: 959px) {
  .chat {
    padding-bottom: 14rem;
  }
}

.chat-outline .c-head {
  margin-bottom: 1rem;
}

.chat__status {
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-weight: 700;
  color: #fff;
  background: #61b8d0;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
  float: left;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat__status input {
  color: #fff;
}

.chat-inner body {
  margin: 0 !important;
}

.chat-inner .ifrm {
  width: 100%;
  min-height: 35vh;
  padding: 10px 0;
  background: #fff;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
}

.chat-inner .inner {
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .chat__status {
    width: 70px;
    height: 30px;
    margin-bottom: 5px;
    font-size: 12px;
  }

  .chat__status input {
    font-size: 12px;
  }

  .chat-inner {
    padding: 1rem;
  }
}

.left_balloon,
.right_balloon {
  clear: both;
  width: 98%;
  margin: 0 auto 30px;
  line-height: 2;
}

.left_balloon p {
  margin: 0;
  color: #535d64;
  font-size: 15px;
  position: relative;
}

.right_balloon p {
  color: #535d64;
  font-size: 15px;
  position: relative;
  /*
    margin: 0;
    padding: 15px 20px;
    color: #535D64;
    font-size: 15px;
    position: relative;
    background: #fafafa;
    border-radius: 0 10px 10px 10px;
    border: 1px solid #707070;
  */
}

.system_balloon {
  background: #f8f8f8;
  border: 2px solid #e8e8e8;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 5px;
}

.balloon_div_left {
  float: left;
  padding: 10px 10px 0px 0px;
}

.balloon_div_right {
  float: left;
}

.right_balloon img,
.left_balloon img {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 3px;
}

@media only screen and (max-width: 767px) {

  .left_balloon,
  .right_balloon {
    width: 95%;
    margin-bottom: 20px;
  }

  .left_balloon p,
  .right_balloon p {
    font-size: 12px;
  }
}

.balloon_sub {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.balloon_name {
  margin-right: 5px;
  font-size: 13px;
  font-weight: 700;
  display: block;
}

.balloon_date {
  margin-right: 5px;
  color: #7d7d7d;
  font-size: 11px;
}

.balloon_kidoku {
  padding: 0 5px;
  font-size: 10px;
  border: 1px solid #b4bfc2;
  border-radius: 3px;
}

@media screen and (max-width: 767px) {

  .balloon_name,
  .balloon_date {
    font-size: 10px;
  }

  .balloon_kidoku {
    font-size: 8px;
  }
}

.chat-footer {
  margin-bottom: 2rem;
}

.chat-footer textarea {
  padding-bottom: 40px;
  width: 68%;
  height: auto;
}

.submit__area {
  width: 100%;
  position: absolute;
  bottom: 3.3rem;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chat__submit input {
  height: 4rem;
  padding: 0 20px;
  border-left: 1px solid #e9eced;
}

.btn-file {
  height: 4rem;
}

.btn-file::before {
  content: "";
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
  background: url("../images/icon-clip.png") center center/100% no-repeat;
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
}

@media only screen and (max-width:991px) {
  .submit__area {
    width: 31%;
}
}

@media only screen and (max-width: 767px) {
  .chat-footer textarea {
    padding: 15px 10px 40px;
    width: 100%;
  }

  .chat-footer textarea::-moz-placeholder {
    font-size: 13px;
    line-height: 2;
  }

  .chat-footer textarea:-ms-input-placeholder {
    font-size: 13px;
    line-height: 2;
  }

  .chat-footer textarea::placeholder {
    font-size: 13px;
    line-height: 2;
  }

  .submit__area {
    bottom: -30px;
  }

  .btn-file {
    height: 3rem;
  }

  .btn-file::before {
    width: 3rem;
    height: 3rem;
    margin-right: 0;
  }

  .chat__submit {
    display: flex;
  }
  .chat__submit input {
    height: 3rem;
    padding: 0 10px;
    font-size: 10px;
  }
}

.pagination {
  margin-top: 5rem;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.plist_fix {
  align-items: baseline;
}
.pagination .plist_fix b {
  color: #fff;
  background: #61b8d0 !important;
  border: solid 1px #e7f4f8;
  width: 4rem;
  height: 4rem;
  background: #e7f4f8;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 .5rem;
}
.pagination .plist_fix a {
  margin: 0 .5rem;
}
.pagination .plist_fix a:first-child,
.pagination .plist_fix a:last-child {
  background: none;
  width: auto;
  display: unset;
  margin: 0.3rem;
}
.pagination .plist_fix a:hover:first-child,
.pagination .plist_fix a:hover:last-child {
  border: none;
  text-decoration: underline;
}
.pagination span,
.pagination a {
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
  background: #e7f4f8;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination span:last-child,
.pagination a:last-child {
  margin-right: 0;
}

.pagination .current,
.pagination a:hover {
  color: #fff;
  background: #61b8d0;
  border: solid 1px #e7f4f8;
}

@media only screen and (max-width: 767px) {
  .pagination {
    padding: 2rem 0;
  }
}

@media only screen and (max-width: 320px) {
  .pagination {
    font-size: 1.1rem;
  }

  .pagination span,
  .pagination a {
    padding: 0.8rem 1rem 0.8rem 1rem;
  }

  .pagination .current {
    padding: 0.8rem 1rem 0.8rem 1rem;
  }
}

.detail__wrap {
  background-color: #fff;
  box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.1);
  padding: 3rem;
}

@media screen and (max-width: 767px) {
  .detail__wrap {
    padding: 2rem;
  }
  .plist_fix {
  justify-content: flex-start;
  }
  .pagination .plist_fix a {
    margin: 0.4rem 0.4rem;
  }
}

.detail__wrap section {
  padding: 0;
}

.detail__main-btn {
  justify-content: center;
  margin-top: 7rem;
}

@media screen and (max-width: 1024px) {
  .detail__main-btn .result__btn {
    flex-basis: auto;
  }
}

.detail__main-btn .result__btn a {
  height: 5rem;
  border-radius: 5rem;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.detail__main-btn .result__btn.sample_req a {
  background: #fff;
  color: #61b8d0;
  border: none;
}

.detail__main-btn .result__btn.sample_req a:hover {
  background-color: #e4f7fc;
}

.detail__main-btn .result__btn.buy a {
  background-color: #ff9c00;
  color: #fff;
}

.detail__main-btn .result__btn.buy a:hover {
  color: #fff;
  background: #ffbb00;
}

.outline-head {
  padding: 3rem 0 2rem;
}

.outline-head__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3rem;
  color: #fff;
}

.outline-head__top .selling_price {
  font-size: 2rem;
}

.outline-head__top .result__star_wrap {
  /* flex-basis: auto; */
  font-size: 1.6rem;
  justify-content: center;
}

.outline-head__img {
  order: 2;
  position: relative;
  display: block;
  width: 25%;
  margin-top: -4.5rem;
}

@media screen and (max-width: 959px) {
  .outline-head__top .outline-head__top {
    font-size: 2rem;
  }
  .outline-head__top .selling_price {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  .outline-head__top {
    flex-direction: column;
    align-items: start;
  }
  .outline-head__img {
    order: 1;
    width: 100%;
  }
}

.outline-head__img::before {
  content: "";
  display: block;
  padding-top: 56.12244898%;
}

.outline-head__img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: scale-down;
  object-fit: scale-down;
  font-family: "object-fit: cover;";
}

.outline-head__txt {
  order: 1;
  width: 75%;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .outline-head__txt {
    order: 2;
    width: 100%;
  }
}

.outline-head__rate {
  width: 10rem;
  height: 2.5rem;
  margin: 0.5rem 0;
  color: #fffc20;
  font-size: 1rem;
  font-weight: 700;
  background: #61b8d0;
  border-radius: 0.5rem;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.outline-head__point {
  padding-left: 0.2rem;
  font-size: 1.5rem;
}

.outline-head__desc {
  width: 100%;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
}

.outline-head__name {
  font-size: 1.2rem;
  display: none;
}

.outline-head__ttl_wrap {
  width: 100%;
}

.outline-head__ttl {
  margin: 1rem 0;
  font-size: 2.4rem;
  font-weight: 700;
}

.outline-head__bottom {
  display: none;
  margin-top: 2rem;
}

.outline-head__info {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  font-size: 1.1rem;
}

.outline-head__info li {
  margin-top: 0.5rem;
  color: #535d64;
  line-height: 1;
}

.outline-head__blacklist {
  display: none;
  margin-top: 1rem;
  font-size: 1.2rem;
  text-align: right;
}

.outline-head__btnarea {
  width: 48rem;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
  align-items: end;
  display: none;
}

.outline-head__btn {
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
  .outline-head__item {
    flex-wrap: wrap;
  }

  .outline-head__img {
    margin-bottom: 2rem;
  }

  .outline-head__desc {
    margin-left: 0;
  }

  .outline-head__ttl {
    margin-bottom: 0.5rem;
  }

  .outline-head__btnarea {
    margin: 1rem 0 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .outline-head__btn {
    max-width: 49%;
    margin-right: 2%;
  }

  .outline-head__btn:nth-child(2n) {
    margin-right: 0;
  }

  .outline-head__btn a {
    height: 3.5rem;
    font-size: 1.2rem;
  }
}

.outline-overview .outline__ttl {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .outline-overview .c-flex {
    flex-direction: column;
  }
}

.outline {
  margin-top: 5rem;
}

.outline__ttl {
  margin-bottom: 1.5rem;
  margin-top: 3rem;
  color: #61b8d0;
  font-size: 2rem;
}

.outline__gallery ul {
  -moz-columns: 28rem;
  columns: 28rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

.outline__gallery li {
  /**width: 16.11111112%;
  margin-right: .6666667%;**/
}

.outline__gallery li:nth-child(6n) {
  margin-right: 0;
}

.outline__gallery img {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

@media only screen and (max-width: 959px) {
  .outline__gallery {
    -moz-columns: 23rem;
    columns: 23rem;
  }
}

@media only screen and (max-width: 767px) {
  .outline__gallery {
    -moz-columns: 17rem;
    columns: 17rem;
  }
}

@media only screen and (max-width: 767px) {
  .outline--2>.l-container {
    padding: 0;
  }
}

.outline--2 .outline--2__wrap {
  padding: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.outline--2 .outline--2__wrap:nth-child(odd) {
  background-color: #fff;
}

.outline--2 .outline--2__wrap:nth-child(even) {
  background-color: #f6f8f9;
}

.outline--2 .outline__ttl {
  margin-top: 0;
}

.outline--2 .outline__list-title {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.outline--2 .outline__list-title:first-child {
  margin-top: 0;
}

.outline--2 .outline__list {
  display: flex;
  flex-wrap: wrap;
}

.outline--2 .outline__list li {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 3px;
  border: solid 1px #cacaca;
  background-color: #fff;
  height: 3.2rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outline--2 .outline__text {
  margin-bottom: 0.5rem;
}

.outline--2 .outline__text:last-child {
  margin-bottom: 0;
}

.outline--2 .tableset {
  border: none;
  padding: 0;
  margin: 0;
  background-color: unset;
}

.outline--2 .tableset .tableset__list {
  border-bottom: 1px solid #cacaca;
}

.outline--2 .tableset .tableset__list:first-child {
  margin-top: 0;
}

.outline--2 .tableset .tableset__list:last-child {
  margin-bottom: 0;
}

.outline--2 .tableset .tableset__ttl,
.outline--2 .tableset .tableset__txt {
  padding: 1.5rem 0;
}

.outline--2 .tableset .tableset__ttl {
  width: 15%;
  color: #61b8d0;
}

@media screen and (max-width: 1024px) {
  .outline--2 .tableset .tableset__ttl {
    width: 20%;
  }
}

@media screen and (max-width: 767px) {
  .outline--2 .tableset .tableset__ttl {
    width: 100%;
    padding-bottom: 0;
  }
}

.outline--2 .tableset .tableset__txt {
  width: 85%;
}

@media screen and (max-width: 1024px) {
  .outline--2 .tableset .tableset__txt {
    width: 80%;
  }
}

@media screen and (max-width: 767px) {
  .outline--2 .tableset .tableset__txt {
    width: 100%;
  }
}

.outline--2 .result__rate,
.outline--2 .result__name,
.outline--2 .result__middle,
.outline--2 .result__desc .result__img,
.outline--2 .result__eval,
.outline--2 .result__profile,
.outline--2 .result__item .result__star_wrap,
.outline--2 .result__price,
.outline--2 .result__desc .sample_req {
  display: none;
}

.outline--2 .result__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.outline--2 .result__list::after {
  content: "";
  display: block;
  width: 32%;
}

@media only screen and (max-width: 767px) {
  .outline--2 .result__list::after {
    width: 49%;
  }
}

.outline--2 .result__item {
  width: 32.5%;
  margin-bottom: 1%;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .outline--2 .result__item {
    width: 49%;
    margin-bottom: 2%;
  }
}

@media only screen and (max-width: 425px) {
  .outline--2 .result__item {
    width: 100%;
  }
}

.outline--2 .result__item>.result__img {
  display: block;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0 auto;
}

.outline--2 .result__top {
  padding: 2rem;
}

@media screen and (max-width: 1024px) {
  .outline--2 .result__top {
    width: 100%;
  }
}

.outline--2 .result__bottom {
  background-color: #fff;
  padding: 2rem;
}

.outline--2 .result__desc .result__btn {
  flex-basis: 100%;
  margin-left: 0;
}

.knowledge__list {
  display: flex;
  flex-wrap: wrap;
}

.knowledge__item {
  width: 18.4%;
  margin-right: 2%;
  margin-bottom: 3rem;
  background-color: #fff;
  box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.1);
}

.knowledge__item a:hover {
  opacity: 0.7;
  display: block;
}

@media screen and (min-width: 768px) {
  .knowledge__item:nth-child(5n) {
    margin-right: 0;
  }
}

.knowledge__img img {
  height: 16rem;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.knowledge__desc {
  padding: 1rem;
}

.knowledge__ttl {
  font-weight: 500;
  font-size: 1.5rem;
  color: #61b8d0;
}

.knowledge__txt {
  margin-top: 1rem;
  font-size: 1.2rem;
}

.knowledge__txt--more {
  color: #61b8d0;
  text-decoration: underline;
  display: flex;
  margin-top: 1rem;
  justify-content: flex-end;
}

@media only screen and (max-width: 959px) {
  .knowledge__img img {
    height: 10rem;
  }
}

@media screen and (max-width: 767px) {
  .knowledge__item {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 2rem;
  }

  .knowledge__item:nth-child(2n) {
    margin-right: 0;
  }
}

#column__main {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
}

.column__ttl {
  margin-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: 700;
}

.column__inner {
  padding: 3rem;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
  line-height: 2;
  background-color: #fff;
}

.column__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #535d64;
}

.column__img {
  margin: 2rem 0;
}

@media screen and (max-width: 767px) {
  .column__inner {
    padding: 1rem;
  }

  .column__ttl {
    font-size: 1.8rem;
  }

  #column__main .btn {
    font-size: 1.2rem;
  }
}

/**
 * about
**/
.about__warp {
  background-color: #fff;
}

#about .c-head_about {
  align-items: center;

}

#about section {
  padding: 8rem 0
}

@media only screen and (max-width: 767px) {
  #about .solve {
    padding: 0
  }
}

.about {
  width: 100%;
  padding-bottom: 15rem !important;
  text-align: center;
  position: relative;
  display: block;
  background: url("../images/bg-about.jpg") no-repeat center bottom;
  background-size: cover;
}

.about__ttl {
  font-size: 30px;
  font-weight: 600;
}

.about__txt {
  margin-top: 2rem;
  line-height: 26px;
  text-shadow: 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff, -1px 0 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 1px 1px 2px #fff;
}

.about__img {
  margin: -10rem auto 8rem;
  width: 980px;
  max-width: 90%;
}

.about__img .l-container{
  margin: 5rem 0 2rem;
}

@media only screen and (max-width: 767px) {
  #about section {
    padding: 5rem 0
  }

  .about {
    padding-bottom: 6rem !important;
  }

  .about__ttl {
    font-size: 2.2rem;
  }

  .about__txt {
    margin-top: 1.5rem;
    font-size: 1.2rem
  }

  .about__img {
    margin-top: -4rem;
    margin-bottom: 0;
  }
}

.tab_box .btn_area {
  display: flex;
  justify-content: space-between;
}

.tab_box .tab_btn {
  width: 50%;
  height: 8rem;
  cursor: pointer;
  transition: all 0.2s ease 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  color: #A3A5A5;
  background: #EFF4F5;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #62B9D4;
  letter-spacing: .1em;
  padding-top: 1.3rem;
}

.tab_box .tab_btn.active {
  color: #62B9D4;
  background: #fff;
  border-top: 1px solid #62B9D4;
  border-left: 1px solid #62B9D4;
  border-right: 1px solid #62B9D4;
  border-bottom: unset;
}

.tab_box .tab_btn.active:after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background-color: #62B9D4;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 10px 0 0;
}

.tab_box .panel_area {
  border-left: solid 1px #62B9D4;
  border-right: solid 1px #62B9D4;
  border-bottom: solid 1px #62B9D4;
  padding: 5.3rem 3rem 4rem;
}

.tab_box .tab_panel {
  display: none;
}

.tab_box .tab_panel.active {
  display: block;
}

@media only screen and (max-width: 767px) {
  .tab_box .tab_btn {
    font-size: 1.8rem;
  }
}

.merit__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5rem;
}

.merit__item {
  width: 21%;
  margin: 0 2%;
}

.merit__item:nth-child(n+5) {
  margin-top: 6.4rem;
}

.merit__item img {
  width: 106px;
  margin: 1rem auto 1.6rem;
}

.merit__txt {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 27px;
}

.merit__title {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  color: #62B9D4;
  padding: .5rem;
  border: 2px solid #62B9D4;
  margin: 0 auto 5rem;
}

@media only screen and (max-width: 767px) {
  section.merit {
    padding: 5rem 0 !important;
  }

  .merit__list {
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0;
  }

  .tab_box .panel_area {
    padding: 2rem;
  }

  .merit__item {
    width: 100%;
    margin-bottom: 2rem;
    background-color: #f2f5f6;
    padding: 3rem 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }

  .merit__item .num {
    font-size: 1.8rem;
  }

  .merit__item img {
    margin: 1rem auto;
  }

  .merit__title {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}

.nayami {
  width: 100%;
}

.nayami__ttl {
  margin-bottom: 5rem;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

.nayami__ttl:last-child {
  margin: 5rem 0 0
}

.nayami__ttl span {
  color: #62B9D4;
  padding: 0 2px;
  font-size: 125%
}

.nayami__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nayami__item {
  width: 30.333333%
}

@media only screen and (max-width: 959px) {
  .nayami__ttl {
    font-size: 2.4rem
  }
}

@media only screen and (max-width: 767px) {
  .nayami {
    background-position: left top
  }

  .nayami__ttl {
    margin-bottom: 3rem;
    font-size: 1.8rem;
  }

  .nayami__ttl:last-child {
    margin-top: 3rem;
    margin-bottom: 0
  }

  .nayami__list {
    justify-content: center;
  }

  .nayami__item {
    width: 75%;
    margin-bottom: 2rem;
  }

  .nayami__item:last-child {
    margin-bottom: 0
  }
}

.price__list {
  display: flex;
  justify-content: space-between;
}

.price__item {
  width: 32%;
  text-align: center;
  background-color: #fff;
  margin-bottom: 2rem;
  box-shadow: 10px 10px 10px 6px rgb(0 0 0 / 10%);
  font-size: 1.8rem;
  font-weight: 500;
}

.price__title {
  background-color: #505050;
  color: #B0DBE7;
  padding: 0.5rem;
}

.price__cont {
  padding: 2rem 1rem;
}

.price__cont span {
  color: #62BDD8;
  font-size: 3.5rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .price__list {
    flex-direction: column;
  }
  
  .price__item {
    width: 100%;
  }
}

.solve {
  background: #fff;
}

.solve::before {
  content: "";
  background: #60b9d1;
  width: 100%;
  height: 30rem;
  position: absolute;
  top: 0;
}

@media only screen and (max-width: 767px) {
  .solve::before {
    height: 12rem;
  }
}

#about .solve::before {
  content: none;
}

.solve__item {
  width: 100%;
  margin-bottom: 10rem;
}

@media only screen and (max-width: 767px) {
  .solve__item {
    margin-bottom: 5rem;
  }
}

.solve__item:last-child {
  margin-bottom: 0;
}

.solve__img {
  width: 90%;
  position: relative;
  margin-right: 0;
  margin-left: auto;
}

.solve__img:before {
  content: "";
  display: block;
  padding-top: 33.898305085%;
}

@media only screen and (max-width: 767px) {
  .solve__img:before {
    padding-top: 50%;
  }
}

.even .solve__img {
  margin-right: auto;
  margin-left: 0;
}

.solve__img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.solve__desc {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 80%;
  margin: 5rem auto;
  line-height: 26px;
  font-size: 1.4rem;
}

@media only screen and (max-width: 767px) {
  .solve__desc {
    display: block;
  }
}

.solve__num {
  color: #b0dbe7;
  font-size: 16rem;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 160px;
  position: absolute;
  left: 0;
  bottom: 100%;
}

@media only screen and (max-width: 767px) {
  .solve__num {
    font-size: 8rem;
    bottom: 0;
  }
}

.solve__ttl {
  font-size: 2.3rem;
  font-weight: 700;
  color: #61b8d0;
  flex-basis: 30%;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .solve__ttl {
    margin-bottom: 1rem;
  }
}

.solve__txt {
  flex-basis: 70%;
  font-size: 1.5rem;
}

.top .c-head,
.flow .c-head {
  margin-bottom: 2rem;
}

.top .c-head .btn__more,
.flow .c-head .btn__more {
  position: absolute;
  right: 0;
  bottom: 30px;
}

@media only screen and (max-width: 425px) {

  .top .c-head .btn__more,
  .flow .c-head .btn__more {
    width: 15rem;
  }
}

.top .c-head__ttl,
.flow .c-head__ttl {
  font-size: 7.5rem;
  font-weight: 700;
  position: relative;
}

@media only screen and (max-width: 767px) {

  .top .c-head__ttl,
  .flow .c-head__ttl {
    font-size: 6.5rem;
  }
}

.top .c-head__ttl:after,
.flow .c-head__ttl:after {
  content: "";
  background: #000;
  width: 100%;
  display: block;
  height: 3px;
  position: absolute;
  bottom: 22px;
}

@media only screen and (max-width: 767px) {

  .top .c-head__ttl:after,
  .flow .c-head__ttl:after {
    bottom: 18px;
  }
}

.top .c-head__ttl.white,
.flow .c-head__ttl.white {
  color: #fff;
}

.top .c-head__ttl.white:after,
.flow .c-head__ttl.white:after {
  background: #fff;
}

.top .c-head__txt,
.flow .c-head__txt {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 767px) {

  .top .c-head__txt,
  .flow .c-head__txt {
    margin-top: 2rem;
  }
}

.top .c-head__txt .title,
.flow .c-head__txt .title {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-feature-settings: "palt";
}

@media only screen and (max-width: 767px) {

  .top .c-head__txt .title,
  .flow .c-head__txt .title {
    font-size: 2rem;
  }
}

.top .c-head__txt .title .acc,
.flow .c-head__txt .title .acc {
  color: #61b8d0;
}

.top .c-head__txt .text,
.flow .c-head__txt .text {
  font-size: 1.3rem;
  font-weight: 500;
}

.guidance {
  background-image: url("../images/bg_entry.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 1.5rem 0;
}

.guidance .c-head {
  align-items: center;
  margin-bottom: 2rem;
}

.guidance .c-head__ttl {
  margin-bottom: 2rem;
  font-size: 7.5rem;
}

.guidance .c-head__ttl:after {
  content: none;
}

.guidance .c-head__txt {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.guidance .btn {
  margin: 0 auto;
  justify-content: center;
  max-width: 32rem;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
}

.guidance .btn a {
  background: #ff9c00;
  border-radius: 5rem;
  height: 5.4rem;
}

.guidance .btn__attract a {
  width: 100%;
  height: 5rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow {
  background-color: #fff;
}

.flow__list {
  counter-reset: number 0;
  flex-wrap: wrap;
}

.flow__item {
  width: calc(25% - 2rem);
  padding: 5rem 3rem 3rem;
  margin-bottom: 2rem;
  box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
.flow .banner_request{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  max-width: 340px;
  height: 4rem;
  background: #fff;
  color: #61b8d0;
  border-radius: 5rem;
  box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
  margin-left: auto;
}

.banner_request:hover {
  background-color: #e4f7fc;
}
.banner_aiddata:hover {
  background-color: #ebf0f1;
}
.flow .banner_request img{
  width: 328px;
}
@media only screen and (max-width: 767px) {
  .flow__item {
    width: 100%;
    padding: 3rem 2rem 2rem;
    margin-bottom: 4rem;
  }
}

.flow__item::before {
  counter-increment: number 1;
  content: "0" counter(number);
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.8rem;
  color: #b0dbe7;
  background: #505050;
  border-radius: 5rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -1rem;
  top: -1rem;
}

.flow__img {
  display: none;
}

.flow__desc {
  text-align: center;
}

.flow__ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #61b8d0;
}

.flow__num {
  display: none;
}

.flow__txt {
  margin-top: 2rem;
  text-align: left;
  color: #505050;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 2.9rem;
}

/**
 * ご利用ガイド
**/
.guide__list {
  margin-bottom: 60px;
}

.guide__item {
  position: relative;
  padding: 30px 40px;
  background: #F2F5F6;
  border-radius: 7px;
  margin-bottom: 20px;
  font-size: 18px;
}

.guide__item .guide_h {
  color: #61BBD5;
  font-size: 22px;
  font-weight: 700;
}

.guide__item .guide_h span {
  margin-right: 15px;
  font-size: 16px;
  font-weight: 500;

}

.guide__item .guide_h span b {
  font-size: 26px;
  font-weight: 500;
  margin-left: 5px;
}

.guide__item .guide_p {
  color: #000;
  font-size: 18px;
  margin-top: 10px;
}

@media only screen and (max-width:767px) {
  .guide__item {
    padding: 15px;
  }

  .guide__item .guide_h {
    font-size: 18px;
  }

  .guide__item .guide_h span {
    margin-right: 15px;
    font-size: 11px;
    font-weight: 500;
    display: block;

  }

  .guide__item .guide_h span b {
    font-size: 16px;
    font-weight: 500;
    margin-left: 5px;
  }

  .guide__item .guide_p {
    font-size: 14px;
    margin-top: 5px;
    line-height: 1.8em;
  }
}

.faq__area {
  margin-bottom: 8rem;
}

.faq__anchor {
  margin-bottom: 5rem;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.faq__link {
  margin-right: 3rem;
}

.faq__link a {
  width: 100%;
  height: 4.5rem;
  padding: 0 0.5rem;
  color: #a5a5a5;
  font-size: 1.8rem;
  border-bottom: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__link a:hover,
.faq__link a.is-current {
  color: #61b8d0;
}

@media only screen and (max-width: 767px) {
  .faq__link {
    width: 32.333333%;
    margin-right: 1.5%;
  }

  .faq__link:nth-child(3n) {
    margin-right: 0;
  }

  .faq__link a {
    font-size: 1.2rem;
  }
}

.listAccordion {
  margin: 0 auto;
}

.listAccordion label {
  margin-top: 2rem;
  padding: 2.4rem 0.5rem 2.4rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  background: #fff;
  box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.1);
  display: block;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listAccordion label.label_open {
  background-color: #f6f8f9;
  color: #43a3c6;
  box-shadow: none;
}

.listAccordion label:first-child {
  margin-top: 0;
}

.listAccordion label:hover {
  background: #fafafa;
}

.listAccordion input[type=checkbox].on-off {
  display: none;
}

.listAccordion .listTips {
  margin: 0;
  padding: 0;
  color: #535d64;
  background: #fff;
  position: relative;
}

.listAccordion .listTips a {
  text-decoration: underline;
  color: #43a3c6;
}

.listAccordion .listTips a:hover {
  opacity: 0.7;
}

.listAccordion input[type=checkbox].on-off+.listTips {
  height: 0;
  overflow: hidden;
}

.listAccordion input[type=checkbox].on-off:checked+.listTips {
  height: auto;
  padding: 2rem;
  border: solid 2rem #f6f8f9;
  border-top: none;
}

/*開閉アイコン */
.listAccordion label:after {
  content: "▼";
  color: #43a3c6;
  transition: 0.3s;
  transform-origin: center center;
  transform: rotate(0deg);
  font-size: 1.2rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.listAccordion .label_open:after {
  transform: rotate(180deg);
}

.listAccordion .label_open:before {
  opacity: 0;
}

.listAccordion label .iconq,
.listAccordion input[type=checkbox].on-off:checked+.listTips .icona {
  position: absolute;
  left: 2rem;
  top: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listAccordion input[type=checkbox].on-off:checked+.listTips .icona {
  left: 5rem;
}

@media only screen and (max-width: 568px) {

  .listAccordion label .iconq,
  .listAccordion input[type=checkbox].on-off:checked+.listTips .icona {
    left: 5px;
  }
}

.terms__article {
  background: #fff;
  padding: 4rem 4rem 0;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .terms__article {
    padding: 2rem 2rem 0;
  }
}

.terms__ttl {
  font-size: 2.4rem;
  font-weight: 700;
}

.terms__item {
  margin-bottom: 4rem;
}

.terms__txt {
  margin-top: 1rem;
}

@media screen and (max-width: 767px) {
  .terms__ttl {
    font-size: 1.8rem;
  }
}

.policy__article {
  background: #fff;
  padding: 4rem 4rem 0;
  border: 1px solid #e9eced;
  border-radius: 0.5rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .policy__article {
    padding: 2rem 2rem 0;
  }
}

.policy__ttl {
  font-size: 2.4rem;
  font-weight: 700;
}

.policy__item {
  margin-bottom: 4rem;
}

.policy__txt {
  margin-top: 1rem;
}

@media screen and (max-width: 767px) {
  .policy__ttl {
    font-size: 1.8rem;
  }
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.breadcrumb mark,
.outline-head mark,
.outline-eval mark {
  background-color: inherit !important;
  color: inherit !important;
}

.thumbnail {
  width: auto !important;
  height: auto !important;
  max-width: 150px;
  -o-object-fit: cover;
  object-fit: cover;
}

.banner_item {
  height: 150px !important;
  margin: 10px;
}

.banner_item img {
  height: 100%;
}
/* modalwindow */
.window_open {
  cursor: pointer;
  border: solid 1px #f1f1f1;
  width: 100%;
  text-align: center;
  color: #61b8d0;
  height: 5rem;
  border-radius: 5rem;
  box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.window_open:hover {
  background-color: #e4f7fc;
}
#window_pop-up {
  display: none;
}
.window_overlay {
  display: none;
}
#window_pop-up:checked + .window_overlay {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
   left: 0;
}
.window {
  width: 60%;
  height: auto;
  padding: 10rem 2rem;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.window_text {
  font-size: 100%;
  font-weight: normal;
  letter-spacing: .1rem;
  margin: 0 0 4rem;
  text-align: center;
}
.window_close {
  cursor: pointer;
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  border: solid 1px #999;
  border-radius: 2px;
  padding: 0.2rem 1.2rem;
  font-weight: normal;
}
.window > ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto;
  width: 70%;
}
.window > ul > li {
  width: calc((100% - 20px) / 2);
  list-style: none;
  text-align: center;
}
.window > ul > li:first-child > a {
  background-color: #43a3c6 !important;
}
.window > ul > li:last-child > a {
  background-color: #ff9c00 !important;
}
.window > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  letter-spacing: .1rem;
}
.window > ul > li > a:hover {
  opacity: .6;
}
@media only screen and (max-width: 959px) {
  .window {
    width: 80%;
  }
}
  
@media only screen and (max-width: 767px) {
  .window {
    width: 92%;
    padding: 10rem 1.5rem 6rem;
  }
  .window > ul {
    width: 100%;
  }
  .window > ul > li {
    width: calc((100% - 10px) / 2);
  }
  .window_text {
    margin: 0 1rem 4rem;
  }
  .window_close {
    padding: 0.4rem 1.5rem;
  }
}
  /* /modalwindow */