@charset "UTF-8";
/* --------------------
   HEADER
-------------------- */
/* mainvisual */
#mv {
  position: relative;
  height: calc(100vh - 80px);
  min-height: 600px;
  margin: 80px 20px 0;
  background: url("../images/index/mv.jpg") no-repeat left top 80px;
  background-size: cover;
  background-attachment: fixed;}
#mv h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 1.8;
  color: #fff;
	font-size: 7vh;
  opacity: 0;
  text-shadow: 0 0 10px rgba(0,0,0,1);
  animation: blurAnime 2s ease 0.5s 1 normal forwards;}
#mv h2::after { display: none;}
@media screen and (max-height: 400px){
	#mv h2 { font-size: 2rem;}}
@media screen and (max-width: 768px){
  #mv { margin: 80px 0 0;background: url("../images/index/mv.jpg") no-repeat left top;background-attachment:scroll;height: calc(80vh - 80px);min-height: 400px;}
	#mv h2 { font-size: 2.2rem;height: 220px;}}
@keyframes blurAnime {
  0% { filter: blur(10px);}
  100% { filter: blur(0);opacity: 1;}}

/* --------------------
   INDEX
-------------------- */
/* about */
#about .photo img { border-radius: 10px;}
@media screen and (min-width: 1080px){
  #about .contents {
    padding: 140px 0 160px;
    display: flex;
    justify-content: space-between;}
  #about .photo { width: 500px;}
  #about .text { width: 500px;}
  #about h2 { margin: 20px 0 30px;}
  #about a { margin-top: 90px;}}
@media screen and (max-width: 1080px){
  #about { padding: 10vw 0;}
  #about .photo img { max-width: 500px; width: 100%;margin-left:auto;margin-right:auto;}
  #about .text { margin-top: 5vw; max-width: 500px;margin-left:auto;margin-right:auto;}
  #about h2 { margin: 2vw 0 20px;}
  #about a { margin: 30px auto 0;}}
@media screen and (max-width: 480px){ #about { padding: 15vw 0;}}

/* works */
#works { background: #F7F7F7;}
#works h1,#works h2 { text-align: center;}
#works .list img { border-radius: 10px;}
#works .list p { padding-top: 10px;}
@media screen and (min-width: 1080px){
  #works { padding: 140px 0 160px;}
  #works h2 { margin: 10px 0 60px;}
  #works .list {
    margin: 0 auto 40px;
    text-align: center;
    display: flex;
    justify-content: space-between;}
  #works .link01 { margin: 90px auto 0;}}
@media screen and (max-width: 1080px){
  #works { padding: 10vw 0;}
  #works h2 { margin: 2vw 0 4vw;}
  #works .list img { max-width: 500px;width: 100%;margin-left:auto;margin-right:auto;}
  #works .list p { margin-bottom: 5vw; text-align: center;}
  #works .w720 { margin-top: 5vw; max-width: 500px;margin-left:auto;margin-right:auto;}
  #works a { margin: 30px auto 0;}}
@media screen and (max-width: 480px){ #works { padding: 15vw 0;}}

/* recruit */
#recruit .box {
  text-align: center;
  padding: 90px 5vw 0;
  border-radius: 10px;
  overflow: hidden;
  min-height: 600px;
  background: url("../images/index/recruit.jpg") no-repeat center center;}
#recruit h2 { margin: 10px 0 0;}
#recruit p { padding: 20px 0 60px;}
#recruit a.link01,#recruit a.link02 { margin: 0 auto 10px;}
@media screen and (min-width: 1080px){
  #recruit { margin: 140px 0 160px;}}
@media screen and (max-width: 1080px){
  #recruit { margin: 10vw 0;}
  #recruit .box { padding: 60px 5vw; min-height: auto;}
  #recruit p { padding: 20px 0 40px;}}
@media screen and (max-width: 480px){ #recruit { margin: 15vw 0;}}