@charset "utf-8";
/* CSS Document */
#popup-background{
    position:fixed;     /* 位置の固定 */
    top: 0;             /* 表示位置 */
    left: 0;            /* 表示位置 */
    height: 100%;       /* 画面全体に表示 */
    width: 100%;        /* 画面全体に表示 */
    background:#fff;    /* 背景色 */
    opacity: 0.60;      /* 透明度 */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1000;       /* 要素のz座標 */
}
#popup-item{
    position:fixed;     /* 位置の固定 */
    top: 50%;           /* 表示位置(真ん中に表示) */
    left: 50%;          /* 表示位置(真ん中に表示) */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1001;       /* 要素のz座標 */
}
.portraitContent {
  background-color:rgba(255,255,255,0.7);
	margin-top:60px;
	margin-left:auto;
	margin-right:auto;
	padding-top:40px;
	padding-bottom:40px;
	overflow:hidden;
}

.rowPortrait {
	display: grid;
	grid-template-columns: repeat(3, 30%);
	grid-column-gap: 5%;
	grid-row-gap: 50px;
	width: 90%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 60px;
}
.rowPortrait2 {
	display: grid;
	grid-template-columns: repeat(2, 47%);
	grid-column-gap: 6%;
	width: 90%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 60px;
}
.colPortrait,
.colPortrait2 {
  transition: .5s all;  
}
.basePortrait {
  height:330px;
  position: relative;
}
.basePortrait2 {
  height:510px;
  position: relative;
}

.imgPortrait img {
  display: block;
  height: 100%;
  width:auto;
}
.imgPortrait2 img {
  display: block;
  height: 100%;
  width:auto;
}
.imgPortrait {
  position:absolute;
  z-index:10;
  top:0px;
  left:0px;
  width:95%;
  height: 300px;
  transition: .5s all;    
}
.imgPortrait2 {
  position:absolute;
  z-index:10;
  top:0px;
  left:0px;
  width:95%;
  height: 480px;
  transition: .5s all;    
}
.backPortrait {
  position: absolute;
  z-index: 5;
  right: 0px;
  bottom: 0px;
  width:95%;
  height:300px;
  border:solid;
  border-width:10px;
  box-sizing: border-box;
}
.backPortrait2 {
  position: absolute;
  z-index: 5;
  right: 0px;
  bottom: 0px;
  width:90%;
  height:480px;
  border:solid;
  border-width:10px;
  box-sizing: border-box;
}
.colPortrait:nth-of-type(even) .backPortrait,
.colPortrait2:nth-of-type(even) .backPortrait2,
.colPortrait:nth-of-type(even) .basePortrait,
.colPortrait2:nth-of-type(even) .basePortrait2 {
	border-color: #ebeb78;
}
.colPortrait:nth-of-type(odd) .backPortrait,
.colPortrait2:nth-of-type(odd) .backPortrait2,
.colPortrait:nth-of-type(odd) .basePortrait,
.colPortrait2:nth-of-type(odd) .basePortrait2 {
	border-color: #9bc88c;
}
.colPortrait:nth-of-type(even) .titlePortrait,
.colPortrait2:nth-of-type(even) .titlePortrait {
	border-image: linear-gradient(to right, #ebeb78 0%, #9bc88c 100%) 1/0 0 6px;
}
.colPortrait:nth-of-type(odd) .titlePortrait,
.colPortrait2:nth-of-type(odd) .titlePortrait {
	border-image: linear-gradient(to right, #9bc88c 0%, #ebeb78 100%) 1/0 0 6px;
}
.titlePortrait {
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom: 10px;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 6px;
  width:95%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color:#333333;
  letter-spacing: 2px;
}
.titleNo {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  margin-right:10px;
  letter-spacing: 2px;
}

.fontDeepGreen {
  color: #469650;
}
.fontGreen {
  color: #9bc88c;
}
.fontYellow {
  color: #ebeb78;
}
.portraitInfoArea {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width:90%;
  margin-left: auto;
  margin-right:auto;
  align-items:flex-end;
}
.portraitInfoText {
  width:49%;
  transition: .5s all;
}
.portraitInfoImg {
  width:50%;
  transition: .5s all;
}
.portraitInfoImg img{
  width:100%;
  display: block;
  transition: .5s all;
}

.portraitTitleArea {
  width:90%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 60px;
}

.portraitTitleAlfa {
	padding-left:20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size:40px;
  margin-bottom: 5px;
  color:#469650;
  letter-spacing: 2px;
  width:100%;
}
.portraitTitle {
	border-bottom:solid;
	border-bottom-width:4px;
	border-color:#469650;
	width:100%;
	padding-left:20px;
  padding-bottom:15px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size:20px;
  color:#333333;
  letter-spacing: 2px;
}
.newPortrait {
  display:inline-block;
  margin-left:10px;
  background-color: #469650;
  color:#ffffff;
  padding-left:15px;
  padding-right:15px;
  text-align: center;
  line-height: 30px;
}
.commentPortrait {
  font-size:12px;
 }
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@media screen and (max-width: 999px) {
	.portraitContent {
		margin-top:40px;
		padding-top:20px;
		padding-bottom:20px;		
		width:100%;
	}
	.rowPortrait,
	.rowPortrait2 {
		grid-template-columns: repeat(1, 100%);
		grid-column-gap: 0;
		grid-row-gap: 50px;
		margin-bottom: 0px;
	}
  .colPortrait,
  .colPortrait2 {
    width:100%;
    margin-bottom:60px;
  }
  .basePortrait,
  .basePortrait2 {
    position: inherit;
    border:solid;
    height: auto;
    width:100%;
    border:solid;
    border-width:10px;
    box-sizing: border-box;
  }

  .imgPortrait,
  .imgPortrait2 {
    position:inherit;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
    margin-bottom: 20px;
    height: auto;
  }
  .imgPortrait img,
  .imgPortrait2 img {
    height: auto;
    width:100%;
  }

  .backPortrait,
  .backPortrait2 {
    display: none;
  }
  .mobileBr {
    display: block;
  }
  .portraitInfoArea {
    flex-direction: column;
  }
  .portraitInfoText {
    width:100%;
  }
  .portraitInfoImg {
    width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
  }
}
@media screen and (min-width:1000px) and (max-width: 1249px) {

	.portraitContent {
		width:1000px;
	}
  .basePortrait {
    height:280px;
  }
  .imgPortrait {
    height: 250px;
  } 
  .backPortrait {
    height:250px;
   }
  .basePortrait2 {
    height:430px;
  }
  .imgPortrait2 {
    height:400px;
  } 
  .backPortrait2 {
    height:400px;
   }
  
}
@media screen and (min-width:1250px) and (max-width:1599px) {
	.portraitContent {
		width:1200px;
	}

}
@media screen and (min-width:1600px) {	
	.portraitContent {
		width:1200px;
	}
}