/* Keyvisual */

.keyvisual { position: relative; }
.keyvisual h1 { font-family: JMBProBo, sans-serif; margin-bottom: 20px; font-size: 7.2rem; line-height: 7.0rem; }
.keyvisual h1.var2 { font-family: JMBProBo, sans-serif; font-size: 6.0rem; line-height: 6.0rem; }
.keyvisual h1.var3 { font-family: Headline, sans-serif; font-size: 9.0rem; line-height: 8.0rem; text-transform: uppercase; -moz-font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01"; }
.keyvisual h1.var4 { font-family: Headline, sans-serif; font-size: 7.2rem; line-height: 6.4rem; text-transform: uppercase; -moz-font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01"; }

.keyvisual figure { position: relative; }

@media only screen and (max-width: 590px) {
	.keyvisual h1 { font-size: 4.3rem; line-height: 3.8rem; }
	.keyvisual h1.var2 { font-size: 4.3rem; line-height: 4.3rem; }
	.keyvisual h1.var3 { font-size: 4.3rem; line-height: 3.8rem; }
	.keyvisual h1.var4 { font-size: 4.3rem; line-height: 3.8rem; }
}

.keyvisual.layout-one { margin: 0 auto 100px; padding-top: 100px; }
.keyvisual.layout-one img { width: 100%; height: auto; }
.keyvisual.layout-one figcaption { margin-bottom: 40px; }
.keyvisual.layout-one .shadow { display: none; }
.keyvisual.layout-one p.subhead { font-size: 3.5rem; line-height: 4rem; }

.keyvisual.layout-two { height: 600px; margin: 0 0 100px 0; overflow: visible; color: white; }
.keyvisual.layout-two .keyvisual-text { z-index: 2; position: absolute; bottom: 70px; left: 50%; margin-left: -566px; width: 748px; }
.keyvisual.layout-two figure { display: block; height: 600px; width: 100%; position: absolute; top: 0; left: 0; }
.keyvisual.layout-two img { object-fit: cover; width: 100%; height: 100%; }
.keyvisual.layout-two figcaption { color: black; text-align: right; width: 100%; padding-right: 20px; }
.keyvisual.layout-two .shadow { position: absolute; width: 100%; height: 600px; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); }
.keyvisual.layout-two p.subhead { font-size: 2.5rem; line-height: 3rem; }

.keyvisual.layout-two--white .keyvisual-text { color: black; }
.keyvisual.layout-two--white .shadow { position: absolute; width: 100%; height: 600px; background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 100%); }


@media only screen and (max-width: 1350px) {
  .keyvisual.layout-two .keyvisual-text { left: 108px; margin-left: 0; }
}

@media only screen and (max-width: 1270px) {
  .keyvisual.layout-two .keyvisual-text { width: 620px; }
}

@media only screen and (max-width: 1080px) {
  .keyvisual.layout-two .keyvisual-text { width: 540px; }
}

@media only screen and (max-width: 960px) {
  .keyvisual.layout-two, .keyvisual.layout-two figure, .keyvisual.layout-two .shadow { height: 525px; }
  .keyvisual.layout-two .keyvisual-text { left: 50%; margin-left: -410px; }
}

@media only screen and (max-width: 880px) {
  .keyvisual.layout-two .keyvisual-text { left: 50%; margin-left: -310px; }
}

@media only screen and (max-width: 670px) {
  .keyvisual.layout-two .keyvisual-text { left: 50%; margin-left: -270px; }
}

@media only screen and (max-width: 590px) {
  .keyvisual.layout-two, .keyvisual.layout-two figure, .keyvisual.layout-two .shadow { height: 450px; }
  .keyvisual.layout-two .keyvisual-text { width: calc(100% - 40px); left: 20px; margin-left: 0; }
}