@charset "UTF-8";

/* ---------------------------------------------
------------------------------------------------
Member.css
------------------------------------------------
--------------------------------------------- */

/* -------　連名表　------- */

.member_catalogue #header {
  height:100px; /* がたつき防止で入れてみた */
}

.member_catalogue main {
  background-image: url("../img/member_wallpaper.jpg");
  background-repeat: repeat;
  min-height:3500px;
 }

 .member_catalogue article {
  padding-top: 0.1rem;
  margin-right: auto;
  margin-left: auto;
  width:100%;
  max-width: 1000px;
  padding-right: 1.8rem;
  padding-left: 1.8rem;
 }


h2.catalogue_title {
  margin-block-end: 0;
  text-shadow: 2px 2px 6px #fff;
}

.member-cont-line {
  border-color: #6f332a;
}




/* ーーーーー　劇団員一覧　アー写カード表示(member_list)の指定ーーーーー */
.member_list {
	width:100%;
	display: flex;
	 flex-wrap:wrap; 
justify-content: space-around; 
column-gap: 40px;
}



.cell.is-empty {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}


.member_list figure {
	position: relative;
	text-align: center;
	margin-top: 1rem;
  margin-left:0.1rem;
  margin-right:0.1rem;
  margin-bottom: 3rem;
  width:180px;
	height: auto;
	background-color: #F2EFE1;
	box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  filter: saturate(40%); /*　彩度 */
  filter: sepia(70%);/*　セピア */
}


@media screen and (max-width:600px) {
  /*スマホ*/
  .member_catalogue article {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .member_list figure {
  width:42vw;
  filter: sepia(30%);/*　セピア */
  }
  .member_list {
    column-gap: 10px;
  }
}

@media screen and (min-width: 601px) and (max-width: 834px) {
  /*tablet*/
  .member_list figure {
    filter: sepia(30%);/*　セピア */
  }
}

@media screen and (min-width: 601px) and (max-width: 1009px){
  
  .member_list {
    column-gap: 20px;
    justify-content: center; 
  }

  .member_list figure {
    width:20vw;
  }
}

.member_list figure:hover {
	background-color: rgb(158, 121, 92);
  transition-duration: 0.3s;
  filter: sepia(0%);
  color: #fff;
}

.member_list img {
	margin-top: 8%;
	width: 80%;
	height: auto;
}

.member_list figcaption {
	margin-top: 0.3rem;
	text-align: center;
	font-size: 1.1rem;
	padding-bottom: 3%;
  font-weight: bold;
}

.member_list figcaption {
	color: #6f332a;
}














/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
劇団員個別ページの指定
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* @media screen and (min-width: 601px) {

main {position: relative;
  margin-top: 100px;
  top:-100px;

}
} */


.member_container {
  top:100px;

 background-color: #fff;
} 

@media screen and (min-width: 835px){
  .single_member_content {
    background-color:#f2e8df;
  }
  }
  

/* タブレットサイドバー分け (劇団員リストの幅)*/
@media screen and (min-width: 601px) and (max-width: 834px) {
  .member_container {
      display: flex;
   }
  .member_container aside {
    width:180px;
   }
  article.member_information {
    margin-left: 10px;
    flex:1; /* フレックスアイテム片方固定の場合　もう片方はflex:1; にすると良い*/
    background-color: #fff;
   }
  
  }
  
   /* デスクトップサイドバー分け  (劇団員リストの幅)*/
   @media screen and (min-width: 835px){
    main {position: relative;
     
       background-image: url("../img/member_wallpaper.jpg");
      background-repeat: repeat; 
    
    }


  .member_container {
      display: flex;
       box-shadow:1.5px 0 2px 2px  rgba(0, 0, 0, .1);/*pcのみMAIN両脇影つけ*/
   }
  .member_container aside {
    width:200px;
   }
  article.member_information {
    margin-left: 10px;
    flex:1; /* フレックスアイテム片方固定の場合　もう片方はflex:1; にすると良い*/
    min-height: 2120px;
   }
  }

  @media screen and (min-width: 601px) and (max-width: 1009px){
    .member_container aside {
      margin-left: 0.3rem;
    }
  }


/* ----------------------
ページ遷移の時にフェードイン
------------------------- */


@media screen and (min-width: 835px){
.single_member_content {
  background-color:#FDEEEA;
}
}
/* .single_member_content main {
  animation: fadein 3s forwards;
} */
.single_member_content,
.member_catalogue main {
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}







h2.rank_title{ /* 劇団員 */
  margin-block-end: 0;
} 

article.member_information{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: justify;
}

.member_headline .promide img {
  width:100%;
}

.waname {
  font-size: 3rem;
  font-weight: 100;
  letter-spacing: 0.5rem;
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: 110%;
}

.romename {
  font-size: 0.8rem;
  margin-block-start: 0;
  margin-left: 0.1rem;
  letter-spacing: 0.2rem;
}


.member_headline {
  margin-bottom: 3rem;
}

.member_headline .detail{
  line-height: 200%;
  padding-top: 1rem;
  line-height: 1.75rem;
}

.member_headline h4{
  font-weight: 100;

}




@media screen and (min-width: 601px) and (max-width: 834px) {
  .member_headline {
    display: flex;
  }
  .promide {
    flex: 2;
  }
  .member_headline .detail { /* テキストのtabは上揃え */
    flex:3;
    margin-left: 1rem;
    position: relative;
  }
  .waname {
    font-size: 2.5rem;
  }
}

@media screen and (min-width:835px) {
  .member_headline {
    display: flex;
    /*align-items: center; テキストの上下中央に */
  }
  .promide {
    flex: 4;
  }
  .member_headline .detail { /* テキストの上下位置調整 */
    flex:5;
    
    margin-left: 1.5rem;
    padding-right: 2rem;
    position: relative;
  }

}


.member_information table {
  margin-bottom: 3rem;
  border-collapse:separate;
	border-spacing: 0px 0.5em;
}

section.member_chapter_in h3, section.member_chapter_out h3 {
  margin-block-end: 0;
}
section.member_chapter_in hr, section.member_chapter_out hr {
  margin-block-start: 0;
}

section.member_chapter_in table th, section.member_chapter_out table th {
  vertical-align:top;
  width: 0;
  white-space: nowrap;
  height: 2rem;
  padding-left: 0;
  padding-right: 1rem;
  text-align: left;
}

section.member_chapter_in table td, section.member_chapter_out table td {
  vertical-align:top;
}



section.member_chapter_in h2 {
  text-align: left;
  color:#ac1b4e;
  margin-block-end: 0;
}

section.member_chapter_in h2 small {
  font-size: 1rem;
  vertical-align:0.15em;
}



section.member_chapter_out h2 {
  text-align: left;
  color:#00799a;
  margin-block-end: 0;
}

section.member_chapter_out h2 small {
  font-size: 1rem;
  vertical-align:0.15em; 
}


.go_memberlist_but { /* スマホのみ、メンバーリストへボタン */
  padding: 1rem 1.5rem;
  color:#fff;
  background-color: #ac1b4e;
  display: inline-block;
  border-radius: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
  width:100%;
  text-align: center;
  font-size: 1.2rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  filter:drop-shadow(2px 2px 2px #aaa);/* mobile用にボタンに影付け */
}






/* ーーーーーSidebar 劇団員リストの指定  ーーーーー */
aside.member_sideber {
  background-color: #ac1b4e;
  top: 100px;
}



h3.list_header {
  margin-block: 0;
  padding-top: 1rem;
  padding-bottom: 2.5rem;
  background-color: #333;
  height: 3rem;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
}

.memberlist ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  color:#fff;
  background-color: #ac1b4e;
  max-width: 0 auto;
  margin-bottom: 1px;
}

.memberlist li {
  color: #000;
  background-color: #eee;
  border-bottom:1px solid #fff; /* 下端に1pxの線 */
  /* padding-left: 1.5rem; */
  padding-top: 0.5rem ;
  padding-bottom: 0.5rem ;
  letter-spacing: 0.2rem;
  text-align: center;
}

/* li.li_long{
  letter-spacing: 0;
} */

.memberlist li:first-child {
  border-top:5px solid #000; /* リストの一番上端に1pxの線 */
}

.memberlist li a {
  color: #000;
  display: block;
}

.memberlist li:hover {
  background-color: #dabbc5;
  
}

.memberlist li:target { /*　お試し！ リンク先のターゲットにスタイル適用　*/
  background-color: #dabbc5;
  /* display: block; */
}

.memberlist li.ms_current {
    background-color: #d197ab;
}