@charset "UTF-8";

/*------------------------------
voice page
-------------------------------*/
/* pageHead */
.pageHead {
  width: 100%;
  position: relative;
  background: #fff;
}
.pageHead .pageHead_bg img {
  width: 100%;
}
.pageHead .title {
  text-align: center;
  letter-spacing: 3px;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -100px;
}
.pageHead .title .txt-en{
  display: block;
  font-size: 122%;
  color: #ea2126;
  font-weight: 500;
}
.pageHead .title .txt-jp{
  font-size: 200%;
  background: #ea2126;
  color: #fff;
  border-radius: 50px;
  padding: 10px 55px;
  font-weight: 400;
  position: relative;
}
.pageHead .title .txt-jp strong{
  font-size: 139%;
  font-weight: 400;
}
.pageHead .title .txt-jp:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -13px;
  left: 44%;
  border-style: solid;
  border-width: 13px 23px 0 14px;
  border-color: #ea2126 transparent transparent transparent;
  transform: rotate(137deg);
  -moz-transform: rotate(137deg);
  -webkit-transform: rotate(137deg);
  -o-transform: rotate(137deg);
  -ms-transform: rotate(137deg);
}
@media screen and (max-width: 767px) {
.pageHead .title {
    position: static;
    margin-top: 20px;
    padding-bottom: 10px;
}
.pageHead .title .txt-en {
    font-size: 100%;
}
.pageHead .title .txt-jp {
    font-size: 130%;
    padding: 7px 35px;
}
.pageHead .title .txt-jp:after {
    bottom: -7px;
    border-width: 7px 12px 0 8px;
}
}

.voice_container {
  padding: 0 0 50px;
  position: relative;
}
.voice_container.lead{
  background: #fff url("../images/lead_ill.png") no-repeat bottom center;
}
.voice_container.voice01{
  background: #e6e6e6 url("../images/voice01_ill.png") no-repeat bottom center;
}
.voice_container.voice02{
  background: #fff url("../images/voice02_ill.png") no-repeat bottom center;
}
.voice_container.voice03{
  background: #e6e6e6 url("../images/voice03_ill.png") no-repeat bottom center;
}
.voice_container.voice04{
  background: #fff url("../images/voice04_ill.png") no-repeat bottom center;
}
.voice_container.voice05{
  background: #e6e6e6 url("../images/voice05_ill.png") no-repeat bottom center;
}
.voice_container .contents_inner_w1200{
  position: relative;
}
.voice_container .contents_inner_w1200:after{
  font-family: "Montserrat", arial, sans-serif;
  position: absolute;
  top:-0.15em;
  font-size: 14rem;
  line-height: 1;
}
.voice_container.voice01 .contents_inner_w1200:after{
  content: "01";
  right: 0;
  color: #fff;
}
.voice_container.voice02 .contents_inner_w1200:after{
  content: "02";
  left: 0;
  color: #e6e6e6;
}
.voice_container.voice03 .contents_inner_w1200:after{
  content: "03";
  right: 0;
  color: #fff;
}
.voice_container.voice04 .contents_inner_w1200:after{
  content: "04";
  left: 0;
  color: #e6e6e6;
}
.voice_container.voice05 .contents_inner_w1200:after{
  content: "05";
  right: 0;
  color: #fff;
}


.voice_container .voice_container_inner{
  max-width: 980px;
  margin: 0 auto;
}
.voice_container .movie_box{
  float: left;
  width: 586px;
  border: 1px solid #ea2126;
  background: #fff;
  box-shadow: 3px 3px 0px 0px #ea2126 ;
  -webkit-box-shadow: 3px 3px 0px 0px #ea2126 ;
  -moz-box-shadow: 3px 3px 0px 0px #ea2126 ;
  -o-box-shadow: 3px 3px 0px 0px #ea2126 ;
  -ms-box-shadow: 3px 3px 0px 0px #ea2126 ;
  position: relative;
}
.voice_container .movie_box:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #ea2126 transparent transparent;
  z-index: 100;
}
.voice_container .movie_box:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 40px;
  border-color: transparent transparent transparent #ea2126;
  z-index: 100;
}
.voice_container .movie_box .inner .play_button:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events:none;
  background: rgba(0,0,0,0.3) url("../images/playbtn.png") center no-repeat;
}
.voice_container .movie_box iframe {
    vertical-align: top;
}
.voice_container .txt_box{
  float: right;
  color: #000;
  width: 350px;
  padding-top: 35px;
}
.voice_container .voice_container_inner h2{
  padding-bottom: 30px;
  color: #ea2126;
}
.voice_container .voice_container_inner h2 span{
  border-bottom: 3px solid #ea2126;
  font-size: 154%;
}
.voice_container .video_thumbnail {
  cursor: pointer;
  text-align: center;
  width: 100%;
  height: auto;
}

.voice_container.voice02 .movie_box,
.voice_container.voice04 .movie_box{
  float: right;
}
.voice_container.voice02 .txt_box,
.voice_container.voice04 .txt_box{
  float: left;
}
@media screen and (max-width: 767px) {
.voice_container {
    padding: 0 0 20px;
}
h2.for-sp {
    padding: 40px 0 20px;
}
.voice_container .movie_box {
    width: 100%;
}
.voice_container .txt_box {
    width: 100%;
    padding-top: 15px;
}
.voice_container .voice_container_inner h2{
  text-align: center;
}
.voice_container .voice_container_inner h2 span{
  border-bottom: 2px solid #ea2126;
  font-size: 235%;
}
.voice_container .contents_inner_w1200:after {
    font-size: 4rem;
}
.voice_container.lead{
  background: #fff url("../images/lead_ill_sp.png") no-repeat bottom center;
  background-size: 100% auto;
}
.voice_container.voice01{
  background: #e6e6e6 url("../images/voice01_ill_sp.png") no-repeat bottom center;
  background-size: 100% auto;
}
.voice_container.voice02{
  background: #fff url("../images/voice02_ill_sp.png") no-repeat bottom center;
  background-size: 100% auto;
}
.voice_container.voice03{
  background: #e6e6e6 url("../images/voice03_ill_sp.png") no-repeat bottom center;
  background-size: 100% auto;
}
.voice_container.voice04{
  background: #fff url("../images/voice04_ill_sp.png") no-repeat bottom center;
  background-size: 100% auto;
}
.voice_container.voice05{
  background: #e6e6e6 url("../images/voice05_ill.png") no-repeat bottom center;
  background-size: 130% auto;
}
}
@media screen and (max-width: 550px) {
.voice_container .voice_container_inner h2 span{
  font-size: 154%;
}
}


.parallax-bg-space {
  position: relative;
  width: 100%;
  height: 50vw;
  max-height: 700px;
  overflow: hidden;
}
.parallax {
  /*position: relative;*/
  width: 100%;
  /*height: 50vw;*/
  height: 100vh;
  overflow: hidden;

  position: fixed;
  top: 0;
  left: 0;
  /*background: #ff0;*/
  background: none;
  z-index: 0;
}
.parallax.off {
  visibility: hidden;
}
.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  position: relative;

  /*top: -180%;*/
  -webkit-transform: trasnslate(0,-100px);
     -moz-transform: trasnslate(0,-100px);
      -ms-transform: trasnslate(0,-100px);
       -o-transform: trasnslate(0,-100px);
          transform: trasnslate(0,-100px);
}
.parallax.bg-01 .parallax-img {
    background-image: url(../images/voice_pc.jpg);
}


@media screen and (max-width: 767px) {
  .parallax.bg-01 .parallax-img {
      background-image: url(../images/voice_sp.jpg);
  }
}