@charset "utf-8";
/* -----------------------------------------------
	* 멤버란 디자인 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/


/****************************************************
	신청자 목록 레이아웃
****************************************************/

.ready-member-list {display:block; position:relative; overflow:hidden;}
.ready-member-list li {float:left; width:50%; margin-bottom:8px;}
.ready-member-list li.empty {width:100%; line-height:300px; text-align:center;}
.ready-member-list li .item {position:relative; padding:10px; margin:0 5px; }
.ready-member-list li .ui-thumb {display:block; position:absolute; top:10px; left:10px; width:80px; height:80px; overflow:hidden; box-sizing:border-box;}
.ready-member-list li .ui-thumb span {display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; font-size:11px; line-height:96px; opacity:1;}
.ready-member-list li .ui-thumb span.ing {}
.ready-member-list li .ui-thumb span.com {display:none;}
.ready-member-list li .ui-thumb a:hover span {opacity:0;}

.ready-member-list li .ui-profile {display:block; position:relative; margin-left:95px; min-height:85px;}
.ready-member-list li .ui-profile i {display:block; position:absolute; top:0; left:0; width:18px;}
.ready-member-list li .ui-profile .name {padding:5px 0;}
.ready-member-list li .ui-profile em {display:block; font-style:normal; font-size:11px;}
.ready-member-list li .ui-profile strong {font-size:14px;}
.ready-member-list li .ui-profile span {display:block; padding:3px 0; font-size:11px;}
.ready-member-list li .ui-profile span.owner {text-align:right; margin-top:5px; padding-top:5px;}

/* 반응형 */
@media all and (max-width:1024px) {
	#submenu li.menu-first {display:block; text-align:center;}
}
@media all and (max-width:640px) {
	.ready-member-list li {width:100%;}
}


/****************************************************
	멤버 목록 레이아웃
****************************************************/

.memberWrap {display:table; width:100%;}
.memberWrap > .member-box {display:table-cell; text-align:center; vertical-align:top;}
.member-list {text-align:center;}
.member-list li {display:inline-block; vertical-align:top; margin:5px;}
.member-list .item {display:block; position:relative; padding:0; background:url('../img/member/card-frame.png'); border-radius:8px; overflow:hidden;}
.member-list .item-color {display:block; position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0; mix-blend-mode: color; filter: grayscale(1); transition:0.5s;}
.member-list li:hover .item-color{filter: grayscale(0);}
.member-list .ui-thumb {position:relative;}
.member-list .ui-profile-outer {position: absolute; left: 0; right: 0; bottom: 0; width: 100%; min-height: 120px; clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%); transform: translateY(80%);}
.member-list li:hover .ui-profile-outer {transform: translateY(0);}
.member-list .ui-profile {position:absolute; left:0; right:0; bottom:0; padding:16px 8px 8px; text-align:center;  opacity: 1; background: linear-gradient(135deg, #555 25%, transparent 25%), linear-gradient(225deg, #555 25%, transparent 25%), linear-gradient(315deg, #555 25%, transparent 25%), linear-gradient(45deg, #555 25%, transparent 25%); background-size: 2.5em 2.5em; background-color:#606060; min-height:88px; clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%); transform: translateY(20%); transition:all 0.5s;}
.member-list li:hover .ui-profile{transform: translateY(0);}
.member-list .ui-profile * {opacity:0; transition:0.5s;}
.member-list li:hover .ui-profile * {opacity:1}
.member-list .ui-profile strong {font-family:'KOHIBaeumOTF'; color:white; font-size:32px; line-height:100%; word-break: keep-all;}
.member-list a.item-color {/*mix-blend-mode: overlay;*/ z-index:1; filter: grayscale(0);}
.member-list .ui-catchphrase {color:white; font-family:'PyeongChang-Bold'; mix-blend-mode: soft-light; margin-bottom: 8px;}
.member-list .ui-detail {}
.member-list .ui-detail span {font-family:'Pretendard JP Variable'; border-radius:8px; padding:1px 16px; margin:0 2px; font-size: 10px; background: rgba(255, 255, 255, .7);}

@media all and (max-width:800px) {
	.memberWrap,
	.memberWrap > .member-box {display:block;}
}


/****************************************************
	멤버 프로필 아우터
****************************************************/
label.page {cursor:initial;}
.one-page {width:100vw; height:100vh; position: relative;}

#page-nav {position:fixed;z-index: 99;top: 50%;left: 20px;transform: translateY(-50%);}
#page-nav input {height: 0; margin: 4px 0;}
#page-nav input:before {content:'';transform: rotate(45deg);width: 8px;height: 8px;display: block; cursor:pointer;}
#page-nav input:checked:before {background:black;}

.close-button {position:fixed; z-index:999; width:36px; right:4px; top:4px;}

.profile-btn {padding: 2px 4px;border-radius: 20px;cursor: pointer;display: inline-block;margin: 2px 0; font-weight:700; font-size: 14px; transition:0.1s; background:white;}
.profile-btn span:before, .profile-btn span:after {content:'✦'; font-size:10px; font-weight:normal; margin:0 4px;}

#profile-nav{position:fixed; bottom:20px; left:20px; z-index:9; width:120px;}

/****************************************************
	멤버 프로필 레이아웃
****************************************************/

#character_profile {position:relative;}

#character_profile .profile-area {margin:0 360px; padding: 25vh 0 0;}
#character_profile .profile-area h1 {font-weight:900; font-size:84px; line-height:84px; margin:8px 0 16px;}
#character_profile .profile-area h2 {font-weight:500; font-size:24px; line-height:24px;}
#character_profile .profile-area h3 {font-weight:400; font-size:20px; line-height:20px; color:white; padding: 8px 28px; border-radius: 40px;}
#character_profile .profile-form {display: grid; grid-template-columns: repeat(2, 200px);gap: 8px 0; margin: 56px 0;}
#character_profile .profile-form span:nth-child(4n+1),#character_profile .profile-form span:nth-child(4n+2) {color:white; font-size:14px; display:inline-block; width:60px; padding:2px 16px; font-weight:bold;}
#character_profile .profile-form span:nth-child(4n+3),#character_profile .profile-form span:nth-child(4n+4) {font-weight:900; font-size:18px; color:#424445; padding:2px 16px; margin-bottom: 16px;}

#bakground-frame {position: absolute; left: 0; top: 0;  width: 100vw;  height: 320px; clip-path: polygon(0 0, 0% 100%, 65% 0);}
#bakground-frame2 {position: absolute; left: 0; top: 0; width: 100vw; height: 340px; clip-path: polygon(0 0, 0% 100%, 50% 0);}
#bakground-frame2 img {width:190px; mix-blend-mode: soft-light; margin:36px; filter: invert(1);}

#character_profile .pokemon-area {margin: 0 360px; display: grid; grid-template-columns: repeat(3, 120px);  gap: 6px 4px;}
#character_profile .pokemon-area li {width:116px; height:116px; display: inline-block; position:relative; border-radius: 50%; border: 2px solid black; overflow: hidden; background:white;}
#character_profile .pokemon-area li:before {content:'';background:url("../img/member/round.svg");position:absolute;width: 70%;height: 70%;top: 50%;left: 50%;right:0;bottom:0;opacity: 0.07;transform: translate(-50%, -50%);}
#character_profile .pokemon-area li .pkm-thumb {position:relative;}
#character_profile .pokemon-area li .pkm-thumb img{max-width:initial; transform: translateY(-10px);}

#profile-info {display:none; position:absolute; width:400px; background:white; padding:40px 20px 20px; border:1px solid black; font-size:13px; z-index:9; left:360px; transform:translateX(+50%); box-shadow:4px 2px 9px -2px rgba(28,28,28,0.59); -webkit-box-shadow:4px 2px 9px -2px rgba(28,28,28,0.59); -moz-box-shadow:4px 2px 9px -2px rgba(28,28,28,0.59);}
#profile-info a {color:#424445; cursor:pointer; position: absolute; right: 20px; top: 20px;}
#profile-info.on {display:block;}
.open-info {cursor:pointer; font-size:16px; line-height:initial; color:#424445; font-weight:500; display:inline-block; border:1px solid #424445; border-radius:100%; text-align:center; padding:0px 7px;}


/****************************************************
	비주얼 영역
****************************************************/
#character_profile .visual-area {position:absolute; right:0; top:0; width: 50vw; height: 100vh;}
#character_profile #character_body {position:relative; z-index:0; display: flex; align-items: center; height: 100vh;}
#character_profile #character_body img {display:block; max-height:100vh; max-width:initial;}
#character_profile .visual-bak {position:absolute; right:0; top:0; height:100vh; width:100%; background-attachment:fixed; background-position:center top; clip-path:polygon(45% 0, 100% 0%, 55% 100%, 0% 100%); filter:grayscale(1); opacity:.6;}
#character_profile .visual-area #character-body-nav {position: absolute; right: 60px; bottom: 60px;}
#character_profile .visual-area #character-closet {position:absolute; bottom:20px; right:160px; opacity:0; transform:translateX(calc(100% + 160px));}
#character_profile .visual-area #character-closet.on {transform:translateX(0); opacity:1;}
#character_profile .visual-area #character-closet li {display:inline-block; margin:0 2px; background: linear-gradient(to top, white, transparent);line-height: initial; font-weight: 700;}
#character_profile .visual-area #character-closet .thumb {width:60px; height:60px; display:inline-block; overflow:hidden; position:relative; border-radius: 8px; background: white;}
#character_profile .visual-area #character-closet .thumb img {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); max-width:500%;}

/****************************************************
	포켓몬 영역
****************************************************/
#bakground-frame3 {width:532px;height:532px;right:0;top:50%;position:absolute;filter: contrast(10);background: white;transform: translate(+45%, -50%);/* clip-path: circle(50%); */}
#bakground-frame3:after{
    content: '';
    position: absolute;
    inset: 0;
    mask-image: radial-gradient(rgb(0 0 0) 00%, rgb(0 0 0 / 0.5) 100%);
    --bgSize: 1.5rem;
    --bgPosition: calc(var(--bgSize) / 2);
    background: linear-gradient(to left, #666, #fff), radial-gradient(closest-side, #555, #fff) 0 / var(--bgPosition) var(--bgPosition) space;
    background-position: 0 0, var(--bgPosition) var(--bgPosition);
    background-blend-mode: multiply;
    }

#bakground-frame4 {
	width:531px;height:532px;right:0;top:50%;
	transform: translate(+45%, -50%);
    z-index: 1;
    position: absolute;
    mix-blend-mode: screen;}

#character_pokemon {text-align:center;padding: 32px;color:#2a2a2a;margin:0 auto;position: relative;z-index: 1;}
#character_pokemon h1 {padding:12px 0 16px; font-weight:900; font-size:32px; margin-bottom:8px;}
#character_pokemon .pokemon-list {display:inline-grid; grid-template-columns:repeat(3,300px); gap:12px 80px;}
#character_pokemon .pokemon-list .pokemon-card {border:2px solid #e9e9e9; display:none; flex-direction:column; border-radius:12px; overflow: hidden; background:#fff; cursor:pointer; box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);-webkit-box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);-moz-box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);}
#character_pokemon .pokemon-list .pokemon-card.on {display:flex; animation:flip 0.3s;}
#character_pokemon .pokemon-list .pokemon-card .pokemon-pic {height:240px; overflow:hidden; position:relative; background:#fff;}
#character_pokemon .pokemon-list .pokemon-profile {background:#1e2022; color:#fff; position:relative; padding:16px 18px;}
#character_pokemon .pokemon-list .pokemon-sex {position: absolute; left: 8px; bottom: 8px;}

#character_pokemon .pokemon-list .pokemon-effect-list {display:grid; grid-template-columns:repeat(2,auto); gap:4px;}
#character_pokemon .pokemon-list .pokemon-effect {background:#fff; color:#1e2022; padding:0px 28px; width:72px; height:40px; border-radius:4px; font-size:14px; font-weight:600; display: flex; align-items: center; justify-content: center;}
#character_pokemon .pokemon-list .poekmon-info {display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;}
#character_pokemon .pokemon-list .poekmon-info h2 {font-size: 24px;}
#character_pokemon .pokemon-list .poekmon-info aside { display: flex; flex-direction: column; align-items: flex-end;}
#character_pokemon .pokemon-list .poekmon-info aside .personality {opacity:.7; padding:0 4px;}
#character_pokemon .pokemon-list .poekmon-info aside .ability {font-weight:600;background:rgba(0,0,0,.2);padding: 0 4px;border-radius: 4px;}

#character_pokemon .pokemon-list .pokemon-card-bak {background:#1e2022; color:#fff; border-radius:12px; overflow: hidden; padding:32px 16px; text-align:left; height:332px; border:2px solid #1e2022; display:none; cursor:pointer; box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);-webkit-box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);-moz-box-shadow: 0px 0px 7px 3px rgba(57,57,57,0.1);}
#character_pokemon .pokemon-list .pokemon-card-bak.on {display:block; animation:flip 0.5s;}
#character_pokemon .pokemon-list .pokemon-card-bak .pokemon-bak-info {}
#character_pokemon .pokemon-list .pokemon-card-bak h2 {font-size:24px; font-weight:800; line-height:24px; padding:0 8px;}
#character_pokemon .pokemon-list .pokemon-card-bak .pokemon-bak-info {margin:8px 0;}
#character_pokemon .pokemon-list .pokemon-card-bak .pokemon-bak-info span + span:before {content:' / ';}
#character_pokemon .pokemon-list .pokemon-card-bak .pokemon-bak-detail {padding:0 8px;}
#character_pokemon .pokemon-list .pokemon-ball {display: inline-block; width: 24px; position: relative;}
#character_pokemon .pokemon-list .pokemon-ball img {max-width: initial; transform: translateX(-4px);}

@keyframes flip {  from{ transform: rotateY(180deg); opacity:0; } to {transform: rotateY(0deg); opacity:1;}}

/****************************************************
	관계란 스타일
****************************************************/
#character_relationship {text-align:center;padding: 32px;color:#2a2a2a;margin:0 auto;position: relative;z-index: 1;background:#f9f9f9;height: calc(100vh - 64px);}
#character_relationship h1 {padding:12px 0 16px; font-weight:900; font-size:32px; margin-bottom:8px;}
#character_relationship .relationship-list {display: inline-grid; grid-template-columns: repeat(2, 520px); gap: 8px 28px;}
#character_relationship .relationship-list .relationship-card {display: grid;grid-template-columns: 172px auto;gap: 16px;border-radius: 16px;border: 1px solid #cdcdcd;padding: 16px 12px;background:#fff; transition:0.1s;     box-shadow: 0px 0px 12px 3px rgba(120, 120, 120, 0.1); -webkit-box-shadow: 0px 0px 12px 3px rgba(120, 120, 120, 0.1); -moz-box-shadow: 0px 0px 12px 3px rgba(120, 120, 120, 0.1);}
#character_relationship .relationship-list .relationship-card-outer {cursor:pointer; display:none;}
#character_relationship .relationship-list .relationship-card-outer.open {grid-column:1 / 3;}
#character_relationship .relationship-list .relation-thumb { width: 172px; height: 212px; overflow: hidden; background: #f6f6f6;}
#character_relationship .relationship-list .relation-info {text-align:left;}
#character_relationship .relationship-list .relation-info h2{font-weight: 900; font-size: 20px; color: #2a2a2a;}
#character_relationship .relationship-list .relation-info h3 {color: #7a7a7a;font-weight: 500;font-size: 16px; margin: 8px 0;}
#character_relationship .relationship-list .relation-memo {color: #7a7a7a;padding: 8px 0;font-weight: 300;font-size: 14px;max-height: 136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 8;-webkit-box-orient: vertical;}
#character_relationship .relationship-pagination {margin-top:16px;}
#character_relationship .relationship-empty { grid-column: 1 / 3; margin: 30vh;}
.pagination {background: white; padding: 2px 8px; border-radius:8px;}


/****************************************************
	인벤토리 스타일
****************************************************/

.inventory-list {display:block; position:relative; overflow:hidden;}
.inventory-list li {display:block; float:left; padding:5px;}
.inventory-list a {display:block; position:relative; width:40px; height:40px; overflow:hidden;}
.inventory-list a img {display:block; position:relative; margin:0 auto;}
.inventory-list a i {display:block; position:absolute; right:1px; bottom:1px; background:rgba(0,0,0,.5); min-width:15px; height:15px; line-height:15px; color:#fff; font-size:10px; font-weight:800; padding:0 1px; text-align:center; z-index:2; box-sizing:border-box; border:none !important;}
.inventory-list a i.present:before {content:"\e99f"; font-family:'icon'; font-weight:400;}

.title-list {display:block; position:relative; padding:20px 0;}
.title-list p {padding:5px;}
.title-list .item {display:inline-block; min-width:25%; padding: 5px; box-sizing:border-box; text-align:left; vertical-align:middle;}


/******************************************
	관계란 스타일
*******************************************/

.relation-member-list				{ position: relative; }
.relation-member-list > li			{ position:relative; padding-left: 90px; min-height:120px; margin-bottom: 20px; }
.relation-member-list .ui-thumb		{ position: absolute; top: 0; left: 0; width: 80px; overflow: hidden; }
.relation-member-list .rm-name		{ font-size: 14px; font-weight: 800; padding-right: 150px; padding-left: 10px; }

.relation-member-list .rm-like-style				{ position: absolute; right: 0; top: 0;width: 80px; }
.relation-member-list .rm-like-style i				{ display: block; width: 13px; height: 15px; position: relative; float: left; margin: 0 1px;}
.relation-member-list .rm-like-style i:before		{ content: "\e9da"; font-family: 'icon'; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }
.relation-member-list .memo			{ font-family: 'Dotum'; padding:10px; margin: 5px 0; line-height: 1.2em; min-height: 30px; }

.relation-member-list ol			{ display: block; position: relative; clear: both; text-align: right;padding-right: 10px; }
.relation-member-list ol li					{ display: inline-block; }
.relation-member-list ol li a.btn-log		{ display: block; position: relative; width: 20px; height: 20px; margin: 0 auto; }
.relation-member-list ol li a.btn-log:before	{ content: "\e925"; font-family: 'icon'; font-size: 15px; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }

.relation-member-list .modify-box						{ display: none; }
.relation-member-list .state-modify						{ }
.relation-member-list .state-modify .rm-like-style,
.relation-member-list .state-modify .memo .ori-content,
.relation-member-list .state-modify ol					{ display: none; }
.relation-member-list .state-modify .modify-box			{ display: block; }

@media all and (max-width:1280px) {
#character_profile .profile-area, #character_profile .pokemon-area {margin:0 220px;}
#bakground-frame {height:200px;}
#bakground-frame2 {height: 240px;}
#bakground-frame2 img {width:160px; margin:20px;}
#character_profile .visual-area #character-body-nav {right:40px; bottom:40px;}
#character_profile .pokemon-area li {width:92px; height:92px;}
#character_profile .pokemon-area li .pkm-thumb img {max-width:100%;}
#character_profile .profile-form {margin:28px 0 16px;}
#character_profile .profile-area h1 {font-size:72px; line-height:72px;}
#character_profile .pokemon-area { grid-template-columns: repeat(3, 100px);}
#character_profile .profile-area {padding:22vh 0 0;}
#character_profile .profile-area h3 {font-size:16px; line-height:16px; padding: 8px 20px;}

#character_pokemon {padding:16px;}
#character_pokemon h1 {padding: 12px 0 12px; font-size: 28px;}
#character_pokemon .pokemon-list {grid-template-columns:repeat(3,200px); gap:8px 40px;}
#character_pokemon .pokemon-list .pokemon-effect {width:52px; font-size: 12px; height: 32px; padding:0 16px;}
#character_pokemon .pokemon-list .pokemon-card .pokemon-pic {height:172px;}
#character_pokemon .pokemon-list .pokemon-card-bak {height: 256px;padding: 20px 12px;}
#character_pokemon .pokemon-list .pokemon-profile {padding: 8px 12px;}
#character_pokemon .pokemon-list .poekmon-info h2{font-size:16px;}
#character_pokemon .pokemon-list .pokemon-card-bak h2 {font-size:20px; line-height:20px;}

#character_relationship {padding:16px;}
#character_relationship h1{padding: 12px 0 12px; font-size: 28px;}
#character_relationship .relationship-list .relation-thumb { width: 142px;height: 160px;}
#character_relationship .relationship-list .relationship-card {grid-template-columns: 160px auto; padding:12px;}
#character_relationship .relationship-list .relation-memo { -webkit-line-clamp: 5;}
}

@media all and (max-width:1024px) {
#character_profile .profile-area, #character_profile .pokemon-area {position:absolute; margin:0; z-index:9;}
#character-body-nav {display:none;}
#bakground-frame2 img {width: 120px; margin:8px;}
#bakground-frame{clip-path: polygon(0 0, 0% 100%, 100% 0); height: 20vh;}
#bakground-frame2{clip-path: polygon(0 0, 0% 100%, 80% 0); height: 25vh;}
#character_profile .visual-area {position: relative; width:100vw;}
#character_profile .profile-area {padding: 0;bottom: 160px; left: 20px; z-index: 10;}
#character_profile .profile-area h2 {font-size: 14px;     line-height: 14px;}
#character_profile .profile-area h1 {font-size: 40px; line-height: 40px;}
.open-info {font-size: 11px; padding: 0px 5px; background: white;}
#character_profile .profile-area h3 {font-size: 13px; line-height: 13px; padding: 6px 12px;}
#character_profile .profile-form {margin: 20px 0 12px;}
#character_profile .profile-form span:nth-child(4n+1), #character_profile .profile-form span:nth-child(4n+2) { font-size: 12px;   padding: 2px 16px;}
#character_profile .profile-form span:nth-child(4n+3), #character_profile .profile-form span:nth-child(4n+4) {    font-size: 14px;     padding: 2px 12px;    margin-bottom: 12px;}

#character_profile .pokemon-area {left:20px; bottom:20px;grid-template-columns: repeat(3, 76px);}
#character_profile .pokemon-area li {width: 72px;height: 72px;border: 1px solid black;}

#character_profile #character_body img {max-width:100%;}

#profile-info {width: 240px; font-size: 12px; padding: 36px 12px 12px;  left: 0; position:fixed; z-index:99; top:20px;}
#profile-info a {right:4px; top:4px;}
#profile-nav {left:initial; right:12px;}

#character_pokemon {padding:8px 16px;}
#character_pokemon h1, #character_relationship h1 {padding: 0 0 8px;  font-size: 20px; margin-bottom: 4px;}
#character_pokemon .pokemon-list,
#character_relationship .relationship-list { grid-template-columns: 1fr;grid-template-rows: repeat(6, 14vh);  gap: 8px 0; display: grid;}
#character_pokemon .pokemon-list .pokemon-card {flex-direction: row;}
#character_pokemon .pokemon-list .pokemon-profile {min-width:52%; padding: 4px 12px;}
#character_pokemon .pokemon-list h2 .pokemon-ball {display:none;}
#character_pokemon .pokemon-list .poekmon-info h2 {font-size:20px;}
#character_pokemon .pokemon-list .pokemon-card-bak {height:initial;}
#character_pokemon .pokemon-list .pokemon-effect  {width: calc(100% - 24px); padding:0 12px; font-size: 10px; line-height: 10px;}
#character_pokemon .pokemon-list .pokemon-card-bak .pokemon-bak-detail li {display:none;}
#character_pokemon .pokemon-list .poekmon-info {margin-bottom:0;  font-size: 10px;  line-height: 12px;}
#character_pokemon .pokemon-list .pokemon-effect-list {gap:2px;}
#character_pokemon .pokemon-list .pokemon-card .pokemon-pic {height:initial;}
#character_pokemon .pokemon-list .pokemon-card .pokemon-pic img { display: block;position: relative; top: 50%; transform: translateY(-50%);}
#character_pokemon svg, #character_relationship svg {width:36px !important;}
#character_relationship .relationship-list .relationship-card {grid-template-columns: 100px auto; padding:8px 12px; gap:4px;}
#character_relationship .relationship-list .relation-thumb {width:80px; height:116px;}
#character_relationship .relationship-list {grid-template-rows: repeat(4, auto);}
#character_relationship .relationship-list .relation-info h2 {font-size:16px;}
#character_relationship .relationship-list .relation-info h3 { font-size: 13px; margin: 4px 0;}
#character_relationship .relationship-list .relation-memo {padding: 4px 0; font-size: 12px; -webkit-line-clamp: 5;}
#character_relationship .relationship-list .relationship-card-outer.open { grid-column: initial;}
#character_relationship .relationship-list .relationship-card-outer.open .relation-memo {-webkit-line-clamp: initial;}

.member-list .ui-thumb img {width: 160px;}
.member-list .ui-profile strong {font-size:20px;}
.member-list .ui-catchphrase {margin-bottom: 2px;}
.member-list .ui-profile{min-height: 60px;}
.member-list .ui-profile-outer {min-height:88px;}
}

@media all and (max-width: 500px) {
	.relation-member-list .rm-name			{ padding-right: 0; font-size: 13px; }
	.relation-member-list .rm-like-style	{ position: relative; width: auto;overflow: hidden; }

	.relation-member-list > li		{ padding-left:0px; }
	.relation-member-list .ui-thumb	{ width: 50px; }
	.relation-member-list .info		{ min-height: 62px; margin-left: 60px; }
}