@charset "UTF-8";
/* CSS Document */

/*
CSS for Builds ver.01.01
*/

/*
01 Base
========================================================================== */
.blockBuilds {
  padding: 0 190px;
}
.blockBuilds .box {
  display: flex;
  width: 100%;
  position: relative;
}

/* Genelic */
.typeCross, .typeSplit { position: relative; }

/*
02 Blocks
========================================================================== */
/* verHeader */
.verHeader { padding: 15px 0 ;}
.caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.caption h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.caption h2 > * {
  line-height: 1.2;
  position: relative;
}
.caption h2 i {
  font-size: 17px;
  letter-spacing: .05rem;
  left: -2px;
}
.caption h2 b {
  padding: 22px 0 0 0;
  font-size: 11px;
  letter-spacing: .05rem;
}
.verNews .caption h2 i {
  font-size: 15px;
  letter-spacing: .08rem;
  left: -1px;
}
.verNews .caption h2 time {
  padding: 20px 0 0 0;
  font-size: 12px;
  letter-spacing: .05rem;
}
.caption ul { margin: 40px 0 0 0;　}
.caption ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}
.caption ul > li + li { margin: 10px 0 0 0;　}
.caption ul li > * {
  line-height: 1.2;
  position: relative;
}
.caption ul li time {
  padding: 0 12px 0 0;
  margin: 0 5px 0 0;
  letter-spacing: .03rem;
}
.caption ul li time:before {
  content: '';
  width: 11px;
  height: 1px;
  background-color: var(--black);
  position: absolute;
  top: 7px;
  right: 0;
  transform: rotate(-55deg); 
}
.caption ul li p > * { position: relative; }
.caption ul li p b { font-size: 11px; }
.caption ul li p b:before,
.caption ul li p b:after { padding: 0 1px; }
.caption ul li p b:before { content: '（'; }
.caption ul li p b:after { content: '）'; }

/* verTitle */
.verTitle { padding: 60px 0 0; }
.verTitle > * {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.verTitle > * > * {
  font-size: 13px;
  line-height: 2.3;
  letter-spacing: .05rem;
}

/* verText */
.verText { padding: 60px 0 0; }
.verText > * {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 13px;
}
.verText > * > p { line-height: 2.3; }

/* verImage */
.verImage { padding: 60px 0 0; }
.verImage picture img { width: 100%; }
.verImage.verCross { justify-content: center; }
.verImage.verCross .box {
  flex-direction: column;
  justify-content: flex-start;
}
.verImage.verCross .box > picture + picture { padding: 15px 0 0 0; }

.verImage.verSplit {}
.verImage.verSplit + .verImage.verSplit { padding: 15px 0 0; }
.verImage.verSplit .box {
  flex-direction: row;
  justify-content: space-between;
}
.verImage.verSplit .box picture { width: calc(50% - 7.5px); }

/* verList */
.verList { padding: 60px 0 0; }
.verList .box {
  flex-direction: column;
  align-items: flex-start;
}
.verList .box h3 {
  margin: 0 0 7px 0;
  letter-spacing: .02rem;
}
.verList .box ul li {
  padding: 0 0 0 12px;
  font-size: 12px;
  text-align: left;
  position: relative;
}
.verList .box ul li:before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--black);
  position: absolute;
  top: 12px;
  left: 1px;
}

/* verLink */
.verLink { padding: 60px 0 0; }
.verLink a {
  display: inline-flex;
  padding: 0 2.5em 20px 0;
  position: relative;
  transition: .3s ease-out;
}
.verLink a:before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: var(--gray);
  position: absolute;
  bottom: 0;
  left: 50% ;
  transform: translate(-50%,0);
}
.verLink a:hover { opacity: .75; }

/* verLine */
.verLine { padding: 60px 0 0; }
.verLine hr {
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: var(--gray);
  margin: 10px 0;
}

/* verBack */
.verBack {
  width: 120px;
  height: 30px;
  position: fixed;
  top: 65px;
  right: 37px;
  transform: rotate(-90deg);
  transform-origin: center;
  z-index: 100;
}
.verBack > * { display: block; }
.verBack em {
  padding: 0 25px 0 10px;
  background-color: var(--white);
  font-size: 11px;
  letter-spacing: .03rem;
  position: relative;
  white-space: nowrap;
}
.verBack em:before {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url(/images/common/btn-back.svg);
  background-repeat: no-repeat;
  background-size: cover; 
  position: absolute;
  top: 0;
  right: 7px;
  transform: rotate(90deg);
}

/* verEmbed */
.verEmbed {
  padding: 60px 0 0;
  display: flex;
  justify-content: center;
}
.verEmbed .box {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.verEmbed .box > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* wideView */
.wideView {
  display: none;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.sliderWideview {
  width: 100%;
  height: 100%;
  position: relative;
}
.sliderWideview div {
  width: 100%;
  height: 100%;
}
.sliderWideview .box { padding: 25px 0 35px; }
.sliderWideview picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sliderWideview picture img {
  height: 100%;
  max-width: 1300px;
  max-height: 900px;
  object-fit: cover;
}
.sliderWideview time {
  font-size: 12px;
  letter-spacing: .05rem;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%,0);
}

.slick-arrow { position: absolute; } 
.slick-prev, .slick-next {
  width: 18px;
  height: 18px;
  font-size: 0;
  bottom: 35px;
  z-index: 10000;
}
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-prev:before, .slick-next:before {
  content: '';
  width: 100%;
  height: 100%;
  border-top: 1px solid var(--black);
  border-right: 1px solid var(--black);
  position: absolute;
  top: 0;
}
.slick-prev:before {
  left: 35px;
  transform: rotate(-135deg);
}
.slick-next:before {
  right: 35px;
  transform: rotate(45deg);
}
.wideView .trgClose {
  width: 40px;
  height: 40px;
  top: 20px;
  left: initial;
  right: 20px;
  transform: translate(0,0);
}


@media (max-width: 1080px) {

.blockBuilds { padding: 0 150px; }
.verTitle > * > * br,
.verText > * > * br { display: none; }

}

@media (max-width: 840px) {

.blockBuilds { padding: 0 135px; }
.verBack { right: 34px; }

.sliderWideview picture img {
  width: 100%;
  height: initial;
}

}


@media (max-width: 640px) {

.blockBuilds { padding: 0 30px; }

.caption h2 > * { line-height: 1.5; }
.caption h2 i {
  font-size: 14px;
  letter-spacing: .03rem;
}
.caption h2 b {
  padding: 15px 0 0 0;
  font-size: 9px;
}
.verNews .caption h2 i { font-size: 13px; }
.verNews .caption h2 time {
  padding: 18px 0 0 0;
  font-size: 10px;
  letter-spacing: .05rem;
}
.caption ul { margin: 40px 0 0 0; }
.caption ul li { font-size: 9px; }
.caption ul > li + li { margin: 5px 0 0 0; }
.caption ul li time:before {
  width: 7px;
  top: 50%;
  transform: translate(-1px,-50%) rotate(0deg);
}
.caption ul li p b { font-size: 9px; }

.verTitle { padding: 40px 0 0; }
.verTitle > * > * {
  line-height: 2;
  letter-spacing: .02rem;
}

.verText { padding: 40px 0 0; }
.verText > * { font-size: 12px; }
.verText > * > p { line-height: 2; }

.verImage { padding: 40px 0 0; }
.verImage.verCross .box > picture + picture { padding: 8px 0 0 0; }

.verImage.verSplit + .verImage.verSplit { padding: 8px 0 0; }
.verImage.verSplit .box picture { width: calc(50% - 4px); }

.verEmbed { padding: 40px 0 0; }

.verList { padding: 40px 0 0; }
.verList .box ul li:before {
  top: 10px;
  left: 3px;
}

.verLink { padding: 40px 0 0; }
.verLink a {
  width: 100%;
  padding: 0 1em 20px 0;
}

.verLine { padding: 40px 0 0; }

.verBack {
  width: 100%;
  height: initial;
  margin: 125px 0 75px;
  text-align: center;
  position: initial;
  top: initial;
  right: initial;
  transform: rotate(0deg);
}
.verBack > * {
  display: inline-flex;
  margin: auto;
}
.verBack em {
  padding: 0 0 0 18px;
  background-color: initial;
  font-size: 10px;
  left: -5px;
}
.verBack em:before {
  width: 8px;
  height: 8px;
  top: 6px;
  left: 0;
  right: initial;
  transform: rotate(0deg);
}

.wideView {}
.sliderWideview .box { padding: 0 0 25px; }
.sliderWideview picture { background-size: 100%; }
.sliderWideview time {
  bottom: 30px;
  font-size: 11px;
}
.slick-prev, .slick-next {
  width: 12px;
  height: 12px;
}
.slick-prev:before { left: 30px; }
.slick-next:before { right: 30px; }
.wideView .trgClose {
  width: 35px;
  height: 35px;
  top: 20px;
  right: 20px;
}


}