@charset "UTF-8";
/* VW
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* 数値から単位を除外
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `rem` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `em` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/**
 * 環境・制度
 *
 * オフィスフォトツアー
 *
 */
/* ==========================================================================
   reset
   ========================================================================== */
body {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  body {
    padding-bottom: 13.33vw;
    height: auto;
  }
}

@media screen and (min-width: 768px), print {
  #wrapper {
    padding: 0 0 1.1rem !important;
    position: relative;
  }
}

/* ==========================================================================
   wrapper
   ========================================================================== */
@media screen and (min-width: 768px), print {
  #wrapper {
    opacity: 0;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
  #wrapper.show {
    opacity: 1;
  }
}

.bottomSct {
  background-color: #fff;
  width: 100%;
  height: 1.1rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .bottomSct {
    position: fixed;
    left: 0;
    bottom: 0;
    height: auto;
  }
}

.bottomSct__inner {
  position: relative;
  padding: 0.1rem;
}

.bottomSct__inner::after {
  display: block;
  clear: both;
  content: "";
}

@media screen and (max-width: 767px) {
  .bottomSct__inner {
    padding: 2.67vw;
  }
}

/* ==========================================================================
   slider
   ========================================================================== */
@media screen and (min-width: 768px), print {
  #slider {
    max-height: calc(100vh - 1.1rem);
  }
}

@media screen and (max-width: 767px) {
  #slider {
    max-height: none !important;
  }
}

@media screen and (min-width: 768px), print {
  .slider__item {
    cursor: -webkit-grab;
    cursor: grab;
    position: relative;
  }
  .slider__item:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .slider__item span {
    display: block;
  }
  .slider__item span img {
    width: 100%;
    height: calc(100vh - 1.1rem);
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    font-family: 'object-fit: cover; object-position: center;';
  }
}

@media screen and (max-width: 767px) {
  .slider__item {
    margin-bottom: 1.33vw;
  }
  .slider__item img {
    width: 100%;
  }
}

.slider__item__cont {
  font-family: "FOT-筑紫明朝 Pr6 B", serif;
}

.slider__item__cont.show {
  display: block;
}

@media screen and (min-width: 768px), print {
  .slider__item__cont {
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    width: 3rem;
    height: auto;
    display: none;
    padding: 0.3rem;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
  }
}

@media screen and (max-width: 767px) {
  .slider__item__cont {
    color: #fff;
    width: 53.33vw;
    left: 2.67vw;
    top: 2.67vw;
    padding: 4vw;
  }
}

.slider__item__cont__ttl {
  font-weight: bold;
  font-size: 0.22rem;
  text-align: center;
  color: #010101;
}

@media screen and (max-width: 767px) {
  .slider__item__cont__ttl {
    font-size: 3.47vw;
    text-align: left;
  }
  .slider__item__cont__ttl + .slider__item__cont__txt {
    margin-top: 1.33vw;
  }
}

@media screen and (max-width: 767px) {
  .slider__item__cont__txt {
    font-size: 2.93vw;
  }
}

/* ==========================================================================
   thumbnail
   ========================================================================== */
#thumbnail {
  width: 6rem;
  height: 0.9rem;
  float: right;
  margin-right: 0.3rem;
}

@media screen and (max-width: 767px) {
  #thumbnail {
    display: none;
  }
}

.thumbnail__item {
  cursor: pointer;
  width: 1.2rem;
  height: 0.6rem;
  margin-right: 0.05rem;
  position: relative;
}

.thumbnail__item:before {
  content: '';
  width: calc(100% - 0.04rem);
  height: calc(100% - 0.04rem);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  border: 2px solid transparent;
}

.thumbnail__item.slick-current:before {
  border-color: #b90000;
}

.thumbnail__item:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.thumbnail__item:last-child {
  margin-right: 0;
}

.thumbnail__item span {
  display: block;
}

.thumbnail__item span img {
  width: 100%;
  height: 0.9rem;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;';
}

@media screen and (min-width: 768px), print {
  .thumbnail__item {
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
  }
  .thumbnail__item:not(.slick-current):hover {
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .thumbnail__item {
    width: auto;
    height: 16vw;
  }
  .thumbnail__item span img {
    width: 100%;
    height: 16vw;
  }
}

/* ==========================================================================
   logo
   ========================================================================== */
.logo {
  color: #010101;
  font-size: 0;
}

.logo > * {
  display: inline-block;
  vertical-align: bottom;
}

.logo a {
  color: #010101;
  text-decoration: none;
}

@media screen and (min-width: 768px), print {
  .logo .misumi {
    margin-left: 0.1rem;
    margin-bottom: 0.05rem;
  }
}

@media screen and (max-width: 767px) {
  .logo .misumi {
    margin-left: 2.67vw;
  }
  .logo .misumi img {
    width: 21.33vw;
  }
}

.logo .txt {
  font-family: "FOT-筑紫明朝 Pr6 M", serif;
}

@media screen and (min-width: 768px), print {
  .logo {
    position: absolute;
    left: 0.3rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .logo .txt {
    border: 1px solid rgba(1, 1, 1, 0.6);
    margin-left: 0.1rem;
    padding: 0.06rem 0.1rem 0.04rem;
    font-size: 0.14rem;
  }
}

@media screen and (max-width: 767px) {
  .logo {
    font-size: 0;
    margin: 0 auto;
    padding: 1.33vw 0;
    text-align: center;
  }
  .logo a > * {
    display: inline-block;
    vertical-align: top;
  }
  .logo img {
    width: 48vw;
  }
  .logo .txt {
    display: block;
    font-size: 2.93vw;
    line-height: 1.2;
    margin-top: 1.33vw;
  }
  .logo .txt span {
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: inline-block;
    padding: 0.53vw 1.33vw 0.8vw;
  }
}

/* ==========================================================================
 slick
 ========================================================================== */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px), print {
  .slick-list {
    overflow: hidden;
  }
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  outline: none;
  background: #cd0000;
  z-index: 99;
}

@media screen and (min-width: 768px), print {
  .slick-prev,
  .slick-next {
    bottom: 0;
    height: 100%;
    width: 0.25rem;
  }
}

@media screen and (max-width: 767px) {
  .slick-prev,
  .slick-next {
    bottom: -11.2vw;
    height: 10.93vw;
    width: 10.93vw;
  }
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: .3 !important;
}

.slick-prev:before,
.slick-next:before {
  content: '';
  margin: auto;
  position: absolute;
  bottom: 0;
}

@media screen and (min-width: 768px), print {
  .slick-prev:before,
  .slick-next:before {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    top: 0;
    width: 0.1rem;
    height: 0.1rem;
  }
}

@media screen and (max-width: 767px) {
  .slick-prev:before,
  .slick-next:before {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 2.13vw;
    height: 2.13vw;
    top: 1px;
  }
}

.slick-prev {
  left: -0.3rem;
}

.slick-prev:before {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  left: 45%;
}

@media screen and (min-width: 768px), print {
  .slick-next {
    right: -0.3rem;
  }
}

@media screen and (max-width: 767px) {
  .slick-next {
    left: 11.2vw;
  }
}

.slick-next:before {
  right: 45%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.slick-prev {
  border-radius: 0.03rem 0 0 0.03rem;
}

.slick-next {
  border-radius: 0 0.03rem 0.03rem 0;
}