@charset "UTF-8";
/* CSS Document */

/* =============================

    Modal

============================= */

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

.modaal-close {
  display: none;
}

/* =============================

    area1 top image

============================= */

#area1:before{
  /*背景画像設定*/
  background: url("../images/works_reed.jpg") no-repeat bottom;
  filter: invert(20%);
  background-size: cover;
}


/* =============================

    area2 tab

============================= */

/*tabの形状*/
#tab_area {
	display: flex;
	flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  height: 120px;
  width: 100%;
  padding-left: 20px;
}

#tab_area li {
  margin-right: 50px;
  background-color: rgba(255,255,255,0.3);
}

#tab_area li a{
	display: block;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 3rem;
	padding: 10px 20px;
}

/*liにactiveクラスがついた時の形状*/
#tab_area li.active a{
  border-bottom: 1px solid #777;
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
  opacity: 0.95;
	padding: 50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: block;/*表示*/
  animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.area ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.area ul li a:before {
    content: "";
    display: block;
    height: 0;
    padding-top: 75%;
}

.area ul li a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (max-width: 1280px) {
  #tab_area li {
    margin-right: 30px;
  }  

  #tab_area li a{
    font-size: 2.4rem;
    padding: 5px 10px;
  }  
}

@media (max-width: 768px){ 
  #area2 {
    padding: 50px 20px;
  }
  
  #area2 nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  #tab_area {
    flex-wrap: nowrap;
    width: max-content;
  }
  
  #tab_area li a{
    font-size: 1.8rem;
  }

  /*エリアの表示非表示と形状*/
  .area {
    display: none;/*はじめは非表示*/
    opacity: 0.95;
    padding: 50px 20px;
  } 
}

@media (max-width: 428px) {
  #tab_area li {
    margin-right: 15px;
  }  

  #tab_area li a{
    font-size: 1.6rem;
  }  
}


/* =============================

    area2 tab内

============================= */

.area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.area ul li { 
  width: 24% ; /* 親要素の1/4より小さい値 */
  padding-bottom: 15px;
}

/* 親要素の疑似要素 space-betweenでも最後の行は左寄せにする */
.area ul:after {
  content: "";
  display: block;
  width: 24%; /* 子要素と同じ幅 */
}

.area ul:before { 
  content: ""; 
  display: block; 
  width: 24%; /* 子要素と同じ幅 */
  order: 1; /* アイテムの並び順 */
}

@media (max-width: 768px) {
  .area ul li { 
    width: 33% ; /* 親要素の1/3より小さい値 */
  }

  /* 親要素の疑似要素 space-betweenでも最後の行は左寄せにする */
  .area ul:after {
    width: 33%; /* 子要素と同じ幅 */
  }

  .area ul:before { 
    width: 33%; /* 子要素と同じ幅 */
  }
}

@media (max-width: 428px) {
  .area ul li { 
    width: 49% ; /* 親要素の1/2より小さい値 */
  }

  /* 親要素の疑似要素 space-betweenでも最後の行は左寄せにする */
  .area ul:after {
    width: 49%; /* 子要素と同じ幅 */
  }

  .area ul:before { 
    width: 49%; /* 子要素と同じ幅 */
  }
}


/* =============================

    個別ページ

============================= */

.works-individual {
  padding: 50px;
}

.individual_title {
  color: #777;
  font-family: kazuraki-sp2n, serif;
  font-size: 5vw;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 27px;
}

.works-individual h2 {
  font-family: 'Shippori Mincho','Bitter','Klee One', cursive,'Kaiti SC', sans-serif; 
  color: #777;
  font-size: 3rem;
  margin: 50px 0;
  padding: 2px 0 2px 10px;
  border-left: 6px double #777;
}

.works-individual figure {
  text-align: center;
}

.works-individual figure img {
  width: 75%;
}

.works-individual figure figcaption {
  font-family: 'Kaiti SC', sans-serif;
  color: #777;
  font-size: 1rem;
  padding: 10px 0;
}

.works-individual__description {
  margin: 0 auto;
  padding: 20px;
}

.works-individual__description h3 {
  font-family: 'Shippori Mincho','Bitter','Klee One', cursive,'Kaiti SC', sans-serif; 
  color: #777;
  font-size: 2.4rem;
  padding: 70px 0;
  text-transform: capitalize;
  position: relative;
}

.works-individual__description h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: -35px;
  width: 25px;
  height: 1px;
  content: '';
  background: #777;
}

.works-individual__description p {
  font-size: 1.4rem;
  padding-bottom: 50px;
}

.works-individual__description p img {
  width: 50%;
  padding: 20px 0;
}

.works-individual__description p span {
  font-size: 1rem;
}

.works-individual__description ul {
  font-family: 'Shippori Mincho','Bitter','Klee One', cursive,'Kaiti SC', sans-serif; 
  color: #777;
  font-size: 1.4rem;
}

.works-individual__description ul li {
  padding-bottom: 5px;
}

.works-individual__description a {
  font-family: 'Shippori Mincho','Bitter','Klee One', cursive,'Kaiti SC', sans-serif; 
  font-size: 1.4rem;
}

.works-individual__description__wrapper {
  display: flex;
}

.works-individual__description__wrapper img {
  width: 250px;
  display: inline-block;
  padding-right: 20px;
}

.works-individual__description__site-design {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.site-design-single {
  width: 50%;
  margin: 0 auto;
}

.site-design-pc {
  width: 33%;
}

.site-design-mb {
  width: 20%;
}

.site-design-pc_4 {
  width: 20%;
}

.site-design-mb_4 {
  width: 15%;
}

.works-individual__description__unreleased {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.works-individual__description__unreleased li {
  padding-bottom: 10px;
}


@media (max-width: 768px){
  .works-individual {
    padding: 0 0 100px 0;
    width: 80%;
    margin: 0 auto;
  }

  .individual_title {
    font-size: 2.5rem;
    margin-top: 100px;
  }
  
  .works-individual h2 {
    font-size: 2rem;
  }

  .works-individual__description {
    width: auto;
    margin: 0 auto;
  }

  .works-individual__description h3 {
    font-size: 1.8rem;
    padding: 40px 0;
  }

  .works-individual__description h3:before {
    left: -25px;
    width: 15px;
    height: 1px;
  }

  .works-individual__description p img {
    width: 100%;
  }

  .works-individual__description ul li {
    padding-bottom: 5px;
  }

  .works-individual__description a {
    display: block;
    margin-bottom: 50px;
  }

  .works-individual__description__wrapper {
    display: block;
  }

  .works-individual__description__wrapper img {
    display: block;
    width: 150px;
    padding-right: 0;
  }

  .works-individual__description__unreleased li {
    width: 31%;
  }

}