@charset "utf-8";

.ccc-modal {
  display: none;
  background-color: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%; /* lte IE8 */
  height: 100vh;
  overflow: auto;
  position : fixed;
  z-index: 9999999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.ccc-modal.opened {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-top: 5%;
  overflow: scroll;
  -webkit-animation: fadeIn 0.3s linear 0s 1;
  -moz-animation: fadeIn 0.3s linear 0s 1;
  -ms-animation: fadeIn 0.3s linear 0s 1;
  -o-animation: fadeIn 0.3s linear 0s 1;
  animation: fadeIn 0.3s linear 0s 1;
}
.ccc-modal-close {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* cursor: pointer; */
}
.ccc-modal-close.modal-close-btn {
  position: fixed;
  z-index: 999;
  top: 3%;
  right: 3%;
  left: auto;
  width: 45px;
  height: 45px;
  cursor: pointer;
  padding: 5px;
  background: rgba(0,0,0,0.6);
}
.modal-close-bar {
  width:45px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.modal-close-bar:first-child {
  transform: rotate(45deg);
}
.modal-close-bar:last-child {
  transform: rotate(135deg);
}
.ccc-modal-cont {
  display: block;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  position: static !important; /* 必須 */
}
.ccc-modal-img {
  display: inline-block;
  max-width: 90%;
  position: relative;
  z-index: 100;
  cursor: default;
}
.ccc-modal-txt {
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.5;
  text-align: left;
  color: #FFF;
  margin: 10px 0 0 0;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
}
.ccc-modal-next,
.ccc-modal-prev {
  width: 50px;
  height: 15%;
  position: fixed;
  z-index: 2;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 10% 5%;
  cursor: pointer;
}
.ccc-modal-next {
  right: 0;
}
.ccc-modal-prev {
  left: 0;
}
.ccc-modal-next:before,
.ccc-modal-prev:before {
  content: " ";
  border: 2px solid #fff;
  border-bottom: 0;
  border-left: 0;
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.ccc-modal-next:before {
  transform: rotate(45deg);
}
.ccc-modal-prev:before {
  transform: rotate(-135deg);
}
.ccc-modal-img:first-child > .ccc-modal-prev {
  display: none;
}
.ccc-modal-img:last-child > .ccc-modal-next {
  display: none;
}
/* video */
.ccc-modal-img-video video {
  width: 100%;
}
.ccc-modal-img-video video::-webkit-media-controls-panel {
  position: relative;
  z-index: 999; /* 出来るだけ前面に設置 */
}
/* youtube */
.ccc-modal-img-youtube {
  width: 90%;
  padding-bottom: 30%;
  box-sizing: border-box;
  max-width: 800px;
  min-height: 500px;
}
.ccc-modal-img-youtube > iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* html_url */
.ccc-modal-img-html_url {
  width: 90%;
  padding-bottom: 50%;
  box-sizing: border-box;
  max-width: 1000px;
  min-height: 500px;
}
.ccc-modal-img-html_url > iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* html */
.ccc-modal-img-html {
  width: 90%;
  max-width: 1000px;
  box-sizing: border-box;
}
/* fullscreen */
.ccc-modal-fullscreen {
  display: table;
  position: fixed;
  bottom: 3%;
  right: 3%;
  height: 3em;
  width: 3em;
  z-index: 3;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
}
.ccc-modal-fullscreen:before {
  font-family: 'FontAwesome';
  content: "\f0b2";
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}
.ccc-modal-img.fullscreen {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
}
.ccc-modal-img.fullscreen img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.ccc-modal-img.fullscreen .ccc-modal-txt {
  display: none;
}
.ccc-modal-img.fullscreen .ccc-modal-next,
.ccc-modal-img.fullscreen .ccc-modal-prev {
  opacity: 0;
}
.ccc-modal-img.fullscreen .ccc-modal-next:hover,
.ccc-modal-img.fullscreen .ccc-modal-prev:hover {
  opacity: 1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}


/* 背面を固定（背面のスクロールを止める）*/
body.ccc-bdy-fixed {
  overflow: hidden;
}
body.ccc-bdy-fixed #wpadminbar {
  z-index: 999;
}



/* iOS ハック
----------------------------------------------------------*/
@media only screen and (max-device-width : 1024px) {
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .slscrl { bottom: 10%; }
    #cont-about { height: 60vh !important; }
  }
}


/* SP
----------------------------------------------------------*/
@media only screen and (max-width: 640px) {
  .ccc-modal-close.modal-close-btn {
    width: 30px;
    height: 30px;
  }
  .modal-close-bar {
    width: 30px;
  }
  .ccc-modal-next,
  .ccc-modal-prev {
    width: 20px;
    margin-bottom: 0;
  }
  .ccc-modal-next:before,
  .ccc-modal-prev:before {
    width: 20px;
    height: 20px;
  }
  .ccc-modal-txt {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .ccc-modal-fullscreen {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .ccc-modal-img-youtube {
    padding-bottom: 67%;
    min-height: 0;
  }
}