/********************************************************

setting

********************************************************/
:root {
  --margin-block: 200px; }

@media (min-width: 1101px) and (max-width: 1280px) {
  :root {
    --margin-block: 120px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --margin-block: 90px; } }
@media (max-width: 640px) {
  :root {
    --margin-block: 70px; } }
.wrapper_view {
  width: 100%;
  background: #272f36; }

.wrapper_view_descriptions {
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 100px 5% 60px;
  font-size: 14px;
  line-height: 2.7; }
  @media screen and (min-width: 750px) {
    .wrapper_view_descriptions {
      font-size: calc(14px + 0.0051282051 * (100vw - 750px)); } }
  @media screen and (min-width: 1920px) {
    .wrapper_view_descriptions {
      font-size: 20px; } }
  @media screen and (max-width: 600px) {
    .wrapper_view_descriptions {
      padding: 70px 5% 30px;
      line-height: 2.2; } }

.description_of_each_view {
  width: 100%;
  text-align: center;
  color: #a69a68;
  margin-bottom: 15px;
  font-size: 14px; }
  @media screen and (min-width: 750px) {
    .description_of_each_view {
      font-size: calc(14px + 0.0051282051 * (100vw - 750px)); } }
  @media screen and (min-width: 1920px) {
    .description_of_each_view {
      font-size: 20px; } }

.block-view {
  width: 100%;
  position: relative;
  padding-bottom: 65px; }
  @media screen and (max-width: 600px) {
    .block-view {
      padding-top: 20px;
      padding-bottom: 70px; } }
  .block-view_2f, .block-view_4f, .block-view_6f, .block-view_8f, .block-view_10f, .block-view_12f, .block-view_14f {
    height: 455px; }
    @media screen and (max-width: 380px) {
      .block-view_2f, .block-view_4f, .block-view_6f, .block-view_8f, .block-view_10f, .block-view_12f, .block-view_14f {
        height: 303px; } }
  .block-view_2f {
    background: url("../images/view/view_02f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_4f {
    background: url("../images/view/view_04f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_6f {
    background: url("../images/view/view_06f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_8f {
    background: url("../images/view/view_08f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_10f {
    background: url("../images/view/view_10f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_12f {
    background: url("../images/view/view_12f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_14f {
    background: url("../images/view/view_14f.jpg") repeat-x bottom;
    backface-visibility: hidden; }

.block-view_wrapper {
  position: relative; }
  .block-view_wrapper:hover .icon-overlay {
    opacity: 0; }

.block-view_image {
  position: relative; }

.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 220px;
  width: 35%;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  opacity: 1; }

.block-view_control_left, .block-view_control_right {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-family: 'Material Icons';
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 46px;
  color: #b4a57f;
  width: 50px;
  height: 170px;
  background: rgba(25, 25, 25, 0.9);
  cursor: pointer;
  z-index: 1;
  touch-action: auto; }
  @media screen and (max-width: 380px) {
    .block-view_control_left, .block-view_control_right {
      width: 40px;
      padding: 10px;
      opacity: 0.8; } }
.block-view_control_left {
  left: 0; }
  @media screen and (max-width: 380px) {
    .block-view_control_left {
      left: 0.5px;
      touch-action: manipulation !important; } }
.block-view_control_right {
  right: 0; }