@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;

500;700&display=swap);@charset "UTF-8";
body {
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
}

main {
  position: relative;
}

#home {
  font-size: 12px;
}

.container {
  padding-right: var(--bs-gutter-x, 9px);
  padding-left: var(--bs-gutter-x, 9px);
}

#home .container {
  padding-right: var(--bs-gutter-x, 24px);
  padding-left: var(--bs-gutter-x, 24px);
}

#sitetop #contents {
  height: 100%;
}

section {
  padding: 0;
  margin: 0;
}

.bg-orange-stripe {
  background: #f6e8d7;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 8px, transparent 8px, transparent 16px);
}

.bg-green {
  background: #9ec55a;
  position: relative;
}

.bg-halftone::before,
.bg-halftone::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 450px;
  max-width: 39%;
  height: 100%;
  background-image: url("/images/common/halftone.png");
  background-repeat: repeat-y;
  background-position: right;
}

@media screen and (max-width: 761px) {
  .bg-halftone::before,
  .bg-halftone::after {
    background-size: contain;
  }
}

.bg-halftone::after {
  left: auto;
  right: 0px;
  transform: rotateZ(-180deg);
}

.bg-halftone .container {
  position: relative;
  z-index: 1;
}

*::-moz-placeholder {
  color: #BBB !important;
}

*:-ms-input-placeholder {
  color: #BBB !important;
}

*::placeholder {
  color: #BBB !important;
}

.required {
  color: red;
  font-size: 9px;
  position: absolute;
  margin-left: 9px;
}

.value-box {
  padding: 6px 9px;
  border: 1px solid #DDD;
  background: #FFF;
  border-radius: 3px;
  margin-bottom: 0px;
}

.confirm-value-box {
  padding: 6px 9px;
  border: 1px solid #DDD;
  background: #FFF;
  color: green;
  border-radius: 3px;
  margin-bottom: 0px;
}

.confirm-check-label {
  color: green;
}

.form-control {
  background-color: transparent !important;
}

.max-width-600 {
  max-width: 600px;
}

@media screen and (max-width: 600px) {
  .max-width-600 {
    max-width: none;
  }
}

.max-width-690 {
  max-width: 690px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

.max-width-900 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

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

.t-underline {
  text-decoration: underline;
}

a.t-underline {
  text-decoration: underline;
}

a.t-underline:hover {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.no-underline:hover {
  text-decoration: none;
}

.b {
  font-weight: bold;
}

.hide {
  display: none !important;
}

.fa-facebook-square {
  color: #02327b;
}

.fa-instagram {
  color: #cb3840;
}

.fa-twitter {
  color: #2ba2f5;
}

.link-text {
  cursor: pointer;
  text-decoration: underline;
}

.link-text:hover {
  color: #3490dc;
}

.link-text.blue {
  color: #3490dc;
}

.count-badge {
  background: red;
  color: #FFF;
  display: inline-block;
  border-radius: 8px;
  font-size: 9px;
  padding: 3px 3px;
  min-width: 15px;
  min-height: 15px;
  line-height: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(15%, -50%);
}

.header-info-icon .count-badge {
  transform: translate(-30%, -60%);
}

#sp-header-switch .count-badge,
#is-user .header-info-icon .count-badge {
  position: absolute;
  top: 6px;
  right: 0px;
  transform: translate(0, 0);
}

.mb-90 {
  margin-bottom: 90px !important;
}

.gray-text {
  color: #999;
}

.hover-op75 {
  transition: opacity 0.3s;
}

.hover-op75:hover {
  opacity: 0.75;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-midium {
  font-weight: 500 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

#indexpage .vertical-title {
  border-top: 1px solid #333;
  padding-top: 30px;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  display: flex;
  flex-direction: column-reverse;
  font-weight: 500;
  font-size: 24px;
  white-space: nowrap;
  position: absolute;
  left: 0px;
  top: 0px;
}

#indexpage .vertical-title span {
  margin-left: 9px;
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  #indexpage .vertical-title {
    border-top: 0;
    position: relative;
    -ms-writing-mode: unset;
        writing-mode: unset;
    flex-direction: column;
    text-align: center;
    padding: 45px 0;
  }

  #indexpage .vertical-title span {
    margin-left: 0;
  }
}

#indexpage .main-width {
  max-width: 100%;
  width: 1200px;
  margin: 0 auto;
}

#indexpage #first-view {
  padding: 120px 0 9px;
  background: url("/images/2023/main-bg.svg");
  background-size: 150px;
}

#indexpage #first-view .mv-bg-white {
  background: #FFF;
  display: flex;
  border-radius: 12px;
}

#indexpage #first-view .swiper-fv .swiper-wrapper {
  width: 1200px;
}

#indexpage #first-view .swiper-fv .swiper-wrapper img {
  border-radius: 12px;
  display: block;
}

#indexpage #first-view .swiper-fv .swiper-wrapper img.pc {
  width: 1200px;
}

#indexpage #first-view .swiper-fv .swiper-wrapper img.sp {
  width: 93vw;
  display: none;
}

@media screen and (max-width: 1110px) {
  #indexpage #first-view .swiper-fv .swiper-wrapper {
    width: 100vw;
    max-width: 100vw;
  }

  #indexpage #first-view .swiper-fv .swiper-wrapper img {
    border-radius: 12px;
  }

  #indexpage #first-view .swiper-fv .swiper-wrapper img.pc {
    display: none;
  }

  #indexpage #first-view .swiper-fv .swiper-wrapper img.sp {
    display: inline;
  }
}

#indexpage #first-view .swiper-fv-pagination {
  text-align: center;
  margin: 9px auto;
}

#indexpage #first-view .swiper-fv-pagination .swiper-pagination-bullet {
  margin: 0 6px;
  background: #FFF;
}

#indexpage #search .bg-on {
  padding: 60px 0;
  background: #FCF9F4;
}

@media screen and (max-width: 767px) {
  #indexpage #search .bg-on {
    padding-top: 0;
  }
}

#indexpage #search .main-width {
  position: relative;
}

#indexpage #search .links {
  margin: 0 150px;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 960px) {
  #indexpage #search .links {
    margin: 0 90px;
  }
}

@media screen and (max-width: 767px) {
  #indexpage #search .links {
    margin: 0 15px;
  }
}

#indexpage #search .links .link {
  position: relative;
  transition: background-color 0.3s, color 0.3s;
  width: 50%;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  border: 1px solid #999;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  #indexpage #search .links .link {
    width: 100%;
  }
}

#indexpage #search .links .link span {
  margin-left: 48px;
}

#indexpage #search .links .link i {
  margin-left: auto;
}

#indexpage #search .links .link .icon {
  position: absolute;
  transition: opacity 0.3s;
}

#indexpage #search .links .link .icon.off {
  opacity: 1;
}

#indexpage #search .links .link .icon.on {
  opacity: 0;
}

#indexpage #search .links .link.business {
  color: #3D9ED4;
}

#indexpage #search .links .link.product {
  color: #F85555;
}

#indexpage #search .links .link.ranking {
  color: #D1C452;
}

#indexpage #search .links .link.buyer {
  color: #5AC85A;
}

#indexpage #search .links .link:hover {
  text-decoration: none;
  color: #FFF;
}

#indexpage #search .links .link:hover .icon.off {
  opacity: 0;
}

#indexpage #search .links .link:hover .icon.on {
  opacity: 1;
}

#indexpage #search .links .link:hover.business {
  background: #3D9ED4;
}

#indexpage #search .links .link:hover.product {
  background: #F85555;
}

#indexpage #search .links .link:hover.ranking {
  background: #D1C452;
}

#indexpage #search .links .link:hover.buyer {
  background: #5AC85A;
}

#indexpage #search .regist-links {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
  padding: 60px 0 30px;
}

#indexpage #search .regist-links .link {
  width: 50%;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #indexpage #search .regist-links .link {
    width: 100%;
  }
}

#indexpage #search .regist-links .link a,
#indexpage #search .regist-links .link p {
  width: 75%;
  margin: 0 auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #indexpage #search .regist-links .link a,
  #indexpage #search .regist-links .link p {
    width: 90%;
  }
}

#indexpage #search .regist-links .link a {
  display: block;
  margin-bottom: 18px;
  border-radius: 3px;
  color: #FFF;
  padding: 12px 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s;
}

#indexpage #search .regist-links .link a.business {
  background: #3D9ED4;
}

#indexpage #search .regist-links .link a.user {
  background: #F85555;
}

#indexpage #search .regist-links .link a:hover {
  transform: translateY(-3px);
}

#indexpage .news {
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  position: relative;
  padding: 0 36px 0;
  height: 300px;
}

#indexpage .news .swiper-topic,
#indexpage .news .swiper-enterprise {
  height: 100%;
}

#indexpage .news .swiper-topic .swiper-slide,
#indexpage .news .swiper-enterprise .swiper-slide {
  display: block;
  border-bottom: 1px solid #666;
  min-height: 60px;
  height: 60px;
  overflow: hidden;
}

#indexpage .news .swiper-topic .swiper-slide:last-of-type,
#indexpage .news .swiper-enterprise .swiper-slide:last-of-type {
  border: 0;
}

#indexpage .news .swiper-topic .swiper-slide .date,
#indexpage .news .swiper-enterprise .swiper-slide .date {
  margin-bottom: 9px;
  color: #999;
}

#indexpage .news .swiper-topic .swiper-slide .news-title,
#indexpage .news .swiper-enterprise .swiper-slide .news-title {
  text-align: justify;
}

#indexpage .news .swiper-navi {
  position: absolute;
  left: -18px;
  top: 0px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #666;
  color: #FFF;
  font-size: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#indexpage .news .swiper-navi.swiper-topic-next,
#indexpage .news .swiper-navi.swiper-enterprise-next {
  transform: translateY(45px);
}

#indexpage #timeline {
  padding: 18px 0;
  overflow: hidden;
  margin-bottom: 90px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .news {
    border-right: 1px solid #666;
    border-left: 0;
    padding-left: 0;
  }

  #indexpage #timeline .swiper-navi {
    left: auto;
    right: -18px;
  }
}

#indexpage #timeline .main-width {
  display: flex;
  position: relative;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .main-width {
    flex-direction: column;
  }
}

#indexpage #timeline .enterprise {
  width: 50%;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .enterprise {
    width: 100%;
    margin-bottom: 90px;
  }
}

#indexpage #timeline .enterprise .title {
  padding: 45px 0;
  font-size: 21px;
  text-align: center;
  font-weight: normal;
}

#indexpage #timeline .enterprise .title span {
  display: block;
  font-size: 11px;
  margin-top: 9px;
}

#indexpage #timeline .enterprise .news-parent {
  padding: 0 18px;
  overflow: hidden;
}

#indexpage #timeline .swiper-navi-right {
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #666;
  color: #FFF;
  font-size: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#indexpage #timeline .swiper-navi-right.swiper-new-right-prev {
  transform: translateX(-45px);
}

#indexpage #timeline .swiper-navi-right.swiper-new-right-prev,
#indexpage #timeline .swiper-navi-right.swiper-new-right-next {
  top: -18px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .swiper-navi-right.swiper-new-right-prev,
  #indexpage #timeline .swiper-navi-right.swiper-new-right-next {
    top: auto;
    bottom: 477px;
    right: 12px;
  }
}

#indexpage #timeline .swiper-navi-right.swiper-new-right2-prev {
  transform: translateX(-45px);
}

#indexpage #timeline .swiper-navi-right.swiper-new-right2-prev,
#indexpage #timeline .swiper-navi-right.swiper-new-right2-next {
  bottom: -18px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .swiper-navi-right.swiper-new-right2-prev,
  #indexpage #timeline .swiper-navi-right.swiper-new-right2-next {
    right: 12px;
    bottom: 207px;
  }
}

#indexpage #timeline .right h2 {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #FFF;
  padding: 12px 0;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  display: flex;
  flex-direction: column-reverse;
  font-size: 21px;
  font-weight: 500;
}

#indexpage #timeline .right h2 span {
  margin-left: 9px;
  font-size: 9px;
}

#indexpage #timeline .right h2.blue {
  color: #3D9ED4;
}

#indexpage #timeline .right h2.red {
  color: #F85555;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .right h2 {
    top: 0px;
    left: 30px;
    -ms-writing-mode: unset;
        writing-mode: unset;
    padding: 12px;
    flex-direction: column;
  }
}

#indexpage #timeline .right .box {
  height: 210px;
  position: relative;
}

#indexpage #timeline .right .box:first-of-type {
  margin-bottom: 19px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .right .box:first-of-type {
    margin-bottom: 60px;
  }
}

#indexpage #timeline .right .new-enterprise {
  display: flex;
  align-items: center;
  position: absolute;
  left: 12px;
  bottom: 0px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .right .new-enterprise {
    width: 100vw;
  }
}

#indexpage #timeline .right .new-enterprise .new-enterprise-inner {
  width: 50vw;
  padding: 18px 0;
  height: 210px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .right .new-enterprise .new-enterprise-inner {
    width: 100vw;
    padding: 36px 0 18px;
    height: 225px;
  }
}

#indexpage #timeline .right .new-enterprise .new-enterprise-inner.blue {
  border: 1px solid #3D9ED4;
}

#indexpage #timeline .right .new-enterprise .new-enterprise-inner.red {
  border: 1px solid #F85555;
}

#indexpage #timeline .right .swiper-container {
  margin-left: 60px;
}

@media screen and (max-width: 767px) {
  #indexpage #timeline .right .swiper-container {
    margin-left: 9px;
  }
}

#indexpage #timeline .right .swiper-wrapper {
  width: 150px;
}

#indexpage #timeline .right .c-card {
  border: 1px solid #999;
}

#indexpage #timeline .right .c-card .c-card-background {
  width: 100%;
  height: 105px;
  max-height: 105px;
}

#indexpage #timeline .right .c-card .detail {
  padding: 9px;
}

#indexpage #timeline .right .c-card .name,
#indexpage #timeline .right .c-card .desc {
  margin-top: 6px;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#indexpage #timeline .right .like-btn {
  position: absolute;
  right: 3px;
  top: 3px;
  height: 27px;
  width: 27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

#indexpage #fair {
  background: url("/images/2023/sub-bg.svg");
  background-size: 150px;
  padding-bottom: 90px;
}

#indexpage #fair .section-title {
  text-align: center;
  font-size: 30px;
  padding-bottom: 45px;
  margin-bottom: 180px;
  background: #FFF;
  position: relative;
  font-weight: 500;
}

#indexpage #fair .section-title:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 90px;
  width: 100%;
  background: url("/images/2023/wave-white.png");
  background-repeat: repeat-x;
}

#indexpage #fair .section-title span {
  font-size: 12px;
  margin-top: 9px;
  display: block;
}

#indexpage #fair .white-bg {
  background: #FFF;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 60px 150px;
  position: relative;
}

@media screen and (max-width: 1200px) {
  #indexpage #fair .white-bg {
    width: 96%;
    padding: 60px 30px;
  }
}

@media screen and (max-width: 767px) {
  #indexpage #fair .white-bg {
    margin: 0 auto;
    padding: 30px 15px;
    border-radius: 0 0 6px 6px;
  }
}

#indexpage #fair .white-bg .kv {
  border: 1px solid #999;
  margin-bottom: 45px;
}

#indexpage #fair .about {
  display: none;
}

#indexpage #fair .about.active {
  display: block;
}

#indexpage #fair .about .title {
  font-weight: bold;
  margin-bottom: 30px;
}

#indexpage #fair .about .text {
  margin-bottom: 45px;
  line-height: 180%;
}

#indexpage #fair .detail {
  display: none;
  flex-wrap: wrap;
}

#indexpage #fair .detail.active {
  display: flex;
}

#indexpage #fair .detail .left,
#indexpage #fair .detail .right {
  width: 50%;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #indexpage #fair .detail {
    flex-direction: column;
  }

  #indexpage #fair .detail .left,
  #indexpage #fair .detail .right {
    width: 100%;
    text-align: center;
  }
}

#indexpage #fair .detail .dl-box:not(:last-child) {
  margin-bottom: 30px;
}

#indexpage #fair .detail .right .report {
  text-align: center;
  display: block;
}

#indexpage #fair .detail .foot {
  width: 100%;
  text-align: center;
}

#indexpage #fair .fair-link {
  display: block;
  text-align: center;
  border: 1px solid #999;
  padding: 18px 30px;
  width: 240px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

#indexpage #fair .fair-link::before,
#indexpage #fair .fair-link::after {
  content: "";
  position: absolute;
  bottom: 50%;
  right: -30px;
  transition: right 0.3s;
}

#indexpage #fair .fair-link:hover {
  text-decoration: none;
  background: #EEE;
}

#indexpage #fair .fair-link:hover::before,
#indexpage #fair .fair-link:hover::after {
  right: -60px;
}

#indexpage #fair .fair-link::after {
  height: 1px;
  width: 60px;
  border-bottom: 1px solid #999;
}

#indexpage #fair .fair-link::before {
  height: 1px;
  width: 24px;
  border-bottom: 1px solid #999;
  transform: rotate(36deg) translate(-1px, -8px);
}

#indexpage #fair .navi {
  display: flex;
  width: 100%;
  max-width: 900px;
  height: 90px;
  justify-content: space-between;
  position: absolute;
  top: -89px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#indexpage #fair .navi .item {
  width: 49%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#indexpage #fair .navi .switch {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#indexpage #fair .navi .switch:not(.active) {
  background: #F85555;
  color: #FFF;
  height: 69%;
  border-radius: 6px;
  cursor: pointer;
}

#indexpage #fair .navi .switch:not(.active):hover {
  background: #D64C4B;
}

#indexpage #fair .navi .switch.active {
  background: #FFF;
  height: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}

#indexpage #news {
  background: #EEE;
  padding: 60px 0;
}

#indexpage #news .main-width {
  position: relative;
}

#indexpage #news .news-parent {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 0 18px;
}

@media screen and (max-width: 1200px) {
  #indexpage #news .news-parent {
    padding: 0 18px 0 90px;
  }
}

@media screen and (max-width: 767px) {
  #indexpage #news .news-parent {
    padding: 0 18px;
  }
}

#indexpage #interview-list {
  margin-top: 60px;
}

@media screen and (max-width: 1200px) {
  #indexpage #interview-list {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
}

#interview-list {
  margin-top: 180px;
  margin-bottom: 60px;
}

#interview-list .interview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 18px solid black;
  font-size: 24px;
  padding-left: 24px;
  margin-bottom: 60px;
  height: 45px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  color: #333;
  border-color: #333;
  background-image: url("/images/2023/ichimatsu-4.svg");
}

@media screen and (max-width: 767px) {
  #interview-list .interview-head {
    border-left: 12px solid black;
    padding-left: 12px;
    font-size: 18px;
  }
}

#interview-list .interviews {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #interview-list .interviews {
    justify-content: center;
  }
}

#interview-list .interviews li {
  width: 48%;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #interview-list .interviews li {
    width: 100%;
  }
}

#interview-list .interviews li .company-name {
  font-size: 24px;
  margin-bottom: 15px;
}

#interview-list .more-interviews {
  display: block;
  background: #666;
  color: #FFF;
  padding: 6px 0;
  text-align: center;
  margin: 0 auto;
  width: 120px;
  margin-bottom: 60px;
  font-size: 18px;
}

#interview-list .more-interviews:hover {
  text-decoration: none;
  background: #999;
}

#interview-list .comingsoon {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

#interview-head-image {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

#interview-detail {
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  #interview-detail {
    font-size: 15px;
  }
}

#interview-detail .interview-width {
  width: 900px;
  max-width: 96%;
  margin: 60px auto 90px;
}

@media screen and (max-width: 767px) {
  #interview-detail .interview-width {
    margin-bottom: 30px;
    margin-top: 30px;
  }
}

#interview-detail .company-name {
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #interview-detail .company-name {
    font-weight: bold;
    font-size: 15px;
  }
}

#interview-detail h1 {
  font-size: 36px;
  font-weight: normal;
}

#interview-detail #interview-text {
  line-height: 1.5 !important;
}

#interview-detail #interview-text h2 {
  position: relative;
  padding: 24px 15px 24px 60px;
  font-size: 30px;
  margin-bottom: 30px;
  background: url(/images/2023/sub-bg.svg);
  background-size: 90px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  #interview-detail #interview-text h2 {
    font-size: 21px;
    padding: 15px 9px 15px 39px;
  }
}

#interview-detail #interview-text h2:before {
  content: "";
  top: 50%;
  left: 15px;
  position: absolute;
  width: 6px;
  height: 60%;
  background: #AAA;
  transform: translateY(-50%);
}

#interview-detail #interview-text h3 {
  padding: 45px 60px 45px 90px;
  position: relative;
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  #interview-detail #interview-text h3 {
    padding: 30px 9px 30px 39px;
  }
}

#interview-detail #interview-text h3:before {
  content: "";
  border-bottom: 1px solid #666;
  width: 75px;
  top: 50%;
  left: 0;
  position: absolute;
}

@media screen and (max-width: 767px) {
  #interview-detail #interview-text h3:before {
    width: 39px;
  }
}

#interview-detail #company-status {
  background: #EEE;
  padding: 90px 0;
}

@media screen and (max-width: 767px) {
  #interview-detail #company-status {
    padding: 45px 0;
  }
}

#interview-detail #company-status .company-inner {
  background: #FFF;
  border-radius: 15px;
  border: 1px solid #999;
  width: 1202px;
  max-width: 96%;
  margin: 0 auto;
  padding: 60px;
}

@media screen and (max-width: 768px) {
  #interview-detail #company-status .company-inner {
    padding: 30px 15px;
  }
}

#interview-detail #company-status .section-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
}

#interview-detail #company-status .section-title span {
  padding: 9px 0;
  display: block;
  font-size: 15px;
}

#interview-detail #company-status .main-flex {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 39px;
  justify-content: space-between;
}

@media screen and (max-width: 1200px) {
  #interview-detail #company-status .main-flex {
    flex-direction: column;
    margin-bottom: 39px;
  }
}

@media screen and (min-width: 1201px) {
  #interview-detail #company-status .title-area,
  #interview-detail #company-status .galleries {
    width: 48%;
  }
}

#interview-detail #company-status .title-area .name {
  font-size: 24px;
}

#interview-detail .bottom-btns {
  display: flex;
  justify-content: center;
  margin-bottom: 39px;
}

@media screen and (max-width: 768px) {
  #interview-detail .bottom-btns {
    margin-bottom: 39px;
  }

  #interview-detail .bottom-btns a {
    width: 48%;
  }
}

#interview-detail .bottom-btns .submit-btn-large {
  width: 270px;
  max-width: 100%;
  margin: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: normal;
}

#interview-detail .bottom-btns .submit-btn-large i {
  font-size: 36px;
  margin-right: 12px;
}

@media screen and (max-width: 576px) {
  #interview-detail .bottom-btns .submit-btn-large {
    font-size: 12px;
    height: 45px;
    font-weight: bold;
  }

  #interview-detail .bottom-btns .submit-btn-large i {
    font-size: 21px;
    margin-right: 6px;
  }
}

#interview-detail .bottom-btns a:hover {
  text-decoration: none;
}

#interview-detail .sns-frames {
  margin-top: 39px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  #interview-detail .sns-frames {
    flex-direction: column;
  }
}

#interview-detail .sns-frames .sns {
  width: 48%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  #interview-detail .sns-frames .sns {
    width: 100%;
    min-height: 300px;
  }

  #interview-detail .sns-frames .sns:not(:last-of-type) {
    margin-bottom: 39px;
  }
}

#interview-detail .bg-cateogry {
  color: #FFF;
  background-color: green;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 8px, transparent 8px, transparent 16px);
  padding: 3px 9px;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
}

#interview-detail .bg-cateogry.category1 {
  background-color: #9ec55a;
}

#interview-detail .bg-cateogry.category2 {
  background-color: #ed8e91;
}

#interview-detail .bg-cateogry.category3 {
  background-color: #7a80bd;
}

#interview-detail .bg-cateogry.category4 {
  background-color: #7c523c;
}

#interview-detail .bg-cateogry.site {
  background-color: #4d3f3c;
}

#interview-detail .bg-cateogry.sort {
  background-color: #a2a72b;
}

#header {
  background: rgba(255, 255, 255, 0.95);
  padding: 0;
  font-size: 12px;
  display: flex;
  white-space: nowrap;
  height: 60px;
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 25px 25px;
}

@media screen and (max-width: 1110px) {
  #header {
    font-size: 10px;
    height: 60px;
    border-radius: 0 0 18px 18px;
  }
}

@media screen and (max-width: 870px) {
  #header {
    border-radius: 0;
  }
}

#header #sp-header-switch {
  margin-right: 24px;
}

#header #sitetop-sitename {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

@media screen and (max-width: 1110px) {
  #header #sitetop-sitename {
    margin-left: 18px;
  }
}

#header #logo {
  max-height: 60px;
}

@media screen and (max-width: 870px) {
  #header #logo {
    max-width: 75%;
  }
}

#header .navbar-brand {
  z-index: 1;
}

#header .sp-switch {
  display: none;
}

@media screen and (max-width: 870px) {
  #header .sp-switch {
    margin-left: auto;
    display: block;
    z-index: 1;
    font-size: 24px;
  }
}

#header .sp-text {
  display: none;
}

@media screen and (max-width: 870px) {
  #header .close-switch {
    display: none;
  }

  #header.open #header-nav-list {
    display: flex;
  }

  #header.open .close-switch {
    display: block;
  }

  #header.open .open-switch {
    display: none;
  }

  #header .sp-text {
    display: inline;
    margin-left: 15px;
  }
}

#header #header-nav-list {
  width: 100%;
  height: 100%;
}

#header #header-nav-list ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

#header #header-nav-list ul li {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li {
    flex-direction: column;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.howto-first {
    display: flex;
  }
}

#header #header-nav-list ul li .user-icon {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #999;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header #header-nav-list ul li.icon-area {
  width: 45px;
  position: relative;
}

#header #header-nav-list ul li.icon-area svg {
  font-size: 21px;
}

#header #header-nav-list ul li.icon-area a {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

#header #header-nav-list ul li.icon-area a.pc-menu {
  margin-right: 30px;
}

#header #header-nav-list ul li.icon-area .inquiry-btn {
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#header #header-nav-list ul li i {
  font-size: 21px;
}

#header #header-nav-list ul li i:hover {
  cursor: pointer;
}

#header #header-nav-list ul li.login-btn {
  width: 20%;
  height: 100%;
  border-radius: 0 0 25px;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.login-btn {
    width: 100%;
    height: 60px;
  }
}

#header #header-nav-list ul li.login-btn i {
  margin-right: 12px;
}

@media screen and (max-width: 1110px) {
  #header #header-nav-list ul li.login-btn {
    border-radius: 0 0 18px;
  }
}

#header #header-nav-list ul li.login-btn .signin {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: #333;
  background: #d1c452;
  font-weight: 700;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0 0 25px;
}

@media screen and (max-width: 1110px) {
  #header #header-nav-list ul li.login-btn .signin {
    border-radius: 0 0 18px;
  }
}

#header #header-nav-list ul li.login-btn .signin:hover {
  text-decoration: none;
  background: #f85555;
  color: #FFF;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.login-btn .signin {
    border-radius: 0;
    background: #606060;
    color: #FFF;
  }

  #header #header-nav-list ul li.login-btn .signin:hover {
    background: #606060;
  }
}

#header #header-nav-list ul li.has-child-list {
  position: relative;
  height: 100%;
  width: 20%;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.has-child-list {
    height: auto;
    width: 100%;
  }
}

#header #header-nav-list ul li.has-child-list .parenat {
  height: 60px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  flex-direction: column;
  font-weight: 500;
}

@media screen and (min-width: 1110px) {
  #header #header-nav-list ul li.has-child-list .parenat {
    min-width: 165px;
    font-size: 13px;
  }
}

#header #header-nav-list ul li.has-child-list .parenat svg {
  height: 24px;
  margin-bottom: 6px;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.has-child-list .parenat {
    width: 100%;
    padding: 0 15px;
    justify-content: flex-start;
    flex-direction: row;
  }

  #header #header-nav-list ul li.has-child-list .parenat svg {
    margin-bottom: 0;
    margin-right: 12px;
  }
}

#header #header-nav-list ul li .child-list {
  display: none;
  position: absolute;
  top: 99.9%;
  right: 0px;
  background: #FFF;
  width: 100%;
}

@media screen and (max-width: 1110px) {
  #header #header-nav-list ul li .child-list {
    font-size: 18px;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list {
    position: relative;
    margin-top: 0;
  }
}

#header #header-nav-list ul li .child-list.howto,
#header #header-nav-list ul li .child-list.user-child {
  right: 0px;
  width: 100%;
}

#header #header-nav-list ul li .child-list.howto li a,
#header #header-nav-list ul li .child-list.user-child li a {
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list.howto,
  #header #header-nav-list ul li .child-list.user-child {
    width: 100%;
  }
}

#header #header-nav-list ul li .child-list li {
  width: 100%;
  background: #FFF;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list li {
    border-top: 1px solid #CCC;
  }
}

#header #header-nav-list ul li .child-list li a {
  padding: 15px 12px;
  width: 100%;
  text-align: center;
}

#header #header-nav-list ul li:hover {
  background: #FFF;
}

#header #header-nav-list ul li:hover .child-list {
  display: block;
  flex-direction: column;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.017), 0 5px 6.1px rgba(0, 0, 0, 0.026), 0 8.1px 11.4px rgba(0, 0, 0, 0.086);
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li:hover .child-list {
    display: none;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li:hover .child-list {
    box-shadow: none;
  }
}

#header #header-nav-list .signup-area {
  display: none;
}

#header #header-nav-list .signin-area .inquiry {
  display: none;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list .signin-area .inquiry {
    display: block;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    font-size: 24px;
    background: white;
    padding-bottom: 0px;
  }

  #header #header-nav-list .parent-list {
    border-top: 1px solid #999;
    overflow-y: scroll;
  }

  #header #header-nav-list ul {
    margin-top: 60px;
    margin-bottom: 150px;
    justify-content: flex-start;
    width: 100vw;
    display: flex;
    flex-direction: column;
  }

  #header #header-nav-list ul.user-child {
    width: 100vw;
  }

  #header #header-nav-list ul li {
    text-align: left;
    border-bottom: 1px solid #CCC;
    width: 96%;
  }

  #header #header-nav-list ul li.has-child-list {
    position: relative;
  }

  #header #header-nav-list ul li.has-child-list:after {
    content: "\FF0B";
    font-weight: bold;
    position: absolute;
    right: 0px;
    top: 9px;
  }

  #header #header-nav-list ul li.has-child-list.sp-show .child-list {
    display: flex;
  }

  #header #header-nav-list ul li.has-child-list.sp-show:after {
    content: "\2212";
  }

  #header #header-nav-list ul li.icon-area {
    display: none;
  }

  #header #header-nav-list ul li .child-list {
    position: static;
  }

  #header #header-nav-list ul li.signup-area {
    display: flex;
    flex-direction: row;
    font-size: 24px;
    padding: 12px 0;
  }

  #header #header-nav-list ul li.signup-area .signup {
    flex: 1;
    text-align: center;
  }

  #header #header-nav-list ul li.signin-area {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    height: 60px;
    font-size: 18px;
    font-weight: normal;
  }

  #header #header-nav-list ul li.signin-area .inquiry {
    font-size: 18px;
    font-weight: normal;
  }

  #header #header-nav-list ul li.signin-area .signin {
    font-size: 18px;
  }

  #header #header-nav-list ul li.user-parent {
    display: flex;
    width: 96%;
    align-items: flex-start;
    padding: 0 15px;
  }

  #header #header-nav-list ul li.user-parent .header-info-icon {
    height: 60px;
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 870px) and (max-width: 870px) {
  #header #header-nav-list ul li.user-parent .header-info-icon.pc-menu {
    display: none;
  }
}

#footer .box {
  background: #f85555;
}

#totop {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  top: 30px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  #totop {
    right: 30px;
    transform: translateX(0);
  }
}

#totop .btn-obj {
  font-size: 39px;
  background: #f85555;
  border-radius: 6px;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  margin: 0 auto 9px;
  padding-top: 9px;
}

@media screen and (min-width: 992px) {
  #totop .btn-obj {
    padding-top: 6px;
    font-size: 30px;
    width: 45px;
    height: 45px;
    transition: height 0.3s, margin-top 0.3s;
  }

  #totop .btn-obj:hover {
    height: 69px;
    margin-top: -24px;
  }
}

#totop i {
  color: #FFF;
}

#footer-content {
  padding: 210px 0 30px;
  text-align: center;
  position: relative;
  margin-bottom: 45px;
}

@media screen and (min-width: 992px) {
  #footer-content {
    margin-bottom: 90px;
    padding: 30px 0 90px;
  }
}

#footer-content .footer-logo {
  margin-left: 24px;
  width: 270px;
}

@media screen and (max-width: 991px) {
  #footer-content .footer-logo {
    position: absolute;
    top: 150px;
    max-width: 90%;
    width: 240px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
}

#footer-content .title {
  font-size: 27px;
  margin-bottom: 30px;
  font-weight: 500;
}

@media screen and (min-width: 992px) {
  #footer-content .title {
    position: absolute;
    bottom: 0px;
    right: 90px;
  }
}

#footer-content .link-main-twin {
  font-size: 21px;
  margin-bottom: 15px;
}

#footer-content .link-main-twin .icon {
  margin-right: 12px;
}

@media screen and (min-width: 992px) {
  #footer-content .link-main-twin {
    font-size: 18px;
    display: flex;
    justify-content: center;
  }

  #footer-content .link-main-twin li:not(:last-child) {
    margin-right: 36px;
  }
}

#footer-content .sns-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

@media screen and (min-width: 992px) {
  #footer-content .sns-icons {
    position: absolute;
    bottom: 0px;
    left: 90px;
  }
}

#footer-content .sns-icons .icon {
  font-size: 75px;
}

@media screen and (min-width: 992px) {
  #footer-content .sns-icons .icon {
    font-size: 60px;
  }
}

#footer-content .sns-icons .icon.facebook {
  color: #2c4393;
  margin-right: 36px;
}

@media screen and (min-width: 992px) {
  #footer-content .sns-icons .icon.facebook {
    margin-right: 24px;
  }
}

#footer-content .sns-icons .icon.instagram {
  color: #e45155;
}

#footer-content .inner-links {
  font-size: 21px;
  margin-bottom: 15px;
}

@media screen and (min-width: 992px) {
  #footer-content .inner-links {
    font-size: 18px;
    display: flex;
    justify-content: center;
  }

  #footer-content .inner-links li:not(:last-child) {
    margin-right: 18px;
    padding-right: 18px;
    border-right: 1px solid #CCC;
  }
}

@media screen and (min-width: 992px) {
  #footer-content .company {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 600px;
    margin-left: auto;
  }

  #footer-content .company li {
    margin-bottom: 12px;
  }

  #footer-content .company li:nth-of-type(1) {
    margin-right: 36px;
  }

  #footer-content .company li:nth-of-type(3) {
    margin-right: 36px;
  }
}

#footer-content #past-fair {
  margin-bottom: 30px;
}

#footer-content #past-fair .inner {
  display: inline-block;
}

#footer-content #past-fair .sub-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 18px;
}

#footer-content #past-fair .sub-title:hover span {
  text-decoration: underline;
}

#footer-content #past-fair .sub-title .left-icon {
  margin-right: 15px;
}

#footer-content #past-fair .sub-title .right-icon {
  margin-left: 9px;
  transform: rotate(0deg);
  transition: all 0.3s;
}

#footer-content #past-fair .links {
  line-height: 150%;
  font-size: 15px;
  margin-bottom: 15px;
  transition: all 0.3s;
  max-height: 0px;
  overflow: hidden;
}

#footer-content #past-fair .links li {
  margin-bottom: 9px;
}

#footer-content #past-fair.open .links {
  max-height: 300px;
}

#footer-content #past-fair.open .right-icon {
  transform: rotate(90deg);
}

.main-a #top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 135px 0 60px;
  margin-bottom: 60px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .main-a #top {
    padding: 90px 0 45px;
    margin-bottom: 45px;
  }
}

.main-a #top .short-title {
  font-weight: bold;
  margin-bottom: 12px;
}

.main-a #top .page-title {
  font-size: 39px;
  margin-bottom: 24px;
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  .main-a #top .page-title {
    font-size: 24px;
  }
}

.main-a #top::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 7px;
  background-image: url("/images/common/torn_paper.png");
}

.main-a #description {
  text-align: center;
  margin-bottom: 60px;
}

.main-a #description .title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 12px;
}

.main-a #description .image-list {
  display: flex;
  justify-content: center;
}

.main-a #description .image-list .item {
  width: 30%;
  max-width: 30%;
  padding: 0 9px;
  position: relative;
}

.main-a #description .image-list .item img {
  height: 120px;
}

.main-a #description .image-list .item:not(:last-of-type):after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 81%;
  border-right: 3px dotted #999;
}

.main-a #form-area label {
  font-size: 15px;
}

.main-a #form-area input {
  font-size: 15px;
}

.main-a #form-area textarea {
  font-size: 15px;
}

.main-a #form-area select {
  font-size: 15px;
}

.main-a #form-area .company-name-note {
  margin-left: 60px;
}

.main-a #form-area .form-checks-default {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  border: 1px solid #CCC;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .main-a #form-area .form-checks-default {
    padding: 12px 6px;
  }
}

.main-a #form-area .form-checks-default li {
  width: 25%;
  padding: 6px 0;
}

.main-a #form-area .form-checks-default li:only-child {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .main-a #form-area .form-checks-default li {
    width: 33.33%;
    font-size: 12px;
  }
}

@media screen and (max-width: 576px) {
  .main-a #form-area .form-checks-default li {
    width: 50%;
    font-size: 9px;
    padding: 15px 3px;
  }
}

.main-a #form-area .form-checks-default li label {
  display: flex;
  align-items: center;
  line-height: 100%;
}

@media screen and (max-width: 576px) {
  .main-a #form-area .row {
    flex-direction: column;
  }
}

.main-a #form-area .agree-text {
  color: #08086e;
  white-space: nowrap;
}

.main-a #form-area .submit-area-full {
  position: relative;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .main-a #form-area .submit-area-full {
    margin-top: 15px;
  }
}

.main-a #form-area .submit-area-full .btns {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main-a #form-area .submit-area-full .btns button {
  margin-left: 1.5%;
  margin-right: 1.5%;
}

.main-a #form-area .submit-area-full::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 7px;
  transform: rotateZ(-180deg);
  background-image: url("/images/common/torn_paper.png");
}

.main-a#mypage {
  margin-bottom: 60px;
}

.main-a#mypage #top {
  box-shadow: 0 -1.9px 2.5px rgba(0, 0, 0, 0.057) inset, 0 -5px 6.1px rgba(0, 0, 0, 0.076) inset, 0 -10.1px 11.4px rgba(0, 0, 0, 0.086) inset;
  position: relative;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #top {
    padding: 180px 0 45px;
  }
}

.main-a#mypage #top::after {
  content: none;
}

.main-a#mypage #top .page-title {
  margin-bottom: 90px;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #top .page-title {
    margin-bottom: 15px;
  }
}

.main-a#mypage #my-head-prof {
  position: absolute;
  left: 15px;
  top: 75px;
  display: flex;
  align-items: center;
}

.main-a#mypage #my-head-prof .icon-area {
  position: relative;
}

.main-a#mypage #my-head-prof .icon-area .setting-icon {
  position: absolute;
  right: -6px;
  bottom: -6px;
  background: #FFF;
  border: 1px solid #CCC;
  padding: 3px;
  font-size: 15px;
  border-radius: 50%;
}

.main-a#mypage #my-head-prof .icon-area .setting-icon:hover {
  color: #999;
}

.main-a#mypage #my-head-prof .my-icon {
  height: 60px;
  width: 60px;
  min-width: 60px;
  border-radius: 50%;
  font-size: 45px;
  background: #AAA;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.main-a#mypage #my-head-prof .my-icon:hover {
  background: #BBB;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #my-head-prof .my-icon {
    height: 39px;
    width: 39px;
    min-width: 39px;
    font-size: 30px;
  }
}

.main-a#mypage #my-head-prof .texts {
  margin-left: 15px;
  text-align: left;
}

.main-a#mypage #my-head-prof .texts .type-name {
  font-size: 12px;
  margin-bottom: 6px;
}

.main-a#mypage #my-head-prof .texts .company-name {
  font-size: 15px;
  font-weight: bold;
}

.main-a#mypage #news .date-title {
  font-size: 18px;
  margin-bottom: 30px;
}

.main-a#mypage #news .line {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.main-a#mypage #news .line .icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  background: #AAA;
  color: #FFF;
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-a#mypage #news .line .datetime {
  font-size: 9px;
  color: #666;
}

.main-a#mypage #message {
  display: flex;
  margin-bottom: 45px;
}

.main-a#mypage #message #thread-filter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  margin-bottom: 15px;
  height: 45px;
  border-left: 1px solid #DDD;
  border-radius: 6px;
}

.main-a#mypage #message #thread-filter li {
  flex: 1;
  text-align: center;
  background: #CCC;
  color: #FFF;
  padding: 12px 3px;
  cursor: pointer;
}

.main-a#mypage #message #thread-filter li:nth-of-type(1) {
  border-radius: 6px 0 0 6px;
}

.main-a#mypage #message #thread-filter li:nth-of-type(2) {
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
}

.main-a#mypage #message #thread-filter li:nth-of-type(3) {
  border-radius: 0 6px 6px 0;
}

.main-a#mypage #message #thread-filter li.active {
  position: relative;
  color: #FFF;
  background: #3490dc;
}

.main-a#mypage #message #thread-filter-old {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  margin-bottom: 15px;
  height: 45px;
}

.main-a#mypage #message #thread-filter-old li {
  width: 32%;
  text-align: center;
  background: #CCC;
  padding: 12px 3px;
  border: 1px solid #DDD;
}

.main-a#mypage #message #thread-filter-old li.active {
  position: relative;
  color: #FFF;
  background: #666;
}

.main-a#mypage #message #thread-filter-old li.active:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -9px;
  border: 9px solid transparent;
  border-top: 9px solid #666;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message.in-room #thread-list {
    display: none;
  }
}

.main-a#mypage #message #thread-list {
  width: 270px;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #thread-list {
    width: 100%;
  }
}

.main-a#mypage #message #thread-list .thread-area {
  border: 1px solid #CCC;
  border-radius: 3px;
  overflow-y: auto;
  height: 660px;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #thread-list .thread-area {
    height: auto;
  }
}

.main-a#mypage #message #thread-list .thread-area .thread {
  display: none;
}

.main-a#mypage #message #thread-list .thread-area.status1 .thread.status1 {
  display: block;
}

.main-a#mypage #message #thread-list .thread-area.status2 .thread.status2 {
  display: block;
}

.main-a#mypage #message #thread-list .thread-area.status3 .thread.status3 {
  display: block;
}

.main-a#mypage #message #thread-list .thread {
  padding: 15px;
}

.main-a#mypage #message #thread-list .thread.active {
  background: #EEE;
}

.main-a#mypage #message #thread-list .thread:not(:last-of-type) {
  border-bottom: 1px solid #CCC;
}

.main-a#mypage #message #thread-list .thread .thread-header {
  display: flex;
}

.main-a#mypage #message #thread-list .thread .thread-header .user-status {
  flex: 1;
}

.main-a#mypage #message #thread-list .thread .thread-header .thread-icon {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 9px;
  background: #999;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.main-a#mypage #message #thread-list .thread .thread-header .time {
  font-size: 10px;
  text-align: right;
}

.main-a#mypage #message #thread-list .thread .thread-header .type {
  font-size: 12px;
}

.main-a#mypage #message #thread-list .thread .thread-body {
  margin-top: 9px;
  font-size: 12px;
  margin-bottom: 15px;
}

.main-a#mypage #message #message-list {
  position: relative;
  flex: 1;
  margin-left: 45px;
}

.main-a#mypage #message #message-list .back-to-list {
  display: none;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #message-list {
    margin-left: 0;
  }

  .main-a#mypage #message #message-list .chat-sticky {
    position: sticky;
    top: 60px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.75);
    padding: 12px 0;
  }

  .main-a#mypage #message #message-list .back-to-list {
    display: block;
    margin-bottom: 12px;
  }
}

.main-a#mypage #message #message-list .room-name {
  height: 30px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #message-list .room-name .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 96%;
  }
}

.main-a#mypage #message #message-list .room-name .room-icon {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #999;
  color: #FFF;
}

.main-a#mypage #message #message-list .date {
  text-align: center;
  font-size: 15px;
  width: 100%;
  margin-bottom: 30px;
  display: block;
  border-radius: 30px;
  background: #999;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  padding: 3px;
}

.main-a#mypage #message #message-list .message-area {
  height: 450px;
  max-height: 450px;
  overflow-y: scroll;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #message-list .message-area {
    height: auto;
    max-height: 45vh;
    max-height: none;
    overflow-y: auto;
    padding-bottom: 120px;
  }
}

.main-a#mypage #message #message-list .message-area .posted,
.main-a#mypage #message #message-list .message-area .reseaved {
  display: flex;
  margin-bottom: 15px;
  position: relative;
}

.main-a#mypage #message #message-list .message-area .posted .message {
  margin-left: 20%;
  margin-right: 15px;
}

.main-a#mypage #message #message-list .message-area .posted .message::before,
.main-a#mypage #message #message-list .message-area .posted .message::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 15px;
  background: #EEE;
  height: 24px;
  width: 9px;
  border-radius: 0 9px 9px 0;
}

.main-a#mypage #message #message-list .message-area .posted .message::after {
  background: #FFF;
  top: 6px;
  right: -12px;
  width: 12px;
}

.main-a#mypage #message #message-list .message-area .reseaved .message {
  margin-left: 60px;
  margin-right: 20%;
}

.main-a#mypage #message #message-list .message-area .reseaved .message::before,
.main-a#mypage #message #message-list .message-area .reseaved .message::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 15px;
  background: #EEE;
  height: 24px;
  width: 9px;
  border-radius: 9px 0 0 9px;
}

.main-a#mypage #message #message-list .message-area .reseaved .message::after {
  background: #FFF;
  top: 6px;
  left: -12px;
  width: 12px;
}

.main-a#mypage #message #message-list .message-area .thread-icon {
  width: 45px;
  min-width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 9px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #999;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-a#mypage #message #message-list .message-area .message {
  position: relative;
  background: #EEE;
  border-radius: 12px;
  padding: 15px;
  width: 80%;
  white-space: break-spaces;
}

.main-a#mypage #message #message-list .message-area .message .time {
  font-size: 9px;
  text-align: right;
  display: block;
}

.main-a#mypage #message #message-list .message-area .message .chat-image,
.main-a#mypage #message #message-list .message-area .message .chat-video {
  max-width: 100%;
  height: 240px;
}

@media screen and (max-width: 991px) {
  .main-a#mypage #message #message-list .message-area .message .chat-image,
  .main-a#mypage #message #message-list .message-area .message .chat-video {
    height: auto;
  }
}

.main-a#mypage #message #message-list .message-area .message .chat-file {
  display: inline-block;
  padding: 6px;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
}

.main-a#mypage #message #message-list .message-area .message .chat-file:hover {
  background: #FAFAFA;
  color: #084298;
  background: #cfe2ff;
  border-color: #b6d4fe;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.03), 0 5px 6.1px rgba(0, 0, 0, 0.039), 0 8.1px 11.4px rgba(0, 0, 0, 0.045);
}

.main-a#mypage #message #message-list .message-area .message .chat-file i {
  margin-right: 12px;
}

.main-a#mypage #message #message-list .message-area .message-delete-switch {
  background: #666;
  color: #FFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 6px;
  bottom: -6px;
  width: 21px;
  height: 21px;
  font-size: 12px;
  cursor: pointer;
}

.main-a#mypage #message #message-list .message-area .message-delete-switch i {
  cursor: pointer;
}

.main-a#mypage #message #message-list #message-footer {
  background: #EEE;
  padding: 15px;
  width: 100%;
  height: 240px;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #message #message-list #message-footer {
    position: fixed;
    bottom: 60px;
    left: 0px;
    height: 180px;
    font-size: 12px;
  }
}

.main-a#mypage #message #message-list #message-footer textarea {
  border: 1px solid #CCC;
  background: #FFF;
  width: 100%;
  padding: 12px;
  border-radius: 3px;
  height: 120px;
}

.main-a#mypage #message #message-list #message-footer #chat-message-submit {
  padding: 9px 3px;
  width: 50%;
  white-space: nowrap;
}

.main-a#mypage #message #message-list #message-footer #chat-file-submit {
  padding: 9px 3px;
  width: 30%;
  margin: 0;
  margin-left: auto;
  white-space: nowrap;
}

.main-a#mypage #message #message-list #message-footer .btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.main-a#mypage #message .statuses {
  display: flex;
  font-size: 12px;
}

.main-a#mypage #message .statuses .status-switch {
  flex: 1;
  padding: 3px 3px !important;
  text-align: center;
  white-space: nowrap;
  color: #666;
  background: #DDD;
  border: 1px solid #CCC;
}

.main-a#mypage #message .statuses .status-switch#status2 {
  margin-left: auto;
  margin-right: 15px;
}

.main-a#mypage #message .statuses .status-switch:nth-of-type(1) {
  border-radius: 6px 0 0 6px;
}

.main-a#mypage #message .statuses .status-switch:nth-of-type(3) {
  border-radius: 0 6px 6px 0;
}

.main-a#mypage #message .statuses .status-switch.active {
  color: #084298;
  background: #cfe2ff;
  border-color: #b6d4fe;
  /*
                          color: #0f5132;
                          background-color: #d1e7dd;
                          border-color: #badbcc;
  */
}

.main-a#mypage #like .manual-link {
  float: left;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #like .manual-link {
    display: block;
    float: none;
    margin-bottom: 15px;
  }
}

.main-a#mypage #like .link {
  text-align: right;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .main-a#mypage #like .link {
    text-align: center;
  }
}

.main-a#mypage #like .link li {
  display: inline-block;
}

.main-a#mypage #like .link li:not(:last-of-type):after {
  content: "/";
  margin: 0 9px;
}

.main-a#mypage #like #list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main-a#mypage #like #list:after {
  content: "";
  width: 24%;
}

@media screen and (max-width: 991px) {
  .main-a#mypage #like #list:after {
    width: 32%;
  }
}

.main-a#mypage #like #list .item {
  position: relative;
  width: 24%;
  border: 1px solid #CCC;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 8.1px 11.4px rgba(0, 0, 0, 0.086);
}

@media screen and (max-width: 991px) {
  .main-a#mypage #like #list .item {
    width: 32%;
  }
}

@media screen and (min-width: 991px) {
  .main-a#mypage #like #list .item:last-of-type:nth-of-type(2n):not(:nth-of-type(4n)) {
    margin-right: 25.33%;
  }
}

@media screen and (max-width: 768px) {
  .main-a#mypage #like #list .item {
    width: 49%;
  }
}

.main-a#mypage #like #list .item .image img {
  width: 100%;
  border-radius: 15px 15px 0 0;
}

.main-a#mypage #like #list .item .image div {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #CCC;
  border-radius: 15px 15px 0 0;
  height: 207px;
}

@media screen and (max-width: 1399px) {
  .main-a#mypage #like #list .item .image div {
    height: 177px;
  }
}

@media screen and (max-width: 1199px) {
  .main-a#mypage #like #list .item .image div {
    height: 150px;
  }
}

@media screen and (max-width: 991px) {
  .main-a#mypage #like #list .item .image div {
    height: 148px;
  }
}

@media screen and (max-width: 768px) {
  .main-a#mypage #like #list .item .image div {
    height: 169px;
  }
}

@media screen and (max-width: 576px) {
  .main-a#mypage #like #list .item .image div {
    height: 30.6vw;
  }
}

.main-a#mypage #like #list .item .detail {
  padding: 12px;
}

.main-a#mypage #like #list .item .detail .name {
  font-weight: bold;
}

.main-a#mypage #like #list .item .detail .category {
  font-size: 12px;
  margin-bottom: 9px;
}

.main-a#mypage #like #list .item .detail .information {
  font-size: 12px;
  max-height: 5.4em;
  overflow: auto;
}

.main-a#mypage #like #list .item .btns {
  display: flex;
  justify-content: flex-end;
  padding: 9px;
}

.main-a#mypage #like #list .item .btns .btn-icon {
  margin-left: 9px;
  background: #CCC;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 24px;
}

@media screen and (max-width: 576px) {
  .main-a#mypage #like #list .item .btns .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

.main-a#mypage #like #list .item .btns .btn-icon.mail {
  background: #58cb67;
  color: #c1eec6;
}

.main-a#mypage #like #list .item .btns .btn-icon.like.active {
  background: #d45d60;
}

.main-a#mypage #like #list .item .btns .btn-icon.like.active .icon-active {
  color: #ff9ea1;
}

.main-a#mypage #like #list .item .btns .btn-icon.like {
  background: #d8d8d8;
  color: #FFF;
}

.main-a #chatUpload {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
}

.main-a #chatUpload.dz-drag-hover {
  opacity: 0.3;
  margin: -15px;
  padding: 12px;
  border: 3px dashed #CCC;
  border-radius: 30px;
  overflow: hidden;
}

.main-a #chatUpload.dz-drag-hover .message-area:after {
  content: "\FF0B";
  font-size: 60px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.main-a #change-types {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 45px;
}

@media screen and (max-width: 768px) {
  .main-a #change-types li {
    width: 49%;
    font-size: 12px;
  }
}

.main-a #change-types a {
  white-space: nowrap;
  border: 3px solid #CCC;
  border-radius: 30px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  max-width: 100%;
  background-color: #FAFAFA;
  transition: background-color 0.3s;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.017), 0 5px 6.1px rgba(0, 0, 0, 0.026), 0 8.1px 11.4px rgba(0, 0, 0, 0.086);
}

.main-a #change-types a:hover {
  text-decoration: none;
  background-color: #EEE;
}

.main-a .user-icon {
  border-radius: 50%;
}

.main-a #sitemap {
  display: flex;
}

@media screen and (max-width: 768px) {
  .main-a #sitemap {
    flex-direction: column;
  }
}

.main-a #sitemap ul {
  flex: 1;
  margin: 0 15px 30px;
}

.main-a #sitemap ul .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #CCC;
}

.main-a #sitemap ul li {
  margin-bottom: 12px;
}

.main-a #terms {
  margin-bottom: 150px;
}

.main-a #terms ul {
  list-style: none;
  margin-bottom: 30px;
}

.main-a #terms ul li {
  margin-left: 12px;
}

.main-a #terms ul li ul {
  margin-bottom: 0;
}

.main-a #terms ul .sub-title {
  font-weight: bold;
  margin-bottom: 9px;
  margin-left: 0px;
}

.main-a .delete-icon {
  cursor: pointer;
}

.main-a #set-icon-block {
  min-height: 180px;
}

.main-a #userIconDropzone {
  min-height: 150px;
  min-width: 150px;
}

.main-a .product-enabled-switch {
  position: absolute;
  left: 9px;
  bottom: 21px;
}

.main-a #bnr-insta {
  text-align: center;
  margin-bottom: 30px;
}

.main-a #bnr-insta img {
  margin: auto;
  max-width: 100%;
}

.main-a #bnr-insta img.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .main-a #bnr-insta img.sp {
    display: block;
  }

  .main-a #bnr-insta img.pc {
    display: none;
  }
}

.main-b {
  background: #f7eee0;
}

.main-b #talk-image {
  width: 90%;
  margin: 45px auto 90px;
  display: block;
}

.main-b #talk-image-sp {
  width: 90%;
  margin: 45px auto 90px;
  display: none;
}

@media screen and (max-width: 991px) {
  .main-b #talk-image {
    display: none;
  }

  .main-b #talk-image-sp {
    display: block;
  }
}

.main-b .top-link-regist {
  font-size: 18px;
}

.main-b #top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 135px 0 60px;
  margin-bottom: 60px;
  text-align: center;
  color: #FFF;
}

@media screen and (max-width: 761px) {
  .main-b #top {
    padding: 90px 0 45px;
    margin-bottom: 45px;
  }
}

.main-b #top .page-title {
  font-size: 39px;
  margin-bottom: 24px;
  font-weight: normal;
}

.main-b #top .title-icon {
  font-size: 45px;
  margin-bottom: 24px;
}

.main-b #top::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 11px;
  background-image: url("/images/common/beige-edge-top.png");
}

.main-b #description {
  text-align: center;
  margin-bottom: 60px;
  padding: 45px 30px 45px 60px;
  background: #FFF;
  background-image: url("/images/common/note-edge.png");
  background-repeat: repeat-y;
}

@media screen and (max-width: 761px) {
  .main-b #description {
    width: 94%;
    padding: 45px 15px 0px 30px;
    background-size: 18px;
  }
}

.main-b #description .note-line {
  background: #f7eee0;
  background-image: repeating-linear-gradient(0deg, white 0, white 33px, transparent 33px, transparent 34px);
}

.main-b #description .title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 12px;
}

@media screen and (max-width: 761px) {
  .main-b #description .title {
    font-size: 24px;
  }
}

.main-b #description .image-list {
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
}

@media screen and (max-width: 576px) {
  .main-b #description .image-list {
    flex-direction: column;
  }
}

.main-b #description .image-list .item {
  max-width: 33%;
  flex: 1;
  padding: 0 0 90px;
  position: relative;
}

@media screen and (max-width: 761px) {
  .main-b #description .image-list .item {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 576px) {
  .main-b #description .image-list .item {
    font-size: 1em;
  }
}

@media screen and (max-width: 576px) {
  .main-b #description .image-list .item {
    padding: 0 0px 30px;
    max-width: 100%;
  }
}

.main-b #description .image-list .item img {
  height: 150px;
}

.main-b #description .image-list .item .description {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 576px) {
  .main-b #description .image-list .item .description {
    max-width: 100%;
  }
}

@media screen and (min-width: 577px) {
  .main-b #description .image-list .item:not(:last-of-type):after {
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
    height: 150px;
    border-right: 3px dotted #999;
  }
}

.main-b #description .image-list .item .link-btn-brown {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 90%;
  max-width: 270px;
  transform: translateX(-50%);
}

@media screen and (max-width: 576px) {
  .main-b #description .image-list .item .link-btn-brown {
    position: relative;
  }
}

.main-b .link-btn-brown {
  background: #4D3F3C;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  height: 39px;
  width: 90%;
  border-radius: 30px;
  margin-bottom: 30px;
  padding: 0;
  color: #EFEFEF;
}

.main-b .link-btn-brown:hover {
  background: #302826;
  color: #FFF;
  text-decoration: none;
}

.main-b .link-btn-large {
  position: relative;
  background: #FAFAFA;
  transition: 0.3s;
  height: 60px;
  width: 390px;
  max-width: 96%;
  border-radius: 30px;
  padding: 0;
  font-size: 21px;
  color: #4D3F3C;
}

.main-b .link-btn-large:hover {
  background: #FFF;
  color: #302826;
}

.main-b #bottom-information {
  padding: 120px 0 90px;
}

@media screen and (max-width: 761px) {
  .main-b #bottom-information {
    padding: 60px 0 45px;
  }
}

.main-b #bottom-information::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 11px;
  transform: rotateZ(-180deg);
  background-image: url("/images/common/beige-edge-top.png");
}

.main-b #bottom-information .brown-zone {
  background: #4d3f3c;
  color: #FFF;
  padding: 90px 0 60px;
}

@media screen and (max-width: 761px) {
  .main-b #bottom-information .brown-zone {
    padding: 45px 9px 45px;
  }
}

.main-b #bottom-information .brown-zone .information-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: justify;
  position: relative;
  z-index: 1;
}

.main-b #bottom-information .brown-zone .info-icon {
  color: #4D3F3C;
  width: 69px;
  height: 69px;
  font-size: 45px;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-b #bottom-information .brown-zone .title {
  font-weight: bold;
  font-size: 24px;
}

#comic {
  min-height: 100vh;
  background: url("/images/comic-top-halftone.png") no-repeat #ed8e91;
  background-position: center 90px;
  background-size: 660px;
}

@media screen and (max-width: 761px) {
  #comic {
    background-position: center 75px;
    background-size: 75%;
  }
}

#comic #top {
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 135px 0 60px;
  margin-bottom: 60px;
  text-align: center;
}

@media screen and (max-width: 761px) {
  #comic #top {
    padding: 105px 0 30px;
    margin-bottom: 30px;
  }
}

#comic #top .page-title {
  font-weight: normal;
  font-size: 36px;
}

@media screen and (max-width: 761px) {
  #comic #top .page-title {
    font-size: 30px;
  }
}

#comic #top .description {
  line-height: 210%;
  margin-bottom: 6em;
}

@media screen and (max-width: 761px) {
  #comic #top .description {
    margin-bottom: 3em;
  }
}

#comic .comics-list {
  position: relative;
  z-index: 1;
  width: 750px;
  max-width: 100%;
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
  background: #FFF;
}

#comic .comics-list .title {
  font-size: 36px;
  text-align: center;
  color: #333;
  padding: 60px 0;
}

#comic .comics-list .title .sub-title {
  margin-top: 15px;
  display: block;
  font-size: 18px;
}

#comic .comics-list .visual {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: 100%;
  border-radius: 30px 30px 0 0;
}

#comic .comic-gallery {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#comic .comic-gallery img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
}

#comic .comic-gallery li:last-child img {
  border-radius: 0 0 30px 30px;
}

#comic .short .comic-gallery {
  display: none;
}

#comic .more {
  display: none;
}

#comic .short .more {
  display: block;
  text-align: center;
  padding: 9px 0;
  background: #EEE;
  border-radius: 0 0 30px 30px;
}

.search-page {
  /*
      & .search-param-table {
          width: 100%;

          & th,
          & td {
              vertical-align: middle;
              padding: 9px 12px;
              border: 1px solid #DDD;

              @media screen and (max-width: 767px) {
                  display: block;
                  padding: 9px 0px;
              }
          }
          & th {
              white-space: nowrap;
              text-align: center;
              font-weight: normal;
              color: #FFF;
          }

          & ul {
              //display: flex;
              //flex-wrap: wrap;

              & li {
                  padding: 9px 0 9px 12px;
                  width: 186px;
                  display: inline-block;

                  @media screen and (max-width: 992px) {
                      width: 33.3%;
                      font-size: 12px;
                  }
                  @media screen and (max-width: 576px) {
                      width: 50%;
                  }

                  & label {
                      display: flex;
                      align-items: center;
                      line-height: 100%;
                  }
              }
          }
      }
  */
}

.search-page .main-width {
  max-width: 96%;
  width: 1200px;
  margin: 0 auto;
}

.search-page::before {
  content: "";
  background: url("/images/2023/main-bg.svg");
  background-size: 150px;
  position: absolute;
  top: 0;
  left: 0;
  height: 108px;
  width: 100%;
}

.search-page .page-title {
  font-size: 1.2em;
  display: inline-block;
}

.search-page .search-hit-text {
  float: right;
}

@media screen and (max-width: 767px) {
  .search-page .search-hit-text {
    float: none;
  }
}

.search-page #search-area {
  margin-top: 108px;
  padding: 45px 0;
  background: #FCF9F4;
  position: relative;
}

.search-page #search-area .page-title {
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 39px;
}

.search-page #search-area .page-title.type-business {
  color: #3D9ED4;
  background-image: url("/images/2023/business.svg");
}

.search-page #search-area .page-title.type-buyer {
  color: #5AC85A;
  background-image: url("/images/2023/buyer.svg");
}

.search-page #search-area .page-title.type-product {
  color: #F85555;
  background-image: url("/images/2023/product.svg");
}

.search-page #search-area .search-keyword {
  width: 360px;
  background: #FFF;
  border-radius: 6px;
  padding: 9px 15px;
  position: absolute;
  top: 39px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 992px) {
  .search-page #search-area .search-keyword {
    width: 100%;
    max-width: 480px;
    position: static;
    margin: 0 auto 30px;
    transform: none;
  }
}

@media screen and (max-width: 767px) {
  .search-page #search-area .search-keyword {
    width: 100%;
    position: static;
  }
}

.search-page #search-area .search-keyword input {
  font-size: 15px;
  padding-right: 69px;
  border: 0;
  border-bottom: 1px solid #CCC;
  border-radius: 0;
}

.search-page #search-area .search-keyword .btn-search-icon {
  left: 100%;
  width: 39px;
  transition: 0.3s;
  border-bottom: 1px solid #CCC;
  border-radius: 0;
}

.search-page #search-area .search-keyword .btn-search-icon i {
  cursor: pointer;
  transform: scaleX(-1);
}

.search-page #search-area .search-keyword.type-business * {
  color: #3D9ED4;
  border-color: #3D9ED4;
}

.search-page #search-area .search-keyword.type-business *::-moz-placeholder {
  color: #3D9ED4 !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-business *:-ms-input-placeholder {
  color: #3D9ED4 !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-business *::placeholder {
  color: #3D9ED4 !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-buyer * {
  color: #5AC85A;
  border-color: #5AC85A;
}

.search-page #search-area .search-keyword.type-buyer *::-moz-placeholder {
  color: #5AC85A !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-buyer *:-ms-input-placeholder {
  color: #5AC85A !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-buyer *::placeholder {
  color: #5AC85A !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-product * {
  color: #F85555;
  border-color: #F85555;
}

.search-page #search-area .search-keyword.type-product *::-moz-placeholder {
  color: #F85555 !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-product *:-ms-input-placeholder {
  color: #F85555 !important;
  opacity: 0.6;
}

.search-page #search-area .search-keyword.type-product *::placeholder {
  color: #F85555 !important;
  opacity: 0.6;
}

.search-page .search-params {
  background: #FFF;
  padding: 45px;
}

@media screen and (max-width: 992px) {
  .search-page .search-params {
    padding: 24px;
  }
}

@media screen and (max-width: 767px) {
  .search-page .search-params {
    padding: 12px;
  }
}

.search-page .search-params .submit-btns {
  display: flex;
  width: 90%;
  max-width: 450px;
  margin: 30px auto 0;
  justify-content: space-between;
  align-items: center;
}

.search-page .search-params .submit-btns .reset-btn {
  width: 180px;
  padding: 9px;
  cursor: pointer;
  text-align: center;
  margin-right: 12px;
  transition: background-color 0.3s;
}

.search-page .search-params .submit-btns .reset-btn:hover {
  background: #F5F5F5;
}

.search-page .search-params .submit-btns .search-submit {
  background: #3D9ED4;
  color: #FFF;
  width: 180px;
  padding: 9px;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.search-page .search-params .submit-btns .search-submit.type-business {
  background: #3D9ED4;
}

.search-page .search-params .submit-btns .search-submit.type-business:hover {
  background: #5585A1;
}

.search-page .search-params .submit-btns .search-submit.type-buyer {
  background: #5AC85A;
}

.search-page .search-params .submit-btns .search-submit.type-buyer:hover {
  background: #58A352;
}

.search-page .search-params .submit-btns .search-submit.type-product {
  background: #F85555;
}

.search-page .search-params .submit-btns .search-submit.type-product:hover {
  background: #D64C4B;
}

.search-page .search-params dt {
  margin-bottom: 18px;
}

.search-page .search-params dd {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #CCC;
}

.search-page .search-params dd ul li {
  padding: 9px 0 9px 12px;
  width: 19.5%;
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .search-page .search-params dd ul li {
    width: 30%;
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .search-page .search-params dd ul li {
    width: 49%;
  }
}

.search-page .search-params dd ul li label {
  display: flex;
  align-items: center;
  line-height: 100%;
}

.search-page #search-result {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  padding: 0px 0 180px;
}

.search-page #search-result::after {
  content: "";
  height: 180px;
  width: 100%;
  background: #EEE;
  position: absolute;
}

.search-page #search-result .item-list {
  padding-top: 120px;
  display: flex;
  flex-wrap: wrap;
}

.search-page #search-result .category-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 18px solid black;
  font-size: 18px;
  padding-left: 24px;
  margin-bottom: 60px;
  height: 45px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
}

.search-page #search-result .category-title.type-1 {
  color: #974445;
  border-color: #974445;
  background-image: url("/images/2023/ichimatsu-1.svg");
}

.search-page #search-result .category-title.type-2 {
  color: #449750;
  border-color: #449750;
  background-image: url("/images/2023/ichimatsu-2.svg");
}

.search-page #search-result .category-title.type-3 {
  color: #455397;
  border-color: #455397;
  background-image: url("/images/2023/ichimatsu-3.svg");
}

.search-page #search-result .more-link-area {
  width: 100%;
}

.search-page #search-result .more-link-btn {
  color: #FFF;
  width: 180px;
  padding: 9px;
  border-radius: 3px;
  transition: background-color 0.3s;
  background: #606060;
}

.search-page #search-result .more-link-btn:hover {
  background: #303030;
}

.search-page .pagination {
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.search-page .pagination-area {
  width: 100%;
}

.pagination .page-link {
  color: #333;
}

.pagination .dot {
  width: 24px;
  text-align: center;
  background: #FFF;
}

.pagination .dot .page-link {
  padding-left: 0;
  padding-right: 0;
}

.pagination .active .page-link {
  background: #4D3F3C;
  border: 1px solid black;
  font-weight: bold;
}

.search-list-item {
  background: #FFF;
  margin-bottom: 60px;
  border-radius: 3px;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  border: 1px solid #DDD;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076);
  /*,
  0 10.1px 11.4px rgba(0, 0, 0, 0.086),
  0 19.2px 19.8px rgba(0, 0, 0, 0.092)
  0 38.4px 34.8px rgba(0, 0, 0, 0.1),
  0 101px 74px rgba(0, 0, 0, 0.13)
  /*
  @media screen and (max-width: 767px) {
      flex-direction: column;
  }
  */
  width: 31%;
  margin-left: 3.5%;
}

@media screen and (min-width: 993px) {
  .search-list-item:nth-of-type(3n -2) {
    margin-left: 0;
  }
}

@media screen and (max-width: 992px) {
  .search-list-item {
    width: 49%;
    margin-left: 2%;
  }

  .search-list-item:nth-of-type(odd) {
    margin-left: 0;
  }
}

@media screen and (max-width: 576px) {
  .search-list-item {
    width: 100%;
    margin-left: 0;
  }
}

.search-list-item .detail-link {
  text-decoration: underline;
}

.search-list-item .detail-link:hover {
  text-decoration: none;
}

.search-list-item .text-zone {
  margin: 12px 18px;
  flex: 1;
  position: relative;
  padding-bottom: 2em;
}

@media screen and (max-width: 767px) {
  .search-list-item .text-zone {
    font-size: 13px;
    margin: 6px 12px;
    overflow-x: auto;
  }
}

.search-list-item .text-zone .bg-cateogry {
  color: #FFF;
  padding: 9px 15px;
  font-size: 10px;
  white-space: nowrap;
}

.search-list-item .search-item-title {
  font-size: 18px;
}

.search-list-item .description {
  border-radius: 3px;
}

.search-list-item .description .inner {
  max-height: 4.2em;
  overflow: hidden;
  display: inline-block;
}

.search-list-item .icon-l {
  font-size: 18px;
}

.search-list-item .item-footer {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.search-list-item .item-footer p:not(:last-child) {
  margin-right: 18px;
}

.search-list-item .noimage-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CCC;
  color: #333;
  width: 100%;
  max-width: 100%;
  border-radius: 15px 0 0 15px;
}

.search-list-item .noimage-box img {
  width: 100%;
}

.search-list-item .product-galleries {
  width: 100%;
  border-radius: 3px 0 0 3px;
}

.search-list-item .product-galleries img {
  display: block;
  width: 100%;
}

.search-list-item .thumb-six {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: stretch;
  align-items: flex-start;
  height: 260px;
  max-height: 260px;
  width: 249px;
  margin: 0 6px;
}

.search-list-item .thumb-six .thumb {
  height: 32%;
  display: block;
  margin-right: 6px;
}

.search-list-item .thumb-six .thumb:nth-of-type(2),
.search-list-item .thumb-six .thumb:nth-of-type(5) {
  margin: 2% 0;
}

.search-list-item .thumb-six.thumbs2,
.search-list-item .thumb-six.thumbs3 {
  width: 120px;
}

@media screen and (max-width: 1199px) {
  .search-list-item .thumb-six {
    display: none;
  }
}

.search-list-item .swiper-slide {
  align-items: flex-start;
  overflow: hidden;
}

.search-list-item .swiper-slide div {
  height: 100%;
}

.search-list-item .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.search-list-item .swiper-pagination {
  white-space: nowrap;
}

.search-list-item .rank-label {
  position: absolute;
  top: 50%;
  left: -22.5px;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #629142;
  color: #FFF;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-weight: bold;
  font-size: 24px;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .search-list-item .rank-label {
    left: -9px;
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
}

.search-list-item.rank1 .rank-label {
  background: #ec7e00;
}

.search-list-item.rank2 .rank-label {
  background: #999997;
}

.search-list-item.rank3 .rank-label {
  background: #ab5714;
}

.search-list-item.mini {
  flex-direction: column-reverse;
  width: 31.5%;
}

@media screen and (max-width: 992px) {
  .search-list-item.mini {
    width: 48%;
  }
}

.search-list-item.mini .noimage-box {
  width: 100%;
  max-width: 100%;
  border-radius: 15px 15px 0 0;
}

.search-list-item.mini .noimage-box img {
  width: 100%;
}

.search-list-item.mini .product-galleries {
  width: 100%;
  max-width: 100%;
  border-radius: 15px 15px 0 0;
}

.search-list-item.mini .rank-label {
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .search-list-item.mini .rank-label {
    top: -30px;
  }
}

.search-list-item.mini .text-zone {
  flex: none;
}

@media screen and (max-width: 767px) {
  .search-list-item.mini .text-zone {
    padding-bottom: 9px;
  }

  .search-list-item.mini .item-footer {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    position: static;
    align-items: flex-start;
    line-height: 200%;
  }
}

.search-list-item .bg-cateogry {
  color: #FFF;
  background-color: green;
}

.search-list-item .bg-cateogry.category1 {
  background-color: #974445;
}

.search-list-item .bg-cateogry.category2 {
  background-color: #449750;
}

.search-list-item .bg-cateogry.category3 {
  background-color: #455397;
}

.search-list-item .bg-cateogry.category4 {
  background-color: #7c523c;
}

.search-list-item .bg-cateogry.site {
  background-color: #4d3f3c;
}

.search-list-item .bg-cateogry.sort {
  background-color: #a2a72b;
}

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

.detail-page {
  background: #accbc8;
}

.detail-page .tag-link {
  color: #1d9bf0;
}

.detail-page .print-btn {
  font-size: 15px;
  color: #7c7c7c;
  padding: 0;
  position: absolute;
  top: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

.detail-page .print-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .detail-page .print-btn {
    display: none;
  }
}

.detail-page .bg-detail-wide {
  margin-bottom: 90px;
  background: #eaf2f1;
  border-radius: 15px;
  padding: 60px 90px;
}

@media screen and (max-width: 1199px) {
  .detail-page .bg-detail-wide {
    padding: 48px 15px 30px;
    margin-bottom: 45px;
  }
}

.detail-page .bg-detail-wide .section-title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .section-title {
    margin-bottom: 45px;
  }
}

.detail-page .bg-detail-wide .main-flex {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .main-flex {
    flex-direction: column;
    margin-bottom: 45px;
  }
}

.detail-page .bg-detail-wide .main-flex .title-area {
  flex: 1;
}

.detail-page .bg-detail-wide .main-flex .title-area .name {
  font-size: 30px;
  padding-right: 165px;
  text-align: justify;
  text-decoration: underline;
}

@media screen and (max-width: 576px) {
  .detail-page .bg-detail-wide .main-flex .title-area .name {
    padding-right: 0;
    font-size: 24px;
  }
}

.detail-page .bg-detail-wide .main-flex .title-area .description {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .main-flex .title-area .description {
    margin-bottom: 15px;
  }
}

.detail-page .bg-detail-wide .main-flex .galleries {
  position: relative;
}

.detail-page .bg-detail-wide .main-flex .galleries .swiper-prev {
  left: -21px;
}

.detail-page .bg-detail-wide .main-flex .galleries .swiper-next {
  right: -21px;
}

.detail-page .bg-detail-wide .main-flex .galleries .swiper-prev,
.detail-page .bg-detail-wide .main-flex .galleries .swiper-next {
  border: 3px solid rgba(0, 0, 0, 0.6);
  border-right: transparent;
  border-top: transparent;
}

.detail-page .bg-detail-wide .main-flex .galleries .out-box-pagination {
  width: 100%;
}

.detail-page .bg-detail-wide .main-flex .galleries .out-box-pagination .swiper-pagination-bullet {
  margin: 0 4px;
}

.detail-page .bg-detail-wide .main-flex .galleries img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .detail-page .bg-detail-wide .main-flex .galleries {
    width: 48%;
    max-width: 48%;
    margin-right: 4%;
  }
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .main-flex .galleries {
    margin-bottom: 45px;
  }
}

.detail-page .bg-detail-wide .sns-frames {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .sns-frames {
    flex-direction: column;
  }
}

.detail-page .bg-detail-wide .sns-frames .sns {
  width: 48%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .detail-page .bg-detail-wide .sns-frames .sns {
    width: 100%;
    min-height: 300px;
  }

  .detail-page .bg-detail-wide .sns-frames .sns:not(:last-of-type) {
    margin-bottom: 45px;
  }
}

.detail-page #product-detail {
  margin-top: 180px;
}

@media screen and (max-width: 768px) {
  .detail-page #product-detail {
    margin-top: 120px;
  }
}

.detail-page #product-detail .galleries .no-swiper .video-in-box,
.detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.detail-page #product-detail .galleries .no-swiper .video-in-box video,
.detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box video {
  height: 100%;
  width: auto;
}

.detail-page #product-detail .galleries .no-swiper .video-in-box,
.detail-page #product-detail .galleries .no-swiper iframe,
.detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box,
.detail-page #product-detail .galleries .swiper-with-thumbs iframe {
  width: 540px !important;
  height: 315px !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

@media screen and (max-width: 1399px) {
  .detail-page #product-detail .galleries .no-swiper .video-in-box,
  .detail-page #product-detail .galleries .no-swiper iframe,
  .detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box,
  .detail-page #product-detail .galleries .swiper-with-thumbs iframe {
    width: 440px !important;
    height: 260px !important;
  }
}

@media screen and (max-width: 991px) {
  .detail-page #product-detail .galleries .no-swiper .video-in-box,
  .detail-page #product-detail .galleries .no-swiper iframe,
  .detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box,
  .detail-page #product-detail .galleries .swiper-with-thumbs iframe {
    width: 320px !important;
    height: 180px !important;
  }
}

@media screen and (max-width: 768px) {
  .detail-page #product-detail .galleries .no-swiper .video-in-box,
  .detail-page #product-detail .galleries .no-swiper iframe,
  .detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box,
  .detail-page #product-detail .galleries .swiper-with-thumbs iframe {
    width: 540px !important;
    height: 295px !important;
  }
}

@media screen and (max-width: 575px) {
  .detail-page #product-detail .galleries .no-swiper .video-in-box,
  .detail-page #product-detail .galleries .no-swiper iframe,
  .detail-page #product-detail .galleries .swiper-with-thumbs .video-in-box,
  .detail-page #product-detail .galleries .swiper-with-thumbs iframe {
    width: 540px !important;
    height: 255px !important;
    max-height: 50vw !important;
    margin-bottom: 30px;
  }
}

.detail-page #product-detail .galleries .no-swiper video,
.detail-page #product-detail .galleries .swiper-with-thumbs video {
  max-width: 540px !important;
  max-height: 315px !important;
}

@media screen and (max-width: 1399px) {
  .detail-page #product-detail .galleries .no-swiper video,
  .detail-page #product-detail .galleries .swiper-with-thumbs video {
    max-width: 440px !important;
    max-height: 260px !important;
  }
}

@media screen and (max-width: 991px) {
  .detail-page #product-detail .galleries .no-swiper video,
  .detail-page #product-detail .galleries .swiper-with-thumbs video {
    max-width: 320px !important;
    max-height: 180px !important;
  }
}

@media screen and (max-width: 768px) {
  .detail-page #product-detail .galleries .no-swiper video,
  .detail-page #product-detail .galleries .swiper-with-thumbs video {
    max-width: 540px !important;
    max-height: 295px !important;
  }
}

@media screen and (max-width: 575px) {
  .detail-page #product-detail .galleries .no-swiper video,
  .detail-page #product-detail .galleries .swiper-with-thumbs video {
    max-width: 100% !important;
    max-height: 50vw !important;
    margin-bottom: 30px;
  }
}

.detail-page #product-detail .galleries .play-icon {
  position: absolute;
  width: 30%;
}

.detail-page #product-detail .swiper-thumbs .swiper-slide {
  overflow: hidden;
}

.detail-page #product-detail .swiper-thumbs img,
.detail-page #product-detail .swiper-thumbs video {
  max-height: 17vw !important;
}

.detail-page #product-detail .swiper-thumbs video {
  opacity: 0.4;
}

.detail-page #product-detail .swiper-thumbs .swiper-slide-thumb-active video {
  opacity: 1 !important;
}

.detail-page #product-detail #information-table table {
  width: 100%;
  margin-bottom: 60px;
}

@media screen and (max-width: 576px) {
  .detail-page #product-detail #information-table table {
    border-top: 1px solid #CCC;
    margin-bottom: 45px;
  }
}

.detail-page #product-detail #information-table table td,
.detail-page #product-detail #information-table table th {
  padding: 18px 12px;
  border: 1px solid #CCC;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 576px) {
  .detail-page #product-detail #information-table table td,
  .detail-page #product-detail #information-table table th {
    display: block;
    border-top: 0;
    padding: 12px 9px;
  }
}

.detail-page #product-detail #information-table table th {
  background: #EEE;
}

.detail-page #product-detail #information-table table td {
  background: #FFF;
}

.detail-page#product #product-item-images {
  background: #eaf2f1;
}

.detail-page #product-item-images {
  border-radius: 15px;
  width: 900px;
  max-width: 100%;
  margin: 0 auto 60px;
}

@media screen and (max-width: 768px) {
  .detail-page #product-item-images {
    margin: 0 auto 45px;
  }
}

.detail-page #product-item-images .title {
  font-size: 18px;
  text-align: center;
  padding: 12px 0;
}

.detail-page #product-item-images .flex-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.detail-page #product-item-images .flex-list li {
  width: 33.3%;
  min-height: 210px;
  position: relative;
  overflow: hidden;
  background: #FFF;
  border: 1px solid #EFEFEF;
}

@media screen and (max-width: 768px) {
  .detail-page #product-item-images .flex-list li {
    width: 50%;
    min-height: 180px;
  }
}

@media screen and (max-width: 576px) {
  .detail-page #product-item-images .flex-list li {
    width: 50%;
    min-height: 150px;
  }
}

.detail-page #product-item-images .flex-list li a {
  display: block;
  width: 100%;
  height: 100%;
}

.detail-page #product-item-images .flex-list li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: 100%;
  max-width: inherit;
}

@media screen and (max-width: 768px) {
  .detail-page #product-item-images .flex-list li img {
    height: 135%;
  }
}

.detail-page #product-item-images .flex-list li .like-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  font-size: 27px;
  line-height: 100%;
}

.detail-page #product-item-images .flex-list li .like-btn i {
  cursor: pointer;
}

.detail-page #product-item-images .flex-list li .item-name {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: bold;
  padding: 30px 12px 12px;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s;
  color: rgba(0, 0, 0, 0.9);
}

.detail-page #product-item-images .flex-list li .item-name:hover {
  background: rgba(255, 255, 255, 0);
  color: rgba(0, 0, 0, 0.6);
}

.detail-page #company-status .title-area {
  position: relative;
}

.detail-page .sns-icons {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 36px;
  line-height: 100%;
  display: flex;
  justify-content: right;
  align-items: flex-start;
}

@media screen and (max-width: 576px) {
  .detail-page .sns-icons {
    position: static;
    float: right;
    margin-left: 12px;
    margin-bottom: 6px;
    font-size: 24px;
  }
}

.detail-page .sns-icons a i {
  cursor: pointer;
}

.detail-page .sns-icons a:not(:last-of-type) {
  margin-right: 18px;
}

.detail-page#product .bottom-btns {
  margin-bottom: 0;
}

.detail-page#business .bg-detail-wide {
  border-radius: 0 0 15px 15px;
  position: relative;
}

.detail-page#business .bottom-btns {
  margin-bottom: 60px;
}

.detail-page#business .sns-icons {
  font-size: 45px;
  position: absolute;
  top: 18px;
  right: 15px;
  z-index: 10;
  font-size: 45px;
}

@media screen and (max-width: 1199px) {
  .detail-page#business .sns-icons {
    font-size: 30px;
  }
}

.detail-page#business.no-gallery {
  padding-top: 180px;
}

.detail-page#business.no-gallery .bg-detail-wide {
  border-radius: 15px;
}

.detail-page #company-status dt {
  margin-bottom: 6px;
}

.detail-page #company-status dd {
  padding: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #CCC;
  margin-bottom: 24px;
}

.detail-page #company-top .name {
  font-size: 30px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .detail-page #company-top .name {
    font-size: 24px;
  }
}

.detail-page #company-top .description {
  font-size: 18px;
  text-align: center;
}

.detail-page #business-head-swiper {
  margin-top: 60px;
  background: #e3e2e2;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}

.detail-page #business-head-swiper .swiper-slide img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 900px;
}

.detail-page #business-head-swiper .swiper-slide video {
  display: block;
  height: 561px;
  max-height: 100vw;
  max-height: calc(100vw * 0.66);
  margin-left: auto;
  margin-right: auto;
}

.detail-page #business-head-swiper .swiper-slide iframe {
  display: block;
  width: 900px !important;
  height: 561px !important;
  max-width: 100% !important;
  max-height: 60vw !important;
}

.detail-page #business-head-swiper .swiper-prev,
.detail-page #business-head-swiper .swiper-next {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 768px) {
  .detail-page #business-head-swiper .swiper-prev,
  .detail-page #business-head-swiper .swiper-next {
    width: 15px;
    height: 15px;
  }
}

.detail-page#buyer .bg-detail-wide {
  margin-top: 180px;
}

.detail-page#buyer .bg-detail-wide #company-top .name {
  padding: 0 120px;
}

@media screen and (max-width: 768px) {
  .detail-page#buyer .bg-detail-wide #company-top .name {
    padding: 0;
  }
}

.detail-page#buyer .bg-detail-wide .sns-icons {
  font-size: 45px;
  position: absolute;
  top: 9px;
  right: 15px;
  z-index: 10;
  font-size: 45px;
}

@media screen and (max-width: 1199px) {
  .detail-page#buyer .bg-detail-wide .sns-icons {
    font-size: 30px;
  }
}

@media screen and (max-width: 768px) {
  .detail-page#buyer .bg-detail-wide {
    margin-top: 120px;
  }
}

.detail-page .bottom-btns {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .detail-page .bottom-btns {
    margin-bottom: 45px;
  }

  .detail-page .bottom-btns a {
    width: 48%;
  }
}

.detail-page .bottom-btns .submit-btn-large {
  width: 270px;
  max-width: 100%;
  margin: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: normal;
}

.detail-page .bottom-btns .submit-btn-large i {
  font-size: 36px;
  margin-right: 12px;
}

@media screen and (max-width: 576px) {
  .detail-page .bottom-btns .submit-btn-large {
    font-size: 12px;
    height: 45px;
    font-weight: bold;
  }

  .detail-page .bottom-btns .submit-btn-large i {
    font-size: 21px;
    margin-right: 6px;
  }
}

.detail-page .bottom-btns a:hover {
  text-decoration: none;
}

.detail-page #business-swiper-pagination {
  width: 100%;
}

.detail-page #business-swiper-pagination .swiper-pagination-bullet {
  margin-left: 4px;
  margin-right: 4px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-with-thumbs {
  margin-bottom: 9px;
}

.has-webp .ranking-page {
  /*
  & .bg-background-parent {
      &:after {
          background-image: url('/images/common/building-edge.png.webp');
      }
  }
  */
}

.has-webp .ranking-page:before {
  background-image: url("/images/search_bg/ranking.jpg.webp");
}

@media screen and (max-width: 767px) {
  .has-webp .ranking-page:before {
    background-image: url("/images/search_bg/ranking_sp.jpg.webp");
  }
}

.ranking-page {
  padding-top: 510px;
}

@media screen and (max-width: 767px) {
  .ranking-page {
    padding-top: 390px;
  }
}

.ranking-page:before {
  content: "";
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/images/search_bg/ranking.jpg");
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .ranking-page:before {
    background-image: url("/images/search_bg/ranking_sp.jpg");
  }
}

.ranking-page .bg-background-parent {
  position: relative;
  margin-bottom: 90px;
  padding-top: 45px;
  padding-bottom: 60px;
  background: #accbc8;
}

@media screen and (max-width: 1199px) {
  .ranking-page .bg-background-parent {
    margin-bottom: 45px;
  }
}

.ranking-page .bg-background-parent:before {
  content: "";
  width: 450px;
  height: 360px;
  background: #fff4e5;
  position: absolute;
  top: -360px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 225px 225px 0 0;
}

@media screen and (max-width: 767px) {
  .ranking-page .bg-background-parent:before {
    width: 300px;
    height: 200px;
    top: -200px;
  }
}

.ranking-page .bg-background-parent:after {
  content: "";
  height: 199px;
  width: 100%;
  background-image: url("/images/common/building-edge.png");
  background-repeat: repeat-x;
  background-position: center top;
  position: absolute;
  top: -199px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .ranking-page .bg-background-parent:after {
    height: 99px;
    top: -99px;
  }
}

.ranking-page .bg-halftone::before,
.ranking-page .bg-halftone::after {
  z-index: 1;
}

.ranking-page .page-title {
  font-size: 36px;
  position: absolute;
  top: -270px;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
  font-family: "Kiwi Maru";
}

@media screen and (max-width: 767px) {
  .ranking-page .page-title {
    top: -140px;
    font-size: 27px;
  }
}

.ranking-page .container {
  border-radius: 15px;
  background: #eaf2f1;
  position: relative;
  z-index: 2;
  padding: 30px;
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .ranking-page .container {
    padding: 15px 9px;
  }
}

.ranking-page .container .title {
  font-size: 30px;
  font-family: "Kiwi Maru";
  margin-bottom: 30px;
}

.ranking-page .ranking-list-item {
  background: #FFF;
  width: 100%;
  margin-bottom: 60px;
  border-radius: 15px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 0 19.2px 19.8px rgba(0, 0, 0, 0.092);
  /*
  0 38.4px 34.8px rgba(0, 0, 0, 0.1),
  0 101px 74px rgba(0, 0, 0, 0.13)
  /*
  @media screen and (max-width: 767px) {
      flex-direction: column;
  }
  */
}

.ranking-page .ranking-list-item .text-zone {
  margin: 15px 24px;
  flex: 1;
  position: relative;
  padding-bottom: 2em;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .text-zone {
    font-size: 13px;
    margin: 6px 12px;
    overflow-x: auto;
  }
}

.ranking-page .ranking-list-item .text-zone .bg-cateogry {
  color: #FFF;
  padding: 3px 6px;
  font-size: 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.ranking-page .ranking-list-item .search-item-title {
  font-size: 21px;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .search-item-title {
    font-size: 15px;
  }
}

@media screen and (max-width: 576px) {
  .ranking-page .ranking-list-item .search-item-title {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .category-labels {
    white-space: nowrap;
    overflow-x: auto;
  }
}

.ranking-page .ranking-list-item .description {
  padding: 12px;
  border: 1px solid #CCC;
  border-radius: 3px;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .description {
    padding: 3px 9px;
    white-space: nowrap;
    overflow-x: auto;
  }
}

.ranking-page .ranking-list-item .description .inner {
  max-height: 4em;
  overflow: hidden;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .description .inner {
    font-size: 12px;
    max-height: none;
    white-space: nowrap;
    line-height: 100%;
    vertical-align: middle;
  }
}

.ranking-page .ranking-list-item .icon-l {
  font-size: 18px;
}

.ranking-page .ranking-list-item .item-footer {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.ranking-page .ranking-list-item .item-footer p:not(:last-child) {
  margin-right: 18px;
}

.ranking-page .ranking-list-item .noimage-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CCC;
  color: #333;
  width: 390px;
  height: 260px;
  max-width: 48%;
  border-radius: 15px 0 0 15px;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .noimage-box {
    max-width: 204px;
    height: auto;
  }
}

@media screen and (max-width: 576px) {
  .ranking-page .ranking-list-item .noimage-box {
    max-width: 39%;
    font-size: 12px;
  }
}

.ranking-page .ranking-list-item .noimage-box img {
  width: 100%;
}

.ranking-page .ranking-list-item .product-galleries {
  width: 390px;
  height: 260px;
  max-width: 48%;
  border-radius: 15px 0 0 15px;
}

.ranking-page .ranking-list-item .product-galleries img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 576px) {
  .ranking-page .ranking-list-item .product-galleries img {
    height: 100%;
    height: 165px;
    height: auto;
    width: 100%;
    height: 165px;
    width: auto;
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .product-galleries {
    /*
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 15px 15px;
    */
    height: auto;
    width: 39%;
  }
}

.ranking-page .ranking-list-item .thumb-six {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: stretch;
  align-items: flex-start;
  height: 260px;
  max-height: 260px;
  width: 249px;
  margin: 0 6px;
}

.ranking-page .ranking-list-item .thumb-six .thumb {
  height: 32%;
  display: block;
  margin-right: 6px;
}

.ranking-page .ranking-list-item .thumb-six .thumb:nth-of-type(2),
.ranking-page .ranking-list-item .thumb-six .thumb:nth-of-type(5) {
  margin: 2% 0;
}

.ranking-page .ranking-list-item .thumb-six.thumbs2,
.ranking-page .ranking-list-item .thumb-six.thumbs3 {
  width: 120px;
}

@media screen and (max-width: 1199px) {
  .ranking-page .ranking-list-item .thumb-six {
    display: none;
  }
}

.ranking-page .ranking-list-item .swiper-slide {
  overflow: hidden;
}

.ranking-page .ranking-list-item .swiper-slide div {
  height: 100%;
}

.ranking-page .ranking-list-item .swiper-pagination {
  white-space: nowrap;
}

.ranking-page .ranking-list-item .rank-label {
  position: absolute;
  top: 50%;
  left: -22.5px;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #629142;
  color: #FFF;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-weight: bold;
  font-size: 24px;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item .rank-label {
    left: -9px;
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
}

.ranking-page .ranking-list-item.rank1 .rank-label {
  background: #ec7e00;
}

.ranking-page .ranking-list-item.rank2 .rank-label {
  background: #999997;
}

.ranking-page .ranking-list-item.rank3 .rank-label {
  background: #ab5714;
}

.ranking-page .ranking-list-item.mini {
  flex-direction: column-reverse;
  width: 31.5%;
}

@media screen and (max-width: 992px) {
  .ranking-page .ranking-list-item.mini {
    width: 48%;
  }
}

.ranking-page .ranking-list-item.mini .noimage-box {
  width: 100%;
  max-width: 100%;
  border-radius: 15px 15px 0 0;
}

.ranking-page .ranking-list-item.mini .noimage-box img {
  width: 100%;
}

.ranking-page .ranking-list-item.mini .product-galleries {
  width: 100%;
  max-width: 100%;
  border-radius: 15px 15px 0 0;
}

.ranking-page .ranking-list-item.mini .rank-label {
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item.mini .rank-label {
    top: -30px;
  }
}

.ranking-page .ranking-list-item.mini .text-zone {
  flex: none;
}

@media screen and (max-width: 767px) {
  .ranking-page .ranking-list-item.mini .text-zone {
    padding-bottom: 9px;
  }

  .ranking-page .ranking-list-item.mini .item-footer {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    position: static;
    align-items: flex-start;
    line-height: 200%;
  }
}

.ranking-page .bg-cateogry {
  color: #FFF;
  background-color: green;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 8px, transparent 8px, transparent 16px);
}

.ranking-page .bg-cateogry.category1 {
  background-color: #9ec55a;
}

.ranking-page .bg-cateogry.category2 {
  background-color: #ed8e91;
}

.ranking-page .bg-cateogry.category3 {
  background-color: #7a80bd;
}

.ranking-page .bg-cateogry.category4 {
  background-color: #7c523c;
}

.ranking-page .bg-cateogry.site {
  background-color: #4d3f3c;
}

.ranking-page .bg-cateogry.sort {
  background-color: #a2a72b;
}

#regist-page .main-width {
  max-width: 96%;
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

#regist-page .form-block {
  position: relative;
  margin-bottom: 30px;
}

#regist-page .form-block:first-of-type {
  margin-bottom: 90px;
}

#regist-page .sub-width {
  overflow: hidden;
  margin: 0 150px 39px;
}

@media screen and (max-width: 992px) {
  #regist-page .sub-width {
    margin: 0 75px 39px;
  }
}

@media screen and (max-width: 767px) {
  #regist-page .sub-width {
    margin: 0 0 39px;
  }
}

#regist-page #form-area .description {
  border: 1px solid #666;
  background: #FAFAFA;
  border-radius: 0;
  line-height: 210%;
  padding: 18px 24px;
}

#regist-page::before {
  content: "";
  background: url("/images/2023/main-bg.svg");
  background-size: 150px;
  position: absolute;
  top: 0;
  left: 0;
  height: 108px;
  width: 100%;
}

#regist-page #top {
  padding: 180px 0 0;
  margin-bottom: 45px;
}

#regist-page #top .page-title {
  font-size: 24px;
  margin-bottom: 9px;
}

#regist-page .form-head {
  text-align: center;
}

#regist-page .form-head .form-title {
  font-size: 24px;
  margin-bottom: 9px;
}

#regist-page .form-head .form-subtitle {
  font-size: 12px;
  margin-bottom: 90px;
}

#regist-page .vertical-title {
  border-top: 1px solid #666;
  color: #666;
  padding-top: 30px;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  display: flex;
  flex-direction: column-reverse;
  font-size: 24px;
  white-space: nowrap;
  position: absolute;
  left: 0px;
  top: 0px;
}

#regist-page .vertical-title span {
  margin-left: 9px;
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  #regist-page .vertical-title {
    border-top: 0;
    position: relative;
    -ms-writing-mode: unset;
        writing-mode: unset;
    flex-direction: column;
    text-align: center;
    padding: 45px 0;
  }

  #regist-page .vertical-title span {
    margin-left: 0;
  }
}

#regist-page .link-user-types {
  margin-bottom: 120px;
}

#regist-page .link-user-types .item {
  letter-spacing: 3px;
  font-weight: bold;
  padding-bottom: 15px;
}

@media screen and (max-width: 767px) {
  #regist-page .link-user-types .item {
    width: 27%;
  }
}

#regist-page .link-user-types .item p {
  font-weight: 500;
}

#regist-page .link-user-types .item .img-circle {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  transition: background-color 0.3s;
}

#regist-page .link-user-types .item.active {
  position: relative;
}

#regist-page .link-user-types .item.active::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  height: 30px;
  width: 60px;
  background: #666;
  height: 15px;
  width: 30px;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#regist-page .link-user-types .item.active .type1,
#regist-page .link-user-types .item .type1:hover {
  background: #F85555;
}

#regist-page .link-user-types .item.active .type2,
#regist-page .link-user-types .item .type2:hover {
  background: #5AC85A;
}

#regist-page .link-user-types .item.active .type3,
#regist-page .link-user-types .item .type3:hover {
  background: #3D9ED4;
}

#regist-page .link-user-types .item .img {
  display: block;
  transition: opacity 0.3s;
}

#regist-page .link-user-types .item .img:hover,
#regist-page .link-user-types .item.active .img {
  opacity: 0.75;
}

#regist-page .link-user-types .item p {
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#regist-page .col-form-label {
  position: relative;
  display: block;
}

#regist-page .required {
  margin-left: auto;
  right: 0;
  background: #F85555;
  border-radius: 0;
  color: #FFF;
  padding: 3px 12px;
  font-size: 12px;
  border: 0;
  white-space: nowrap;
}

#regist-page.main-a #form-area .agree-text {
  color: #333;
}

#regist-page.main-a #form-area .submit-area-full {
  background: #F5F5F5;
}

#regist-page.main-a #form-area .submit-area-full::after {
  content: none;
}

#regist-page.main-a #form-area .submit-area-full .submit-btn-large {
  background: #F85555;
  border-radius: 0;
  padding: 24px;
  width: 75%;
  max-width: 480px;
  height: auto;
  transition: background-color 0.3s;
}

#regist-page.main-a #form-area .submit-area-full .submit-btn-large:hover {
  background: #D64C4B;
}

#regist-page.main-a #form-area .submit-area-full .submit-btn-large:disabled {
  background: #CCC;
}

#regist-page.main-a #form-area .submit-area-full a {
  text-decoration: underline;
}

#regist-page #about {
  margin-bottom: 120px;
}

#regist-page #about .bar-switch {
  color: #FFF;
  text-align: center;
  padding: 30px 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  background: #3E95C7;
  /*
  cursor: pointer;
  &:hover {
      background: #5585A1;
  }

  &:after {
      content: "";
      margin-left: 15px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 15px 15px 0 15px;
      border-color: #ffffff transparent transparent transparent;
      transition: transform .3s;
  }

  &.on:after {
      transform: rotate(180deg);
  }
  */
}

#regist-page #about .bar-text {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#regist-page #about .bar-text.type1 {
  color: #F85555;
}

#regist-page #about .bar-text.type2 {
  color: #5AC85A;
}

#regist-page #about .bar-text.type3 {
  color: #3D9ED4;
}

#regist-page #about .width-bg {
  background: #FCF9F4;
}

#regist-page #about .width-bg:nth-of-type(even) .item-box {
  flex-direction: row;
}

@media screen and (max-width: 767px) {
  #regist-page #about .width-bg:nth-of-type(even) .item-box {
    flex-direction: column;
  }
}

#regist-page #about .width-bg:nth-of-type(even) .text {
  background-position: bottom right;
}

#regist-page #about .item-box {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 180px;
}

@media screen and (max-width: 767px) {
  #regist-page #about .item-box {
    flex-direction: column;
  }
}

#regist-page #about .item-box .text {
  width: 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 120px;
  line-height: 180%;
  font-size: 18px;
  text-align: justify;
  background-repeat: no-repeat;
  background-position: bottom left;
}

@media screen and (max-width: 1200px) {
  #regist-page #about .item-box .text {
    padding: 30px 60px 90px;
  }
}

@media screen and (max-width: 992px) {
  #regist-page #about .item-box .text {
    padding: 30px 15px 90px;
  }
}

@media screen and (max-width: 767px) {
  #regist-page #about .item-box .text {
    padding: 30px 15px 90px;
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  #regist-page #about .item-box .text {
    padding: 30px 12px 90px;
  }
}

#regist-page #about .item-box .text .sub-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  font-weight: 500;
}

#regist-page #about .item-box .text .sub-title.need-regist::after {
  content: "\8981\767B\9332";
  color: #FFF;
  font-size: 12px;
  padding: 0 12px;
  font-weight: bold;
  line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

#regist-page #about .item-box .text.type1 {
  background-image: url("/images/2023/ichimatsu-1.svg");
}

#regist-page #about .item-box .text.type1 .sub-title.need-regist::after {
  background: #F85555;
}

#regist-page #about .item-box .text.type2 {
  background-image: url("/images/2023/ichimatsu-2.svg");
}

#regist-page #about .item-box .text.type2 .sub-title.need-regist::after {
  background: #5AC85A;
}

#regist-page #about .item-box .text.type3 {
  background-image: url("/images/2023/ichimatsu-3.svg");
}

#regist-page #about .item-box .text.type3 .sub-title.need-regist::after {
  background: #3D9ED4;
}

#regist-page #about .item-box .visual {
  width: 50%;
  max-width: 50%;
  margin-top: -90px;
}

@media screen and (max-width: 767px) {
  #regist-page #about .item-box .visual {
    max-width: 36%;
    margin: -90px auto 0;
  }
}

#regist-page .sp-table-parent {
  overflow: auto;
}

#regist-page .action-table {
  width: 100%;
  margin-bottom: 60px;
  white-space: nowrap;
}

#regist-page .action-table tr:not(:last-of-type):not(:first-of-type) {
  border-bottom: 1px solid;
}

#regist-page .action-table.type1 * {
  color: #F85555;
  border-color: #F85555;
}

#regist-page .action-table.type1 .true,
#regist-page .action-table.type1 .regist-label {
  background: #F85555;
}

#regist-page .action-table.type2 * {
  color: #5AC85A;
  border-color: #5AC85A;
}

#regist-page .action-table.type2 .true,
#regist-page .action-table.type2 .regist-label {
  background: #5AC85A;
}

#regist-page .action-table *.type3 {
  color: #3D9ED4;
  border-color: #3D9ED4;
}

#regist-page .action-table * .true,
#regist-page .action-table * .regist-label {
  background: #3D9ED4;
}

#regist-page .action-table th,
#regist-page .action-table td {
  padding: 9px 0;
  font-weight: normal;
}

#regist-page .action-table td {
  text-align: center;
  position: relative;
}

#regist-page .action-table td .true {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#regist-page .action-table td .true:before {
  content: "";
  border-radius: 2px;
  background: #FFF !important;
  position: absolute;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  width: 10px;
  height: 4px;
  top: 14px;
  left: 7.5px;
}

#regist-page .action-table td .true::after {
  content: "";
  background: #FFF !important;
  position: absolute;
  transform: rotate(305deg);
  transform-origin: 0% 0%;
  width: 20px;
  height: 4px;
  border-radius: 3px;
  top: 22px;
  left: 10px;
}

#regist-page .action-table .regist-label {
  color: #FFF;
  border-radius: 50px;
  display: inline-block;
  padding: 6px 39px;
}

#regist-page .form-scroll-btn {
  margin: 0 auto 120px;
  color: #FFF;
  height: 60px;
  width: 75%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#regist-page .form-scroll-btn.type1 {
  background: #F85555;
}

#regist-page .form-scroll-btn.type1:hover {
  background: #D64C4B;
}

#regist-page .form-scroll-btn.type2 {
  background: #5AC85A;
}

#regist-page .form-scroll-btn.type2:hover {
  background: #58A352;
}

#regist-page .form-scroll-btn.type3 {
  background: #3D9ED4;
}

#regist-page .form-scroll-btn.type3:hover {
  background: #5585A1;
}

#regist-page .ac-box {
  margin-top: 150px;
}

#regist-page .ac-box:not(.on) {
  display: none;
}

.link-user-types {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  text-align: center;
  width: 600px;
  max-width: 100%;
  justify-content: space-evenly;
  padding: 0;
}

.link-user-types .item {
  position: relative;
  padding: 0 6px;
  flex: 1;
}

@media screen and (max-width: 768px) {
  .link-user-types .item {
    font-size: 12px;
  }
}

.link-user-types .item .img {
  width: 120px;
}

.link-user-types .item.active img {
  opacity: 0.3;
}

.link-user-types .item:not(:last-of-type):after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
}

.submit-btn-large {
  background: #4D3F3C;
  transition: 0.3s;
  height: 60px;
  width: 100%;
  max-width: 360px;
  border-radius: 30px;
  margin-bottom: 30px;
  padding: 0;
  font-size: 21px;
  color: #FAFAFA;
}

.submit-btn-large:hover {
  background: #302826;
  color: #FFF;
  text-decoration: none;
}

.submit-btn-large#preview-submit {
  margin: 30px auto 60px;
}

.submit-btn-large.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #FFF;
  color: #333;
  border: 3px solid #CCC;
}

.submit-btn-large.preview:hover {
  background: #EEE;
  border: 3px solid #CCC;
}

.submit-btn-large.pink {
  background: #ed8e91;
}

.submit-btn-large.pink:hover {
  background: #ed8e91;
  text-decoration: none;
}

.submit-btn-large:disabled {
  background: #CCC;
}

#preview-submit-top {
  margin-left: auto;
  border-radius: 6px;
  border: 3px solid #666;
  display: block;
  width: 150px;
  height: 36px;
}

#preview-submit-top:hover {
  background: #EEE;
}

.sub-title-label {
  font-size: 0.9em;
  padding: 1.5px 6px;
  border: 1px solid #CCC;
  background: #FFF;
  color: #333;
  border-radius: 3px;
  margin-right: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.sub-title-label.gray {
  color: #333;
  border-color: 1px solid #CCC;
  background: #EEE;
}

.sub-title-label.orange {
  color: #ff4500;
  border-color: #ff4500;
  background: #fffacd;
}

.sub-title-label.black {
  color: #FFF;
  border-color: #000;
  background: #999;
}

.sub-title-label.red {
  color: #dc143c;
  border-color: #dc143c;
  background: #fff0f5;
}

.sub-title-label.blue {
  color: #0000cd;
  border-color: #0000cd;
  background: #f0ffff;
}

.sub-title-label.green {
  color: #006400;
  border-color: #006400;
  background: #f0fff0;
}

.like-btn .icon-active {
  display: none;
}

.like-btn.active .icon {
  display: none;
}

.like-btn.active .icon-active {
  display: inline;
  color: #dc143c;
}

.swiper-next,
.swiper-prev {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  outline: none;
  transform: rotateZ(45deg) translateY(-50%);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-right: transparent;
  border-top: transparent;
}

.swiper-next:hover,
.swiper-prev:hover {
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-right: transparent;
  border-top: transparent;
}

.swiper-prev {
  left: 3px;
}

.swiper-next {
  right: 3px;
  transform: scale(-1, 1) rotateZ(45deg) translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.swiper-thumbs {
  height: 20%;
  box-sizing: border-box;
}

.swiper-thumbs .swiper-slide {
  background: #000;
}

.swiper-thumbs .swiper-slide img {
  opacity: 0.4;
}

.swiper-thumbs .swiper-slide-thumb-active img {
  opacity: 1;
}

.detail-swiper-thumbs.center .swiper-wrapper {
  justify-content: center;
}

#mypage-global-navi {
  margin-bottom: -60px;
  overflow: auto;
  /*
  @media screen and (max-width: 576px) {
      position: absolute;
      left: 0px;
      bottom: 0px;
      margin-bottom: 0;
  }
  */
}

#mypage-global-navi .sp-icon {
  display: none;
}

#mypage-global-navi ul {
  display: flex;
  justify-content: space-between;
}

#mypage-global-navi ul li {
  flex: 1;
  width: 18%;
  margin: 0 1%;
  /*
  @media screen and (max-width: 768px) {
      max-width: 20%;
  }
  @media screen and (max-width: 576px) {
      max-width: 90px;
      min-width:    27%;
      margin-right: 6px;
      font-size: 11px;
  }
  */
}

#mypage-global-navi ul li .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  background: #FFF;
  border-radius: 15px 15px 0 0;
  padding: 15px 6px;
  white-space: nowrap;
  text-decoration: none;
  /*
  @media screen and (max-width: 576px) {
      padding: 15px 9px;
  }
  @media screen and (max-width: 576px) {
      &.active {
          height: 102%;
      }
  }
  */
}

#mypage-global-navi ul li .itema {
  cursor: pointer;
}

#mypage-global-navi ul li .item:not(.active) {
  background: #FCFCFC;
  box-shadow: 0 -1.9px 2.5px rgba(0, 0, 0, 0.057) inset, 0 -5px 6.1px rgba(0, 0, 0, 0.076) inset, 0 -10.1px 11.4px rgba(0, 0, 0, 0.086) inset;
}

#mypage-global-navi ul li .item:hover {
  background: #FFF;
  box-shadow: none;
}

@media screen and (max-width: 768px) {
  #mypage-global-navi {
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    max-width: 100%;
    z-index: 10;
    margin-bottom: 0;
    background: #FFF;
    border-top: 1px solid #CCC;
  }

  #mypage-global-navi .setting {
    display: none;
  }

  #mypage-global-navi .sp-icon {
    display: block;
    font-size: 21px;
    margin-bottom: 3px;
  }

  #mypage-global-navi ul li {
    width: 25%;
    max-width: 25%;
    margin: 0;
    padding: 0;
  }

  #mypage-global-navi ul li .item {
    padding: 9px 0 15px;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 9px;
    text-align: center;
    flex-direction: column;
    position: relative;
  }

  #mypage-global-navi ul li .item .count-badge {
    position: absolute;
    top: 6px;
    left: 63%;
    transform: unset;
  }

  #mypage-global-navi ul li .item:not(.active) {
    box-shadow: none;
  }
}

#userIconDropzone {
  display: inline-block;
  border: 3px dashed #CCC;
  padding: 0;
  border-radius: 30px;
}

#userIconDropzone.dropzone .dz-message {
  margin: 0.6em;
}

#userIconDropzone.dropzone .dz-preview .dz-image {
  border-radius: 50%;
}

#userIconDropzone .dz-image img,
#userIconDropzone .default-icon {
  border-radius: 50%;
}

#userIconDropzone .default-icon {
  border-radius: 50%;
}

#userIconDropzone .dz-button {
  background: none;
  border: 0;
  height: 120px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

#user-icon-crop-editor .cropper-view-box,
#user-icon-crop-editor .cropper-face {
  border-radius: 50%;
}

.crop-modal-editor-parent {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.6);
}

.crop-modal-editor {
  position: fixed;
  left: 6vw;
  right: 6vw;
  top: 6vh;
  bottom: 18vh;
  width: 88vw;
  height: 76vh;
  z-index: 9999;
  background-color: #000;
  border-radius: 15px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .crop-modal-editor {
    height: 66vh;
  }
}

.crop-modal-editor-btn-cancel,
.crop-modal-editor-btn-confirm {
  position: absolute;
  bottom: -60px;
  left: 51%;
  z-index: 9999;
  width: 240px;
}

@media screen and (max-width: 768px) {
  .crop-modal-editor-btn-cancel,
  .crop-modal-editor-btn-confirm {
    width: 48%;
    font-size: 12px;
  }
}

.crop-modal-editor-btn-confirm {
  left: auto;
  right: 51%;
}

#productDropzone,
#businessDropzone {
  position: relative;
  transition: all 1.5s;
  border: 3px dashed #CCC;
  border-radius: 30px;
  overflow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  padding: 15px 0 0 15px;
}

#productDropzone .dz-message,
#businessDropzone .dz-message {
  margin: 0;
}

#productDropzone .dz-button,
#businessDropzone .dz-button {
  background: none;
  border: 0;
  height: 90px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

#productDropzone .dz-default,
#businessDropzone .dz-default {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#companyGallery {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#companyGallery .gallery {
  position: relative;
  margin: 0 15px 15px 0;
  padding: 0;
  border-radius: 3px;
  border: 1px solid #CCC;
  z-index: 20;
  cursor: pointer;
}

#companyGallery .gallery .num {
  position: absolute;
  left: 3px;
  top: 3px;
  background: rgba(255, 255, 255, 0.9);
  line-height: 100%;
  padding: 3px 12px;
  margin: 0;
  font-weight: bold;
  border-radius: 3px;
  border: 1px solid #999;
}

#companyGallery .gallery img,
#companyGallery .gallery video {
  border-radius: 0 0 3px 3px;
  display: block;
  height: 150px;
}

.dropzone .delete-item {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  bottom: -6px;
  right: -6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  color: #FFF;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer !important;
}

.dropzone .dz-preview.dz-image-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;
  background: none !important;
  border-radius: 30px;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 0 19.2px 19.8px rgba(0, 0, 0, 0.092), 0 38.4px 34.8px rgba(0, 0, 0, 0.1), 0 101px 74px rgba(0, 0, 0, 0.13), 0 20px 0 -10px #c6e0e7, 0 40px 0 -20px #69abd1, 0 60px 0 -30px #1b73a5;
}

#sitetop-inquiry-switch {
  cursor: pointer;
  position: fixed;
  bottom: -45px;
  right: 120px;
  width: 180px;
  height: 180px;
  padding-top: 21px;
  z-index: 29;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  background: #4a54a2;
  color: #FFF;
  transition: background 0.3s;
}

#sitetop-inquiry-switch:hover {
  background: #5e68b6;
}

#sitetop-inquiry-switch p {
  font-size: 21px;
}

#sitetop-inquiry-switch p.min {
  font-size: 12px;
  font-weight: normal;
}

#sitetop-inquiry-switch .icon {
  height: 45px;
}

@media screen and (max-width: 768px) {
  #sitetop-inquiry-switch .icon {
    height: 30px;
    margin: 6px 0;
  }
}

#sitetop-inquiry-switch .close-icon {
  position: absolute;
  right: 0px;
  top: 6px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid #333;
  background: #FFF;
  color: #333;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer !important;
}

@media screen and (max-width: 768px) {
  #sitetop-inquiry-switch {
    bottom: -27px;
    right: auto;
    left: 9px;
    width: 120px;
    height: 120px;
    padding-top: 9px;
  }

  #sitetop-inquiry-switch .icon {
    font-size: 39px;
  }

  #sitetop-inquiry-switch .close-icon {
    width: 27px;
    height: 27px;
  }

  #sitetop-inquiry-switch p {
    font-size: 15px;
  }

  #sitetop-inquiry-switch p.min {
    font-size: 9px;
    font-weight: normal;
  }
}

#suggest-search {
  position: fixed;
  top: 90px;
  right: 30px;
  z-index: 19;
  background: rgba(255, 255, 255, 0.3);
  background: white;
  color: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 0;
  min-width: 30px;
  transition: all 0.15s;
  box-shadow: 0 -1.9px 2.5px rgba(0, 0, 0, 0.034), 0 1.9px 2.5px rgba(0, 0, 0, 0.034), 0 5px 6.1px rgba(0, 0, 0, 0.052), 0 8.1px 11.4px rgba(0, 0, 0, 0.086), 0 -3.1px 6px rgba(0, 0, 0, 0.086);
}

@media screen and (max-width: 870px) {
  #suggest-search {
    top: 15px;
    right: 60px;
    z-index: 30;
    box-shadow: none;
    background: none;
  }
}

@media screen and (max-width: 768px) {
  #suggest-search {
    z-index: 30;
  }
}

#suggest-search .form-area {
  max-width: 1px;
  overflow: hidden;
  transition: all 0.15s;
  max-height: 30px;
  display: flex;
}

#suggest-search.active {
  background: #7e91ff;
  background: #FFF;
}

#suggest-search.active .form-area {
  max-width: 450px;
}

#suggest-search.active #suggest-type-select {
  position: relative;
  padding: 3px 24px 3px 15px;
  color: #FFF;
  background: #7e91ff;
  border-radius: 30px 0 0 30px;
}

@media screen and (max-width: 768px) {
  #suggest-search.active {
    top: 75px;
    left: 9px;
    right: 9px;
    box-shadow: 0 -1.9px 2.5px rgba(0, 0, 0, 0.034), 0 1.9px 2.5px rgba(0, 0, 0, 0.034), 0 5px 6.1px rgba(0, 0, 0, 0.052), 0 8.1px 11.4px rgba(0, 0, 0, 0.086), 0 -3.1px 6px rgba(0, 0, 0, 0.086);
  }

  #suggest-search.active #suggest-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
  }

  #suggest-search.active .form-area {
    max-width: 100%;
  }
}

#suggest-search #suggest-input {
  border: 1px solid #CCC;
  border-radius: 0 30px 30px 0;
  padding: 3px 30px 3px 3px;
  height: 30px;
  width: 240px;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 1.15s;
}

#suggest-search select {
  color: #FFF;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: center right 12px;
  background-repeat: no-repeat;
  background-size: auto 12px;
  background-blend-mode: lighten;
  padding-right: 42px;
}

#suggest-search #suggest-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

#suggest-search:not(.active) #suggest-submit {
  position: absolute;
  right: 0%;
  top: 50%;
}

#inquiry-modal {
  position: fixed;
  top: 0;
  right: 0;
  background: #4a54a2;
  height: 100%;
  z-index: 1051;
  transition: right 0.15s, width 0.15s;
  width: 0px;
}

#inquiry-modal #inquiry-close-area {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 0%;
  overflow: hidden;
  transition: right 0.15s, width 0.15s;
}

#inquiry-modal #inquiry-close-area .close-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 9px;
  width: 45px;
  height: 45px;
  background: #000;
  border-radius: 50%;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media screen and (max-width: 576px) {
  #inquiry-modal #inquiry-close-area .close-icon {
    right: -45px;
    width: 33px;
    height: 33px;
  }
}

#inquiry-modal.active {
  right: 0;
  width: 450px;
}

#inquiry-modal.active #inquiry-close-area {
  right: 450px;
  width: 100%;
}

@media screen and (max-width: 576px) {
  #inquiry-modal.active {
    right: 0;
    width: 100%;
  }

  #inquiry-modal.active #inquiry-close-area {
    right: 100%;
    width: 100%;
    overflow: visible;
  }
}

#inquiry-modal #inquiry-messages {
  width: 100%;
  padding: 15px 15px 165px;
  height: 100%;
}

#inquiry-modal #inquiry-messages #inquiries {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

#inquiry-modal #inquiry-messages #inquiries .posted {
  position: relative;
}

#inquiry-modal #inquiry-messages #inquiries .posted .inquiry {
  margin-left: 20%;
}

#inquiry-modal #inquiry-messages #inquiries .posted .inquiry::before,
#inquiry-modal #inquiry-messages #inquiries .posted .inquiry::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 15px;
  background: #EEE;
  height: 24px;
  width: 9px;
  border-radius: 0 9px 9px 0;
}

#inquiry-modal #inquiry-messages #inquiries .posted .inquiry::after {
  background: #4a54a2;
  top: 6px;
  right: -12px;
  width: 12px;
}

#inquiry-modal #inquiry-messages #inquiries .reseaved {
  position: relative;
}

#inquiry-modal #inquiry-messages #inquiries .reseaved .inquiry {
  margin-left: 60px;
  margin-right: 20%;
}

#inquiry-modal #inquiry-messages #inquiries .reseaved .inquiry::before,
#inquiry-modal #inquiry-messages #inquiries .reseaved .inquiry::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 15px;
  background: #EEE;
  height: 24px;
  width: 9px;
  border-radius: 9px 0 0 9px;
}

#inquiry-modal #inquiry-messages #inquiries .reseaved .inquiry::after {
  background: #4a54a2;
  top: 6px;
  left: -12px;
  width: 12px;
}

#inquiry-modal #inquiry-messages #inquiries .thread-icon {
  width: 45px;
  min-width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 9px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 12px;
  background: #999;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

#inquiry-modal #inquiry-messages #inquiries .inquiry {
  position: relative;
  background: #EEE;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  width: 75%;
  white-space: break-spaces;
}

#inquiry-modal #inquiry-messages #inquiries .inquiry .time {
  font-size: 9px;
  text-align: right;
  display: block;
}

#inquiry-modal #inquiry-messages #inquiries .inquiry-delete-switch {
  background: #666;
  color: #FFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 6px;
  bottom: -6px;
  width: 21px;
  height: 21px;
  font-size: 12px;
  cursor: pointer;
}

#inquiry-modal #inquiry-messages #inquiries .inquiry-delete-switch i {
  cursor: pointer;
}

#inquiry-modal #inquiry-form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 150px;
  padding: 15px;
  background: #EEE;
}

#inquiry-modal #inquiry-form #inquiry-textarea {
  border: 1px solid #CCC;
  width: 100%;
  border-radius: 6px;
  padding: 12px;
  height: 90px;
  background: #FFF;
}

#inquiry-modal #inquiry-form .btn {
  padding: 9px;
  width: 100%;
}

#inquiry-modal .title {
  text-align: center;
  font-weight: bold;
  color: #FFF;
  padding: 12px 3px;
}

#inquiry-modal #inquiry-form-nouser {
  width: 100%;
  height: 100%;
  padding: 15px;
  background: #EEE;
  position: relative;
  overflow-y: auto;
}

#inquiry-modal #inquiry-form-nouser .sub-title-label {
  font-size: 9px;
  position: absolute;
}

#inquiry-modal #inquiry-form-nouser #inquiry-textarea-nouser {
  border: 1px solid #CCC;
  width: 100%;
  border-radius: 6px;
  background: #FFF;
  padding: 12px;
  height: 30vh;
}

#inquiry-modal #inquiry-form-nouser .btn {
  padding: 9px;
  width: 100%;
}

#inquiry-modal #inquiry-form-nouser input {
  border: 1px solid #CCC;
  width: 100%;
  border-radius: 6px;
  padding: 9px;
  margin-bottom: 15px;
  background: #FFF;
}

#page-top-btn {
  position: fixed;
  bottom: 33px;
  right: 24px;
  z-index: 19;
  padding: 12px;
  color: #666;
  font-size: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  #page-top-btn {
    bottom: 27px;
    right: 0px;
  }
}

#page-top-btn .icon {
  font-size: 18px;
  padding: 9px;
  width: 45px;
  height: 45px;
  background: #FFF;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -1.9px 2.5px rgba(0, 0, 0, 0.034), 0 1.9px 2.5px rgba(0, 0, 0, 0.034), 0 5px 6.1px rgba(0, 0, 0, 0.052), 0 8.1px 11.4px rgba(0, 0, 0, 0.086), 0 -3.1px 6px rgba(0, 0, 0, 0.086);
}

.link-div {
  cursor: pointer;
}

.link-div:hover {
  text-decoration: underline;
}

.news-modal-switch {
  cursor: pointer;
}

#news-modal .scroll-view {
  max-height: 75vh;
  overflow-y: auto;
}

#news-modal .title {
  border-bottom: 1px solid #EEE;
  text-align: left;
  padding: 9px 0 9px 15px;
  position: relative;
}

#news-modal .title:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 75%;
  border-radius: 2px;
  background: #CCC;
}

#news-modal .news {
  padding-bottom: 15px;
}

#news-modal .news:not(:last-child) {
  margin-bottom: 15px;
}

#news-modal .news .date {
  text-align: right;
  margin-top: 6px;
  margin-right: 6px;
  color: #999;
}

#form-area .form-sub-title {
  font-size: 24px;
  border-bottom: 1px solid #CCC;
  padding-bottom: 9px;
  margin-bottom: 30px;
}

#form-area .description {
  border: 1px solid #CCC;
  border-radius: 6px;
  padding: 15px;
  background: #FAFAFA;
  margin-bottom: 30px;
}

input[type=checkbox] + label .check-view {
  transform: scale(1.25);
  margin-right: 15px;
}

input[type=checkbox] + label .check-view span {
  display: inline-block;
  position: relative;
  background-color: #FFF;
  width: 25px;
  height: 25px;
  transform-origin: center;
  border: 2px solid #CCC;
  vertical-align: -6px;
  transition: background-color 90ms 120ms, border-radius 120ms, transform 210ms cubic-bezier(0.78, -3.66, 0.17, 3.99);
}

input[type=checkbox] + label .check-view span:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #CCC;
  position: absolute;
  transform: rotate(45deg);
  top: 11px;
  left: 7.5px;
  transition: width 30ms ease 30ms;
  transform-origin: 0% 0%;
}

input[type=checkbox] + label .check-view span:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #CCC;
  position: absolute;
  transform: rotate(305deg);
  top: 14px;
  left: 8.5px;
  transition: width 30ms ease;
  transform-origin: 0% 0%;
}

input[type=checkbox] + label:hover .check-view span:before {
  width: 5px;
  transition: width 60ms ease;
}

input[type=checkbox] + label:hover .check-view span:after {
  width: 10px;
  transition: width 90ms ease 60ms;
}

input[type=checkbox]:checked + label .check-view span {
  background-color: rgba(23, 144, 181, 0.15);
  transform: scale(1.25);
  border-radius: 50%;
  border-color: #1790b5;
}

input[type=checkbox]:checked + label .check-view span:after {
  width: 10px;
  background: #1790b5;
  transition: width 90ms ease 60ms;
}

input[type=checkbox]:checked + label .check-view span:before {
  width: 5px;
  background: #1790b5;
  transition: width 90ms ease 60ms;
}

input[type=checkbox]:checked + label:hover .check-view span {
  transform: scale(1.2);
}

input[type=checkbox]:checked + label:hover .check-view span:after {
  background: rgba(23, 144, 181, 0.6);
  transition: width 90ms ease 60ms;
}

input[type=checkbox]:checked + label:hover .check-view span:before {
  background: rgba(23, 144, 181, 0.6);
  transition: width 90ms ease 60ms;
}

input[type=radio],
input[type=checkbox] {
  display: none;
}

input[type=radio] + label.check-label-default,
input[type=checkbox] + label.check-label-default {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

input[type=radio] + label.check-label-default:before,
input[type=checkbox] + label.check-label-default:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #CCC;
  position: absolute;
  left: 0;
  top: -3px;
  transition: all 0.12s, border-color 0.08s;
  border-radius: 3px;
}

input[type=radio]:checked + label.check-label-default:before,
input[type=checkbox]:checked + label.check-label-default:before {
  width: 10px;
  top: -5px;
  left: 5px;
  opacity: 1;
  border: 2px solid green;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

.input-switch {
  position: relative;
  width: 69px;
  background: #FFF;
  border-radius: 12px;
}

.input-switch input[type=checkbox] {
  display: none;
}

.input-switch label {
  display: block;
  box-sizing: border-box;
  height: 24px;
  border-radius: 30px;
  margin-bottom: 0;
  line-height: 21.5px;
  font-size: 9px;
  font-weight: bold;
  border: 2px solid #999999;
}

.input-switch input[type=checkbox]:checked + label {
  border-color: #3490dc;
  background: #3490dc;
}

.input-switch label span:after {
  content: "\505C\6B62\4E2D";
  float: right;
  margin-right: 6px;
  color: #999;
}

.input-switch input[type=checkbox]:checked + label span:after {
  content: "\5229\7528\4E2D";
  float: left;
  margin-left: 6px;
  color: #FFF;
}

.input-switch.product label span:after {
  content: "\975E\516C\958B";
}

.input-switch.product input[type=checkbox]:checked + label span:after {
  content: "\516C\958B\4E2D";
}

.input-switch.inquiry-status label span:after {
  content: "\672A\8AAD";
  margin-right: 12px;
}

.input-switch.inquiry-status input[type=checkbox]:checked + label span:after {
  content: "\65E2\8AAD";
  margin-left: 12px;
}

.input-switch .swImg {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #999;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  transition: 0.15s;
}

.input-switch input[type=checkbox]:checked + label .swImg {
  transform: translateX(46px);
  background: #FFF;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  /*
  & .modal__btn {
      font-size: .875rem;
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
      background-color: #e6e6e6;
      color: rgba(0,0,0,.8);
      border-radius: .25rem;
      border-style: none;
      border-width: 0;
      cursor: pointer;
      -webkit-appearance: button;
      text-transform: none;
      overflow: visible;
      line-height: 1.15;
      margin: 0;
      will-change: transform;
      -moz-osx-font-smoothing: grayscale;
      backface-visibility: hidden;
      transform: translateZ(0);
      transition: transform .25s ease-out;

      &:focus,
      &:hover {
          -webkit-transform: scale(1.05);
          transform: scale(1.05);
      }
  }

  & .modal__btn-primary {
      background-color: #00449e;
      color: #fff;
  }
  */
}

.modal .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal__container {
  position: relative;
  background-color: #fff;
  padding: 15px;
  width: 600px;
  max-width: 96%;
  max-height: 78vh;
  border-radius: 15px;
  box-sizing: border-box;
}

.modal.news-modal .modal__container {
  width: 750px;
  display: flex;
  flex-direction: column;
}

.modal.news-modal .detail {
  white-space: pre-wrap;
}

.modal .inner-content {
  height: 100%;
  overflow-y: auto;
}

.modal .inner-content .login-area {
  text-align: center;
}

.modal .inner-content .regist-area .sub-title {
  text-align: center;
  margin-bottom: 18px;
  font-weight: bold;
}

.modal .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
  color: #333;
}

@media screen and (max-width: 576px) {
  .modal .title {
    font-size: 16px;
  }
}

.modal .fair_modal_close,
.modal .modal_close,
.modal .modal__close {
  position: absolute;
  top: -15px;
  right: 3px;
  width: 30px;
  height: 30px;
  background: #333;
  color: #FFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .fair_modal_close:before,
.modal .modal_close:before,
.modal .modal__close:before {
  content: "\2715";
}

/**************************\
  Demo Animation Style
\**************************/

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

@media all and (-ms-high-contrast: none) {
  .row {
    margin-left: -9px;
    margin-right: -9px;
  }

  .row > * {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-right: 9px;
    padding-left: 9px;
  }

  #home .bg-halftone::before,
  #home .bg-halftone::after {
    opacity: 0.03 !important;
  }
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */

/*
 .ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    height: 100%;
    margin: 0px;
    position: relative;
  }
  .ql-container.ql-disabled .ql-tooltip {
    visibility: hidden;
  }
  .ql-container.ql-disabled .ql-html ul[data-checked] > li::before {
    pointer-events: none;
  }
  .ql-clipboard {
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;
  }
  .ql-clipboard p {
    margin: 0;
    padding: 0;
  }
  .ql-html {
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    overflow-y: auto;
    padding: 12px 15px;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .ql-html > * {
    cursor: text;
  }
*/

.ql-html a {
  color: #3490dc;
  text-decoration: underline;
}

.ql-html a:hover {
  text-decoration: none;
}

.ql-html p,
.ql-html ol,
.ql-html ul,
.ql-html pre,
.ql-html blockquote,
.ql-html h1,
.ql-html h2,
.ql-html h3,
.ql-html h4,
.ql-html h5,
.ql-html h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-html ol,
.ql-html ul {
  padding-left: 1.5em;
}

.ql-html ol > li,
.ql-html ul > li {
  list-style-type: none;
}

.ql-html ul > li::before {
  content: "\2022";
}

.ql-html ul[data-checked=true],
.ql-html ul[data-checked=false] {
  pointer-events: none;
}

.ql-html ul[data-checked=true] > li *,
.ql-html ul[data-checked=false] > li * {
  pointer-events: all;
}

.ql-html ul[data-checked=true] > li::before,
.ql-html ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}

.ql-html ul[data-checked=true] > li::before {
  content: "\2611";
}

.ql-html ul[data-checked=false] > li::before {
  content: "\2610";
}

.ql-html li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}

.ql-html li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

.ql-html li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}

.ql-html ol li:not(.ql-direction-rtl),
.ql-html ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}

.ql-html ol li.ql-direction-rtl,
.ql-html ul li.ql-direction-rtl {
  padding-right: 1.5em;
}

.ql-html ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}

.ql-html ol li:before {
  content: counter(list-0, decimal) ". ";
}

.ql-html ol li.ql-indent-1 {
  counter-increment: list-1;
}

.ql-html ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) ". ";
}

.ql-html ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-2 {
  counter-increment: list-2;
}

.ql-html ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) ". ";
}

.ql-html ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-3 {
  counter-increment: list-3;
}

.ql-html ol li.ql-indent-3:before {
  content: counter(list-3, decimal) ". ";
}

.ql-html ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-4 {
  counter-increment: list-4;
}

.ql-html ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) ". ";
}

.ql-html ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-5 {
  counter-increment: list-5;
}

.ql-html ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) ". ";
}

.ql-html ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-6 {
  counter-increment: list-6;
}

.ql-html ol li.ql-indent-6:before {
  content: counter(list-6, decimal) ". ";
}

.ql-html ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}

.ql-html ol li.ql-indent-7 {
  counter-increment: list-7;
}

.ql-html ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) ". ";
}

.ql-html ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}

.ql-html ol li.ql-indent-8 {
  counter-increment: list-8;
}

.ql-html ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) ". ";
}

.ql-html ol li.ql-indent-8 {
  counter-reset: list-9;
}

.ql-html ol li.ql-indent-9 {
  counter-increment: list-9;
}

.ql-html ol li.ql-indent-9:before {
  content: counter(list-9, decimal) ". ";
}

.ql-html .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}

.ql-html li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}

.ql-html .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}

.ql-html li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}

.ql-html .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}

.ql-html li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}

.ql-html .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}

.ql-html li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}

.ql-html .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}

.ql-html li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}

.ql-html .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}

.ql-html li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}

.ql-html .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}

.ql-html li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}

.ql-html .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}

.ql-html li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}

.ql-html .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}

.ql-html li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}

.ql-html .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}

.ql-html li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}

.ql-html .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}

.ql-html li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}

.ql-html .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}

.ql-html li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}

.ql-html .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}

.ql-html li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}

.ql-html .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}

.ql-html li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}

.ql-html .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}

.ql-html li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}

.ql-html .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}

.ql-html li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}

.ql-html .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}

.ql-html li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}

.ql-html .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}

.ql-html li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}

.ql-html .ql-video {
  display: block;
  max-width: 100%;
}

.ql-html .ql-video.ql-align-center {
  margin: 0 auto;
}

.ql-html .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}

.ql-html .ql-bg-black {
  background-color: #000;
}

.ql-html .ql-bg-red {
  background-color: #e60000;
}

.ql-html .ql-bg-orange {
  background-color: #f90;
}

.ql-html .ql-bg-yellow {
  background-color: #ff0;
}

.ql-html .ql-bg-green {
  background-color: #008a00;
}

.ql-html .ql-bg-blue {
  background-color: #06c;
}

.ql-html .ql-bg-purple {
  background-color: #93f;
}

.ql-html .ql-color-white {
  color: #fff;
}

.ql-html .ql-color-red {
  color: #e60000;
}

.ql-html .ql-color-orange {
  color: #f90;
}

.ql-html .ql-color-yellow {
  color: #ff0;
}

.ql-html .ql-color-green {
  color: #008a00;
}

.ql-html .ql-color-blue {
  color: #06c;
}

.ql-html .ql-color-purple {
  color: #93f;
}

.ql-html .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}

.ql-html .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}

.ql-html .ql-size-small {
  font-size: 0.75em;
}

.ql-html .ql-size-large {
  font-size: 1.25em;
}

.ql-html .ql-size-huge {
  font-size: 1.5em;
}

.ql-html .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}

.ql-html .ql-align-center {
  text-align: center;
}

.ql-html .ql-align-justify {
  text-align: justify;
}

.ql-html .ql-align-right {
  text-align: right;
}

.ql-html.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  #header {
    position: static;
  }

  #suggest-search {
    display: none;
  }

  .detail-page#buyer .bg-detail-wide {
    margin-top: 30px;
  }

  .detail-page .container {
    max-width: 1030px;
  }

  .detail-page .container .bg-detail-wide {
    padding-left: 30px;
    padding-right: 30px;
  }

  .detail-page .container #product-item-images {
    width: 100%;
  }

  .detail-page #business-head-swiper {
    margin-top: 0;
  }

  .detail-page .swiper-container {
    overflow: visible;
  }

  .detail-page .swiper-wrapper {
    transform: translate3d(0px, 0px, 0px) !important;
  }

  .detail-page .swiper-slide {
    width: 100vw !important;
  }

  .detail-page .swiper-slide:not(:only-child):not(:nth-child(2)) {
    transform: scale(0);
    max-width: 0px !important;
  }

  .detail-page #business-head-swiper .swiper-slide img {
    width: 1011px;
  }

  .detail-page .bg-detail-wide {
    padding: 58px 5px 30px;
  }

  .print-btn {
    display: none;
  }

@page {
    size: A3;
}
}


#header #header-nav-list {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 20px;
}
#header #header-nav-list .sns-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
#header #header-nav-list .sns-icons a {
    margin-right: 15px;
}
#header #header-nav-list .sns-icons i {
  font-size: 30px;
}
@media screen and (max-width: 870px) {
  #header #header-nav-list .sns-icons i {
    font-size: 45px;
    padding: 12px;
  }
}

#header #header-nav-list ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#header #header-nav-list ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li {
    flex-direction: column;
    margin-left: 0;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.howto-first {
    display: flex;
  }
}

#header #header-nav-list ul li .user-icon {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #999;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header #header-nav-list ul li.icon-area {
  width: 45px;
  position: relative;
}

#header #header-nav-list ul li.icon-area svg {
  font-size: 21px;
}

#header #header-nav-list ul li.icon-area a {
  height: 60px;
  display: flex;
  align-items: center;
}

#header #header-nav-list ul li.icon-area .inquiry-btn {
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#header #header-nav-list ul li i {
  font-size: 21px;
}

#header #header-nav-list ul li i:hover {
  cursor: pointer;
}

#header #header-nav-list ul li .signin {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
  margin-left: 18px;
}

#header #header-nav-list ul li .signin svg {
  font-size: 21px;
}

#header #header-nav-list ul li .signin i {
  margin-left: 6px;
}

#header #header-nav-list ul li .signin i:hover {
  text-decoration: none;
}

#header #header-nav-list ul li.has-child-list {
  position: relative;
  height: 60px;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.has-child-list {
    height: auto;
  }
}

#header #header-nav-list ul li.has-child-list .parenat {
  height: 60px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

@media screen and (min-width: 1110px) {
  #header #header-nav-list ul li.has-child-list .parenat {
    min-width: 165px;
    font-size: 13px;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li.has-child-list .parenat {
    width: 100%;
    padding: 0 15px;
    justify-content: flex-start;
  }
}

#header #header-nav-list ul li .child-list {
  display: none;
  position: absolute;
  top: 99.9%;
  right: 0px;
  background: #FFF;
  width: 100%;
}

@media screen and (max-width: 1110px) {
  #header #header-nav-list ul li .child-list {
    font-size: 10px;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list {
    position: relative;
    margin-top: 0;
  }
}

#header #header-nav-list ul li .child-list.howto,
#header #header-nav-list ul li .child-list.user-child {
  right: 0px;
  width: 150px;
}

#header #header-nav-list ul li .child-list.howto li a,
#header #header-nav-list ul li .child-list.user-child li a {
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list.howto,
  #header #header-nav-list ul li .child-list.user-child {
    width: 100%;
  }
}

#header #header-nav-list ul li .child-list li {
  width: 100%;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li .child-list li {
    border-top: 1px solid #CCC;
  }
}

#header #header-nav-list ul li .child-list li a {
  padding: 15px 12px;
  width: 100%;
  text-align: center;
}

#header #header-nav-list ul li:hover {
  cursor: pointer;
  text-decoration: underline;
}

#header #header-nav-list ul li:hover .child-list {
  display: flex;
  flex-direction: column;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.017), 0 5px 6.1px rgba(0, 0, 0, 0.026), 0 8.1px 11.4px rgba(0, 0, 0, 0.086);
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li:hover .child-list {
    display: none;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list ul li:hover .child-list {
    box-shadow: none;
  }
}

#header #header-nav-list .signup-area {
  display: none;
}

#header #header-nav-list .signin-area .inquiry {
  display: none;
}

@media screen and (max-width: 870px) {
  #header #header-nav-list .signin-area .inquiry {
    display: block;
  }
}

@media screen and (max-width: 870px) {
  #header #header-nav-list {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    font-size: 24px;
    background: white;
    padding-bottom: 0px;
  }

  #header #header-nav-list .parent-list {
    border-top: 1px solid #999;
    overflow-y: scroll;
  }

  #header #header-nav-list ul {
    margin-top: 150px;
    justify-content: flex-start;
    width: 100vw;
    display: flex;
    flex-direction: column;
  }

  #header #header-nav-list ul.user-child {
    width: 100vw;
  }

  #header #header-nav-list ul li {
    text-align: left;
    border-bottom: 1px solid #CCC;
    width: 96%;
  }

  #header #header-nav-list ul li.has-child-list {
    position: relative;
  }

  #header #header-nav-list ul li.has-child-list:after {
    content: "\FF0B";
    font-weight: bold;
    position: absolute;
    right: 0px;
    top: 9px;
  }

  #header #header-nav-list ul li.has-child-list.sp-show .child-list {
    display: flex;
  }

  #header #header-nav-list ul li.has-child-list.sp-show:after {
    content: "\2212";
  }

  #header #header-nav-list ul li.icon-area {
    display: none;
  }

  #header #header-nav-list ul li .child-list {
    position: static;
  }

  #header #header-nav-list ul li.signup-area {
    display: flex;
    flex-direction: row;
    font-size: 24px;
    padding: 12px 0;
  }

  #header #header-nav-list ul li.signup-area .signup {
    flex: 1;
    text-align: center;
  }

  #header #header-nav-list ul li.signup-area .signup:first-child {
    border-right: 1px solid #CCC;
  }

  #header #header-nav-list ul li.signin-area {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    height: 60px;
    font-size: 18px;
    font-weight: normal;
  }

  #header #header-nav-list ul li.signin-area .inquiry {
    font-size: 18px;
    font-weight: normal;
  }

  #header #header-nav-list ul li.signin-area .signin {
    font-size: 18px;
    font-weight: normal;
  }

  #header #header-nav-list ul li.user-parent {
    display: flex;
    width: 96%;
    align-items: flex-start;
    padding: 0 15px;
  }

  #header #header-nav-list ul li.user-parent .header-info-icon {
    height: 60px;
    display: flex;
    align-items: center;
  }
}