@charset "utf-8";
/***************************************************************************************************
	page_people.css
***************************************************************************************************/

#page_people {
  width: 100%;
  overflow: hidden;
}
/*
*/
#page_people .blk_1 {
  width: 100%;
}
/*
*/
#page_people .blk_2 {
  width: 100%;
  max-width: var(--max_wid_1);
  margin:auto;
  padding: 0 0 100px 0;
}
/*
*/
#page_people .rep_1 {
  width: 100%;
  padding:100px 0 0 0;
  background-color: #ffffff;
}
#page_people .rep_1:nth-of-type(even)::before {
	position: absolute;
	display: block;
	content: '';
	left:50%;
	top:143px;
  width:100vw;
  height: calc(100% - 143px);
  translate:-50% 0;
	background-color: #efefef;
}
/*  */
#page_people .rep_1 .panch_t {
  top:-80px;
}
#page_people .rep_1 .panch_b {
  top:100%;
}
/*  */
#page_people .rep_1_1 {
  width: 100%;
  padding: var(--padding_3);
  padding-bottom: 80px;
}
/*  */
#page_people .rep_1_2 {
  width: 100%;
  padding: var(--padding_3);
  padding-bottom: 40px;
}
#page_people .tgt_nm_psa .rep_1_2 {
  opacity:0;
  translate:0 40px;
}
#page_people .tgt_nm_psa.psa_show .rep_1_2 {
  animation:rep_1_2_kf_1 .6s ease-out .1s 1 normal forwards;
}
@keyframes rep_1_2_kf_1 {
  100% {opacity:1; translate:0 0;}
}
#page_people.show_typ_2 .rep_1.tgt_nm_psa:nth-of-type(1) .rep_1_2 {
  opacity:1;
  translate:0 0;
}
#page_people.show_typ_2 .rep_1.tgt_nm_psa.psa_show:nth-of-type(1) .rep_1_2 {
  animation:none;
}
#page_people .rep_1_2 > ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
#page_people .rep_1_2 > ul > li {
  display: block;
  width: 32%;
  overflow: hidden;
}
#page_people .rep_1_2 > ul > li div {
  width: 100%;
}
#page_people .rep_1_2 > ul > li div a {
  display: block;
  width: 100%;
}
#page_people .rep_1_2 > ul > li div a > p {
  width: 100%;
  padding:100% 0 0 0;
  order:1;
}
#page_people .rep_1_2 > ul > li div a > p img {
  position:absolute;
  width:100%;
  height:100%;
  left:50%;
  top:50%;
  translate: -50% -50%;
  object-fit: cover;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 10%, rgba(0, 0, 0, 0) 40%);
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span {
  position:absolute;
  width:calc(100% - 34px);
  left:17px;
  top:100%;
  display: table;
  translate:0 -100%;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span {
  display: table-row;
  width:100%;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span > span {
  display: table-cell;
  text-align: left;
  vertical-align: top;
  font-size: min(1.1vw, 12px);
  line-height: 1.1;
  color:#ffffff;
  font-weight: 500;
  font-family: "pragmatica-extended",sans-serif; 
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(1) > span {
  height: 99%;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(1) > span:nth-of-type(1),
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(2) > span:nth-of-type(1) {
  width:1%;
  white-space: nowrap;
  padding-right: 5px;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(2) > span {
  padding-top:4px;
  padding-bottom:15px;
}
#page_people .rep_1_2 > ul > li div a > div {
  width: 100%;
  padding:0 0 35px 0;
}
#page_people .rep_1_2 > ul > li div a > div::before {
  position: absolute;
  display: block;
  content:'';
  left:0;
  top:-1px;
  width:100%;
  height: calc(100% + 2px);
  background-color:#000000;
  opacity:0;
  scale:0 1;
  transform-origin: 0 0;
  transition: scale .2s ease-out 0s, opacity 0s .2s;
}
#page_people .rep_1_2 > ul > li div a.nm_hover > div::before {
  opacity:1;
  scale:1 1;
  transition: scale .4s ease-out 0s, opacity 0s 0s;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1) {
  width: 100%;
  font-size: min(1.4vw, 16px);
  line-height: 1.25;
  font-weight: 700;
  padding:30px calc(5% + 40px) 0 5%;
  transition: color .2s ease-out 0s;
  word-break: keep-all;
  word-wrap: break-word;
}
#page_people .rep_1_2 > ul > li div a.nm_hover > div p:nth-of-type(1) {
  color:#ffffff;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::before,
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::after {
  position: absolute;
  display: block;
  content:'';
  left:95%;
  top:100%;
  width:32px;
  height: 32px;
  translate:-100% -50%;
	background-image: url('../images/btn_ill_01.svg');
	background-position: 0 50%;
	background-size: 100% auto;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::after {
	background-image: url('../images/btn_ill_01_02.svg');
  opacity:0;
  transition: opacity .2s ease-out 0s;
}
#page_people .rep_1_2 > ul > li div a.nm_hover > div p:nth-of-type(1)::after {
  opacity:1;
  transition: opacity .4s ease-out 0s;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(2) {
  width: 100%;
  order:3;
  font-size: min(2.2vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  padding:15px calc(5% + 40px) 0 5%;
  transition: color .2s ease-out 0s;
}
#page_people .rep_1_2 > ul > li div a.nm_hover > div p:nth-of-type(2) {
  color:#ffffff;
}
#page_people .rep_1_2 > ul > li div a > div > ul {
  display: block;
  list-style: none;
  padding:15px 5% 0 5%;
  font-size: 0;
}
#page_people .rep_1_2 > ul > li div a > div > ul > li {
  display:inline-block;
  font-size: min(1.2vw, 14px);
  color:#ffffff;
  line-height: 1;
  padding:5px 8px 6px 8px;
  background-color: #000000;
  margin:auto 8px 8px auto;
  transition: color .2s ease-out 0s, background-color .2s ease-out 0s;
}
#page_people .rep_1_2 > ul > li div a.nm_hover > div > ul > li {
  color:#000000;
  background-color: #ffffff;
}
/*
*/
.shade {
  position: fixed;
  left:0;
  top:0;
  width:100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000001;
  background-color: #ffffff;
  transform-origin: 0 0;
  animation:shade_kf_1 .6s ease-out .1s 1 normal forwards;
}
@keyframes shade_kf_1 {
  100% { scale: 1 0;}
}
.shade.start_disable {
  animation:none;
  scale: 1 0;
  display: none;
}
.shade.show {
  transform-origin: 0 100%;
  animation:shade_kf_2 .6s ease-in-out 0s 1 normal both;
}
@keyframes shade_kf_2 {
  0% { scale: 1 0;}
  100% { scale: 1 1;}
}

/***************************************************************************************************
  responsive
***************************************************************************************************/

@media screen and (max-width: 1000px) {
/*
*/
#page_people {
  width: 100%;
  overflow: hidden;
}
/*
*/
#page_people .blk_2 {
  max-width:none;
  padding: 40px 0 0 0;
}
/*
*/
#page_people .rep_1 {
  padding:40px 0 40px 0;
}
#page_people .rep_1:nth-of-type(even)::before {
	top:70px;
  height: calc(100% - 70px);
}
/*  */
#page_people .rep_1_1 {
  padding: var(--padding_1_sp);
  padding-bottom: 50px;
}
/*  */
#page_people .rep_1_2 {
  padding: var(--padding_1_sp);
}
#page_people .rep_1_2 > ul > li div a > div {
  padding:0 0 25px 0;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1) {
  font-size: 12px;
  padding:15px calc(5% + 30px) 0 5%;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::before,
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::after {
  width:20px;
  height: 20px;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(2) {
  font-size: 18px;
  padding:5px calc(5% + 30px) 0 5%;
}
#page_people .rep_1_2 > ul > li div a > div > ul {
  padding:7px 5% 0 5%;
}
#page_people .rep_1_2 > ul > li div a > div > ul > li {
  font-size: 11px;
  padding:4px 6px 5px 6px;
  margin:auto 6px 6px auto;
}
/*  */
#page_people .gsty_tit_2 > span:nth-of-type(1) {
  width:90%;
}
/*  */
#page_people .rep_1 .panch_t {
  top:-60px;
}
#page_people .rep_1 .panch_b {
  top:100%;
}
/*  */
}
@media screen and (max-width: 800px) {
/*
*/
#page_people .rep_1_2 > ul {
  width: 100%;
  max-width: 540px;
  margin: auto;
}
#page_people .rep_1_2 > ul > li {
  width: 48%;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text {
  transform-origin: 0 0;
  scale: .5;
  width:200%;
  height:200%;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span {
  width:calc(100% - 40px);
  left:20px;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span > span {
  font-size: 11px;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1) {
  font-size: 12px;
  padding:15px calc(5% + 25px) 0 5%;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::before,
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(1)::after {
  width:14px;
  height: 14px;
}
#page_people .rep_1_2 > ul > li div a > div p:nth-of-type(2) {
  font-size: 16px;
  padding:5px calc(5% + 25px) 0 5%;
}

#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(1) > span:nth-of-type(1),
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(2) > span:nth-of-type(1) {
  padding-right: 7px;
}
#page_people .rep_1_2 > ul > li div a > p .thumb_text > span > span:nth-of-type(2) > span {
  padding-top:5px;
  padding-bottom:20px;
}
#page_people .rep_1_2 > ul > li div a > div > ul > li {
  font-size: clamp(8px, 2vw, 12px);
  padding:4px 4px 5px 4px;
  margin:auto 5px 5px auto;
}


}