@charset "UTF-8";

.movie_cover{
  max-width:1000px;
  margin:0 auto;
  position:relative;
}

.movie_cover h2{
  position:absolute;
  bottom: 6%;
  left:6%;
  color:white;
  font-size:3rem;
  z-index:100;
}
@media (max-width: 767px){
  .movie_cover h2{
    font-size:2.2rem;
  }
}

.movie_cover .waku{
  content:"";
  position:absolute;
  top: 49.2%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 90%;
  border:solid 2px white;
  pointer-events: none;
}

.fa{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:1;
  color:white;
  pointer-events: none;
}

.movie_cover::before{
  content:"";
  pointer-events: none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:98%;
  background-color:rgba(0, 0, 0, 0.13);
}
.movie_cover::after{
  content:"";
  pointer-events: none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:98%;
  background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 5px);
}

.modal-video {
  background-color: rgba(0,0,0,0.9);

}


.cotton_logo_area{
  margin:100px auto;
  max-width:600px;
  padding:10px;
  height:390px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.cotton_logo_area img{
/*  width:260px;*/
  margin-right:30px;
}

.cotton_logo_text{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:26px;
  margin-left:30px;
}

.cotton_history{
  width:100%;
  height:500px;
  background-image:url("../image/momen_history.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  position:relative;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

}
.cotton_history_text{
  position:absolute;
  top:15%;
  left:50%;
  height:75%;
  -webkit-transform: translatex( -50%);
  -ms-transform: translatex( -50%);
  transform: translatex( -50%);
  letter-spacing:2px;
  font-weight: 600;
}
.cotton_history_text h2{
  font-size:1.5em;
  color:white;
  margin-left:10px;

}

.vertical_roll{
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

.cotton_inner{
  max-width:1100px;
  /*  padding:5px;*/
  width:100%;
  margin:0 auto;
}

.craftsman_top{
  margin:100px auto;
  height:350px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.craftsman_top_img{
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
  background-image: url("../image/craftsman1.jpg");
  background-size: cover;
  background-position:left center;
}
.craftsman_top h2{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  width:150px;
  font-size:2.1em;
  margin-right: 10px;
  color:#CAA846;
}

.craftsmans{
  width:100%;
  height:0;
  padding-top:100%;
  background-image: url("../image/craftsman2.jpg");
  background-size: cover;
  background-position:left center;
  position:relative;
  margin-bottom:100px;
}
.craftsmans_text{
  position: absolute;
  top: 50%;
  left: 50%;
  height:50%;
  width:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size:1.5em;
  line-height:2.5;
}

.text_onry{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height:280px;
  /*  letter-spacing: 5px;*/
  line-height: 2.2;
  margin-bottom:100px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.text_onry h2, .text_onry p{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.text_onry h2{
  font-size:1.5em;
  margin-left:20px;
  color:#CAA846;
}

.craftsmans_side_img{
  width:100%;
  padding-top:40%;
  margin:0 auto 100px auto;
  background-size: cover;
  background-position:center top;
}
.craftsmans_side_img_1{
  background-image: url("../image/craftsman3.jpg");
}
.craftsmans_side_img_2{
  background-image: url("../image/craftsman4.jpg");
}



/*---------------------------
media Queries 767
-----------------------------*/
@media screen and (max-width: 767px) {
  .cotton_logo_area{
    margin:50px auto;
    height:250px;
  }
  .cotton_logo_area img{
    margin-right:0px;
  }

  /*
  .split_text{
  display:flex;
}
  .split_text p{
  padding-bottom:15px;
}

  */
  .cotton_logo_text{
    font-size:16px;
    margin-left:0px;
    margin-right:20px;
  }

  .cotton_history_text{
    position:absolute;
    top:7%;
    height:83%;
    letter-spacing:0;
    font-size:14px;
  }
  .cotton_history_text h2{
    font-size:1.5em;
    margin-left:8px;
  }

  .craftsman_top{
    height:200px;
    margin:50px auto;
  }

  .craftsman_top h2{
    width:80px;
    font-size:1.25em;
    margin-right: 5px;
  }
  .craftsmans{
    margin-bottom:50px;
  }

  .craftsmans_text{
    font-size:1em;
    line-height:2;
  }

  .text_onry{
    line-height: 1.7;
    margin-bottom:50px;
  }

  .craftsmans_side_img{
    margin-bottom:50px;
  }



}