/* 眺望シミュレーション */
#pankuzu{margin: 0;padding: 20px 0;}
#pankuzu .pankuzu-list li{color: #fff}
.bgB{background: #000;color: #fff;padding-bottom: 60px}

.view-box{color: #fff}
.view-box h2 {font-size: 42px;	letter-spacing: 0.5em;text-indent: 0.5em; text-align: center;font-weight: normal;line-height: 1.1;padding: 30px 0 0;margin-bottom: 80px}
.view-box h2 span{font-size: 18px;letter-spacing: 0.1em;text-indent: 0.1em; }
.view-box .copy{font-size: 30px;letter-spacing: 0.2em;}
.view-box h3 {padding: 12px 0 0px;text-align: center;font-size: 30px;letter-spacing: 0.2em;font-weight: normal;margin-bottom: 10px;color: #a69a68}
.view-box .plain-box{margin-top: 60px;}
.view-box .mark{text-align: right}
.view-box .mark img{width: 30px}

.view-box .col3{position: relative}
.view-box .col3 .hikari{position: absolute;left: 0;top: 0;animation:blink 0.8s ease-in-out infinite alternate;}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.note-box{text-align: left}

.view-box ul.link-ul li{position: absolute;height: 50px;top: 50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width: 29px;}
.panoramaImg {position: relative;overflow: hidden;text-align: center}
.view-box ul.link-ul li#left {left: 10px;background: url("../images/view/panorama_arrow_left.png") no-repeat left top;-webkit-background-size: cover;background-size: cover;}
.view-box ul.link-ul li#right {right: 10px;background: url("../images/view/panorama_arrow_right.png") no-repeat left top;-webkit-background-size: cover;background-size: cover;}


.panorama{height: 250px!important;}
.panoramaImg-box{text-align: right}

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

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_6f, .block-view_9f,.block-view_14f {
    height: 455px; }
    @media screen and (max-width: 380px) {
      .block-view_6f, .block-view_9f,.block-view_14f {
        height: 455px; } }

  .block-view_6f {
    background: url("../images/view/view_06f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_9f {
    background: url("../images/view/view_09f.jpg") repeat-x bottom;
    backface-visibility: hidden; }
  .block-view_14f {
    background: url("../images/view/view_12f.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%);

  width: 100px;
  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;

  width: 50px;

  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; }
.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  opacity: 1; }


@media print, screen and (min-width: 669px) { /*670px*/
.view-box .note-box {margin: 70px auto;}
.panoramaImg-box{cursor: grab;}
.view-box ul.link-ul li{height: 89px;width: 52px;cursor: pointer;}
}
@media screen and (max-width: 668px) {/*スマホ設定*/
.view-box{padding-top: 30px;}
.view-box h2 {font-size: 28px;margin-bottom: 40px}
.view-box .copy{font-size: 18px;}
.view-box .plain-box{width: 96%;margin: 60px auto 0}
.view-box h3{padding: 6px 0;font-size: 20px;}
}
@media screen and (max-width: 668px) {/*スマホ設定*/
.view-box .col3_2{width: 100%;}
.view-box .col3{width: 100%;margin: 20px auto 0}
.view-box .copy{text-align: center; }
}