@charset "UTF-8";

h1 {
  text-align: center;
  padding: 0;
  font-size: 2vw;
}


header {
  width: 100%;
  z-index: 1;
}

main {
  overflow: hidden;
}

.container {
  float: left;
  margin: 0;
  align-items: center;
}

.container > div {
  float: left;
  width: 25%;
  position: relative;
}

span.fs_1_8_vw {
  font-size: 1.8vw;
}

span.fs_1_7_vw {
  font-size: 1.7vw;
}

.container > div > p.description {
  opacity: 1;
  text-shadow: none;
  color: #000;
  font-size: 1.25vw;
  margin: 0 auto;
  width: 80%;
  display: block;
  left: 10%;
  top: 42%;
  text-align: left;
}

.production > div > p.description {
  width: 90%;
  left: 5%;
  top: 37%;
}

.modal-content div > div {
  width: 60%;
}

.modal-content h2 {
  font-size: 1.7vw;
  padding: 3rem 0 0 0;
  margin-bottom: 1rem;
  background-position: left bottom;
}

#works .modal-content > div > div p {
    margin: 6px 0;
}

.modal-content div:nth-of-type(2) {
  display: flex;
}

.modal-content div:nth-of-type(2) img {
  width: 100%;
}

#works .modal-content a {
    font-size: 14px;
}

#works .modal-content > div:nth-of-type(2) a {
  width: 26%;
}

p.works_webUI {
    margin: 2em auto 0 2em;
}

#works .sp_image {
    margin-top: 1em;
}
/* #works .modal-close {
  right: auto;
  position: relative;
  top: auto;
  left: auto;
  height: auto;
  border-radius: 0;
  margin: 2em auto 0;
  width: 6.5vw;
}

#works a.button-link {
  font-size: 1.5vw;
  width: 100%;
  height: 100%;
  padding: 0;
} */


/* box text START */
.container > div > p, .container > div > h1 {
  position: absolute;
  top: 0%;
  left: 0%;
  color: #FFF;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 3vw;
  margin-top: 40%;
  transition-duration: 0.4s;
  font-weight: bold;
}

.container > div.logo > img:nth-of-type(2) {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
}

.container > div > p {
  text-shadow: 2px 2px 5px #333,
  -2px 2px 5px #333,
  2px -2px 5px #333,
  -2px -2px 5px #333;
  opacity: 0;
  font-size: 2vw;
  /* transition-duration: 0.4s; */
}

.container > div:hover > p {
  opacity: 1;
}

.container > div:not(.title_box):hover {
}

/* box text END */

.container div img {
  width: 100%;
  vertical-align: middle;
}

.container div div h1 img.title_box {
  opacity: 1;
}

.imgWrap {
	overflow: hidden;
}


/* box colors START */
/* hover前 */
.container > div.imgWrap.pink::before, .container > div.imgWrap.blue::before, .container > div.imgWrap.green::before, .title_box::before, .container > div.imgWrap.purple::before, .desc_box::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  transition-duration: 0.3s;
}

/* :hoverしたとき */
.container > div.imgWrap.pink:hover::before, .container > div.imgWrap.blue:hover::before, .container > div.imgWrap.green:hover::before, .container > div.imgWrap.purple:hover::before {
  opacity: 0;
}

.title_box::before {
  opacity: 1;
}

/* h1の背景 */
.development > div.title_box::before {
  background-color: pink;
}

.production > div.title_box::before {
  background-color: skyblue;
}
/* h1の背景ここまで */
div.desc_box::before {
  background-color: #dcdee3;
}

/* サムネイルの上に乗せる色たち */
.container > div.imgWrap.pink::before {
  background-color: rgb(242, 156, 159);
}

.container > div.imgWrap.blue::before {
  background-color: rgb(50, 186, 230);
}

.container > div.imgWrap.green::before {
  background-color: rgb(139, 195, 68);
}

.container > div.imgWrap.purple::before {
  background-color: rgb(143, 130, 188);
}
/* サムネイルの上に乗せる色たちここまで */


/* box colors END */

#footer {
  z-index: 1;
}
/* responsive */
@media screen and (max-width: 1024px) {
  #works .modal-content {
    width: 60%;
  }
}
@media screen and (max-width: 600px) {
  .container > div > p.description{
    font-size: 2.25vw;
  }
  .container > div {
    width: 50%;
  }
  .container > div > h1 {
    font-size: 7vw;
  }
  .container > div > p {
    font-size: 4vw;
  }
  .blank {
    display: none;
  }
  span.font_ys {
    font-size: 3.5vw;
  }
  #works .modal-content {
    width: 90%;
  }
  .modal-content h2 {
    font-size: 4vw;
    padding: 2.5rem 0 0 0;
  }
  .modal-content div > div {
    width: 70%;
  }
}

@media screen and (max-width: 580px) {
  #works .modal-content a {
    font-size: 14px;
  }
  .container > div > p.description{
    font-size: 14px;
  }
  .container > div > p.description {
     top: 30%;
  }
  .production > div > p.description {
    top: 20%;
  }
.works_webUI:nth-child(n+2) {
    margin: 0 auto 0 2em;
  }
}

@media screen and (max-width: 360px) {
  .container > div > p.description {
     top: 25%;
  }
  .production > div > p.description {
    top: 12%;
  }
}

@media screen and (max-width: 320px) {
  .production > div > p.description {
    top: 5%;
  }
}

@media screen and (orientation:landscape) and (max-width: 700px) {
  .container > div > p.description {
    font-size: 12px;
    top: 58%;
    left: 5%;
    width: 90%;
  }
  .production > div > p.description {
    left: 5%;
    top: 34%;
  }
  #works .modal-content {
    height: 90%;
  }
  .modal-content h2 {
    font-size: 16px;
    padding-top: 3rem;
  }
}