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

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500&display=swap');

html, body {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family: 'Noto Serif KR', 'Noto Sans KR',  serif;
	line-height: 1.5;
	font-size: 14px;
	color: #000000;
	word-break:keep-all;
}
html {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}
img {
	width: 100%;
	vertical-align: bottom;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	-webkit-touch-callout:none;
	user-select:none;
}
li {
	list-style: none;
}
.red {
	color: #b30606;
}

/* layout */
.btn.detail {
	max-width: 320px;
	margin: 0 auto;
	width: 60%;
}
header {
	background: url(../img/bg_head.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	text-align: center;
}
header, main {
	
	font-weight: 600;
}
#head_main img {
	width: min(100%, 1792px);
}
nav {
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 10;
	background: #aa2900;
}
nav.is-fixed { /* sticky非対応対策 */
	position: fixed;
	position: sticky;
}
nav ul {
	display: flex;
	justify-content: center;
	border-top: 2px solid #998862;
	border-bottom: 1px solid #998862;
	gap:20px;
	padding: 0 10px;
}
nav ul li a {
	display: block;
	padding: 25px 0;
}
nav ul li a span {
	display: block;
	position: relative;
	padding: 0 10px;
	box-sizing: border-box;
	border-right: 1px solid #f0d892;
}

.target {
	margin-top: -80px;
	padding-top: 80px;
}
#chara > .wrap {
	background: url(../img/bg_image_1.jpg);
	padding: 40px 0;
	box-sizing: border-box;
	border-bottom: 2px solid #998862;
}
#chara h2 {
	margin: 0 auto;
	width: min(90%, 567px);
}
#chara h3 {
	text-align: center;
	margin: 30px auto 0;
	font-size: 1.75rem;
	font-size: clamp(1.5rem ,6.5vw, 3rem);
	line-height: 1.25;
	letter-spacing: -1;
}
#chara .txt_1 {
	display: block;
	text-align: center;
	margin-top: 15px;
}
#chara ul.list_btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 90%;
	margin: 20px auto 0;
	margin: clamp(20px, 9vw, 60px) auto 0;
}
#gacha {
	background: url(../img/bg_image_3.jpg);
	border-bottom: 2px solid #998862;
}
#gacha ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px 0;
	box-sizing: border-box;
	width: 85%;
	margin: 0 auto;
} 
#gacha ul li {
	max-width: 480px;
	list-style: none;
	padding: 20px 0;
	box-sizing: border-box;
}

#chara .txt.gacha {
	text-align: center;
	font-size: 180%;
	margin-top: 30px;
}
#chara .img_1 {
	max-width: 640px;
	margin: 10px auto 0;
}
#chara .txt.notice {
	text-align: center;
	margin-top: 30px;
}
#chara .thumb_list {
	display: flex;
	max-width: 1160px;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content: center;
}
#chara .thumb_list li {
	width: 48%;
	max-width: 280px;
	list-style: none;
	margin: 15px 1% 0 1%;
}
#chara .thumb_list li a {
	display: block;
}
.btn_ability {
	max-width: 200px;
	margin: 10px auto;
	width: 90%;
}
#chara .txt.adjust {
	text-align: center;
	margin-top: 30px;
	font-size: 160%;
}
#chara .btn_list {
	margin-top: 30px;
	text-align: center;
}
#chara .btn_list img {
	max-width: 470px;
}
#dungeon .wrap {
	color: #ffffff;
	text-align: center;
}
#dungeon .btn {
	margin: 5% auto 0;
	width: 70%;
}
#dungeon .btn img {
	width: min(80%, 466px);
}
#dungeon .wrap:before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../img/bg_dungeon.jpg) center no-repeat;
	background-size:cover;
}
#dungeon .inner {
	padding: 60px 5px;
}
#dungeon .btn.detail {
	margin: 30px auto 0;
}
#dungeon .num {
	max-width: 112px;
	display: block;
	margin: 0 auto -15px;
}
#dungeon h2.title {
	width: min(90%, 566px);
	margin: 0 auto;
}
#dungeon h3.title {
	max-width: 470px;
	margin: 20px auto 0;
	padding: 0 10px;
}
#dungeon h3.title {
	max-width: 470px;
	margin: 20px auto 0;
	padding: 0 10px;
}
#dungeon dt {
	font-size: clamp(16px, 4vw, 28px);
}
#dungeon #howto_1 dd {
	margin-top: 40px;
}
#dungeon #howto_1 dd p {
	margin-top: 40px;
}
#dungeon #howto_1 .img_1 {
	max-width: 286px;
	margin: 0 auto;
	width: 50%;
}
#dungeon #howto_2 .img_2 {
	max-width: 670px;
	margin: 50px auto 0;
}
#dungeon #howto_3 .img_3 {
	max-width: 610px;
	margin: 20px auto 0;
}
#dungeon #colosseum {
	margin-top: 7%;
}
#dungeon #colosseum img {
	max-width: 750px;
	width: 100%;
	width: min(90%, 750px);
}
#dungeon #story {
	max-width: 750px;
	width: 100%;
	width: min(90%, 750px);
	margin: 3% auto 0;
}
#dungeon #story .foot {
	background:url(../img/story_img_3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 0;
	padding-bottom: 19.46666666666667%;
}
#dungeon #story .foot .btn.detail {
	margin: 0 auto;
	width: 50%;
}
#others .wrap {
	background: url(../img/bg_image_1.jpg);
	padding: 60px 0 80px;
}
#others .inner {
	padding: 60px 0;
}
#others h2.title {
	margin: 0 auto;
	width: min(90%, 566px);
}
#others .txt {
	font-size: 1.5rem;
	font-size: clamp(1.5rem, 6.5vw, 2.5rem);
	text-align: center;
	margin-top: 20px;
}
#others .img_1 {
	max-width: 1080px;
	width: min(100%, 1080px);
	margin: 2% auto 0;
}
#others .btn {
	margin: 40px auto 0;
	max-width: 320px;
	width: 70%;
}
#foot {
	background: url(../img/bg_image_2.jpg);
	padding: 20px 10px 50px;
	border-top: 2px solid #998862;
	border-bottom: 2px solid #998862;
}
#foot #foot_img {
	max-width: 550px;
	margin: 0 auto;
}
footer {
	padding: 30px 10px;
	box-sizing: border-box;
	background-color: #ffffff;
	background-size: cover;
	background-position: right;
}
footer dt {
	font-size: 140%;
	font-weight: bold;
}
.download_box {
	margin-top: 5px;
}
.download_box ul {
	display: flex;
	max-width: 765px;
	margin: 0 auto;
	justify-content: center;
}
.download_box li {
	list-style: none;
	margin-right: 5px;
	max-width: 160px;
}
.download_box li:last-child {
	margin-right: 0;
}
.back-to-top {
	font-size: 130%;
	font-weight: bold;
	text-align: center;
	margin-top: 15px;
}
.back-to-top a {
	text-decoration: none;
	color: #000000;
}
.social {
	display: flex;
	flex-wrap: wrap;
	max-width: 220px;
	margin: 10px auto 0;
}
.social li {
	list-style: none;
}
#copyright {
	font-size: 10px;
	text-align: center;
	background: #000000;
	padding: 10px 0;
}
#copyright p {
	color: #ffffff;
	font-size: 10px;
}
#pagetop {
	display: none;
	position: fixed;
	max-width: 50px;
	bottom: 10px;
	right: 10px;
	z-index: 100;
}

/* component */
.c-modal-content {
	display: none;
}
.c-modal-close {
	position: absolute;
	right: 5px;
	top: 0;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 36px; /* clamp非対応対策 */
	width: clamp(34px, 9vw, 78px);
	height: 36px; /* clamp非対応対策 */
	height: clamp(34px, 9vw, 78px);
	text-align: center;
	color: #fff;
	font-size: 26px; /* clamp非対応対策 */
	font-size: clamp(10px, 6vw, 38px);
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.c-modal-close span {
	display: block;
	pointer-events: none;
}
.c-kakusei-list {
	display: flex;
	align-items: center;
	gap: 5px;
	/*width: clamp(140px, 35%, 300px);*/
}
.c-kakusei-list dd ul {
	display: flex;
	gap: 2px;
}
.c-kakusei-list dd li {
	width: 16px; /* clamp非対応対策 */
	width: clamp(16px, 5.5vw, 18px);
}
.c-leader-skill-txt {
	display: flex;
	gap: 5px;
}
.c-leader-skill-txt .per {
	color: #f10000;
}
.c-evo-btn-list {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	padding: 0 10px;
	gap: 2px; /* clamp非対応対策 */
	gap: clamp(2px, 1.6vw, 8px);
	pointer-events: auto;
}
.c-evo-btn-list__item {
	max-width: min(calc(100% / 4), 180px);
	background: #000;
	font-size: 0;
}
.c-evo-btn-list__item > a {
	display: inline-block
}
.c-evo-btn-list__item img {
	height: auto;
}
.c-evo-btn-list__item.is-active a {
	cursor: default;
}
.c-es-btn {
	display: block;
	width: min(8.5vw, 68px);
}
.c-overlay {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg_image_1.jpg);
	cursor: pointer;
	z-index: 100;
}

/* projects */
.p-chara-list,
.p-chara-list * {
	box-sizing: border-box;
}
.p-chara-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
	max-width: calc(calc(285px * 2) + calc(14px * 1) + calc(16px * 2));
	margin: 40px auto 0; /* clamp非対応対策 */
	margin: clamp(20px, 5vw, 40px) auto 0;
	padding: 0 5px;
	gap: 30px 14px; /* clamp非対応対策 */
	gap: clamp(30px, 8vw, 48px) 14px;
}
.p-chara-list__item {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	width: calc(calc(100% - 14px) / 2);
	max-width: 320px;
}
.p-chara-list__item img {
	width: auto;
	height: auto;
	max-width: 100%;
}
.is-new .p-chara-list__tmb,
.is-evo-new .p-chara-list__tmb {
	position: relative;
}
.is-new .p-chara-list__tmb .new,
.is-evo-new .p-chara-list__tmb .evo-new {
	position: absolute;
	width:min(30%, 102px);
}
.p-chara-list__btn {
	width: min(80%, 270px);
	margin-top: 10px; /* clamp非対応対策 */
	margin-top: clamp(8px, 2vw, 20px);
}
.p-chara-list__btn > a {
	display: inline-block;
}

.p-modal-illust,
.p-modal-ability,
.p-modal-illust *,
.p-modal-ability * {
	box-sizing: border-box;
}

.p-modal-illust,
.p-modal-ability {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 101;
}
.p-illust-box__img,
.p-ability-box__img,
.p-ability-box__others {
	pointer-events: auto;
}

.p-modal-illust img,
.p-modal-ability img {
	width: auto;
	max-width: 100%;
	box-sizing: content-box;
}
.p-illust-box {
	position: relative;
	width: min(100vw, 960px);
	margin: 0 auto;
}
.p-illust-box__img {
	position: relative;
	max-width: 960px;
	width: min(100%, 960px);
	margin: 0 auto;
	text-align: center;
}
.p-illust-box__img img {
	height: auto;
}
.p-ability-box {
	position: relative;
	width: min(100vw, 600px);
	margin: 0 auto;
}
.p-ability-box__img {
	position: relative;
	width: min(85%, 600px);
	max-width: 55vh;
	margin: 0 auto;
}
.p-ability-box__img > img {
	border: 1px solid #928160;
}
.p-ability-box__img .c-modal-close {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(35%, -35%);
	width: min(15%, 78px);
}

.p-ability-box__others {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 5px 20px;
	padding: 0 5px;
	color: #000;
	font-size: 12px; /* clamp非対応対策 */
	font-size: clamp(10px, 2.66vw, 16px);
	font-weight: bold;
	line-height: 1.3;
	width: min(100%, 600px);
	margin: 10px auto 0;
	
	font-weight: 900;
	transform: rotate(0.03deg); /* WEBフォントのぼやけ対策 */
	-moz-transform: rotate(0.03deg);
	-ms-transform: rotate(0.03deg);
	-o-transform: rotate(0.03deg);
	-webkit-transform: rotate(0.03deg);
}
.p-es {
	position: absolute;
	/* top: 50%; */
	left: 0;
	/* transform: translate(0, -50%); */
	top: 0;
	width: 100%;
	height: 100%;
}
.p-es__img {
	display: block;
	/* padding: 0 10px; */
	left:1px;
	position: relative;
}
.p-es__img > img {
	/* border: 1px solid #b4c03a; */
}
.p-es .c-es-btn {
	position: absolute;
	/* top: 50%; */
	left: -3vw;
	left: -7vw;
	/* transform: translate(0, -50%); */
	top: 13%;
	top: 30%;
}


.p-modal-notice {
	margin-top: 10px;
	padding: 0 10px;
	font-size: 12px; /* clamp非対応対策 */
	font-size: clamp(10px, 1.4vw, 14px);
	color: #fff;
	pointer-events: auto;
}
.p-modal-notice p {
	margin-top: 0;
}
/* utility */

/* flexbox gap 対策 */
.no-flexbox-gap .c-kakusei-list > * {
	margin-right: 10px;
}
.no-flexbox-gap .c-kakusei-list > *:last-child {
	margin-right: 0;
}
.no-flexbox-gap .c-kakusei-list dd ul > * {
	margin-right: 4px;
}
.no-flexbox-gap .c-kakusei-list dd ul > *:last-child {
	margin-right: 0;
}
.no-flexbox-gap .c-leader-skill-txt > * {
	margin-right: 10px;
}
.no-flexbox-gap .c-leader-skill-txt > *:last-child {
	margin-right: 0;
}
.no-flexbox-gap .c-evo-btn-list > * {
	margin-right: 4px; /* clamp非対応対策 */
	margin-right: clamp(2px, 1.6vw, 8px);
}
.no-flexbox-gap .c-evo-btn-list > *:last-child {
	margin-right: 0;
}
.no-flexbox-gap .p-chara-list > * {
	margin-right: 14px;
	margin-bottom: 30px;
	margin-top: 30px; /* clamp非対応対策 */
	margin-bottom: clamp(30px, 8vw, 48px);
}
.no-flexbox-gap .p-chara-list > *:nth-child(2n) {
	margin-right: 0;
}
.no-flexbox-gap .p-ability-box__others > * {
	margin-right: 20px;
	margin-bottom: 5px;
}
.no-flexbox-gap .p-ability-box__others > *:last-child {
	margin-right: 0;
}

.overlay {
	position: fixed;
	background: rgba(34, 0, 0, 0.95);
	width: 100%;
	height: 100%;
	opacity: 1;
	top: 0;
	z-index: 1000;
}
#flavor-box {
	position: absolute;
	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 98vw;
	width: clamp(320px,98vw, 960px);
	height: 100%;
	max-width: 110vh;
	display: none;
}
#flavor-box.is-active {
	z-index: 2;
}
#btn_flavor {
	width: 50%;
	width: min(10%,68px);
	position: absolute;
	z-index: 1000;
	cursor: pointer;
}
#txt_flavor {
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	background-image: url(../img/bg_image_4.png);
	width: 100%;
	height: 85vw;
	height: clamp(320px,90vw, 800px);
	z-index: 100;
	box-sizing: border-box;
	transform: translate(0, -45%);
	letter-spacing: 0.1em;
}
#flavor-box.is-active #txt_flavor {
	display: block;
}
#txt_flavor .head {
	background-image: url(../img/bg_image_5-1.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	padding-top: 8.095238095238095%;
	width: 100%;
}
#txt_flavor .foot {
	background-image: url(../img/bg_image_5-3.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	width: 100%;
	padding-bottom: 9.523809523809524%;
}
#txt_flavor .inner {
	position: relative;
	background-image: url(../img/bg_image_5-2.png);
	background-repeat: repeat-y;
	background-position: center;
	background-size: contain;
	width: 100%;
	padding: 3% 10%;
	padding: 3% clamp(18px, 10%, 68px);
}
#txt_flavor .inner > .name {
	font-size: 1.5rem;
	font-size: clamp(18px,5vw, 42px);
	font-weight: 900;
	padding: 0 4% 0 5%;
	letter-spacing: 0.05em;
}
#txt_flavor .inner > .txt {
	font-size: 1rem;
	font-size: clamp(12px,3vw, 28px);
	text-align: left;
	line-height: 1.5em;
	line-height: clamp(1.25em,5.5vw, 1.75em);
	font-weight: 600;
}
#txt_flavor .inner > .close {
	text-align: initial;
	box-sizing: border-box;
	height: 36%;
	font-size: 1rem;
	font-size: clamp(12px,3vw, 24px);
	font-weight: 900;
	height: 90px;
	height: clamp(90px ,30%, 140px);
	position: absolute;
	bottom: 0;
	left: 10%;
	left: clamp(18px, 6vw, 74px);
	cursor: pointer;
}

#txt_flavor .inner > .close::before {
	content: '';
	background-image: url(../img/btn_close.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	height: 24px;
	width: 24px;
	height: clamp(24px,4vw, 36px);
	width: clamp(24px,4vw, 36px);
	margin: 0 auto;
	display: inline-block;
	padding-bottom: 10px;
	padding-bottom: min(10%,30px);
}


.center,.tac { text-align: center; }
.in-b { display: inline-block; }
.fs80per { font-size: 80% }
.mt10 { margin-top:  10px; }
.mt15 { margin-top:  15px; }
.mt20 { margin-top:  20px; }
.mt30 { margin-top:  30px; }

@media (any-hover: hover) {
	
	/* 
	.c-modal-close:hover {
		background: #fff;
		color: #000;
	} */
}

/*-------------- tablet size --------------------*/

@media screen and (min-width: 641px) {
	/* base */
	html, body p {
		font-size: 16px;
	}
	/* layout */
	nav ul{
		padding:0;
	}
	#chara .btn_list {
		margin-top: 40px;
	}
	#gacha ul {
		padding: 40px 0;
	}
	#others .txt {
		font-size: 250%;
	}
	#others .txt.notice {
		font-size: 150%;
	}
	.modal_close {
		width: 78px;
		top: -34px;
		right: 34px;
	}
	.modal-content .btn_modal_list li {
		max-width: 160px;
	}
	
	#modal_ability .modal_close {
		top: -20px;
		right: -30px;
	}
	.c-kakusei-list dd ul {
		gap: 4px;
	}
	#txt_flavor .inner > .name {
		font-size:2rem;
		font-size: clamp(18px,5vw, 42px);
	}
	#txt_flavor .inner > .txt {
		font-size: 1.5rem;
		font-size: clamp(12px,3vw, 28px);
	}
	#txt_flavor .inner > .close {
		font-size: 1.5rem;
		font-size: clamp(12px,3vw, 24px);
		height: 140px;
		height: clamp(90px ,30%, 140px);
	}
	.c-modal-close {
		width: 78px; /* clamp非対応対策 */
		width: clamp(34px, 9vw, 78px);
		height: 78px; /* clamp非対応対策 */
		height: clamp(34px, 9vw, 78px);
	}
	/* components */
	.p-chara-list {
		max-width: calc(calc(285px * 3) + calc(14px * 2) + calc(32px * 2));
		padding: 0;
		/* padding: 0 32px; */
	}
	.p-chara-list__item {
		width: calc(calc(100% - calc(14px * 2)) / 3);
	}
	.p-illust-box {
		width: min(calc(100vw - 17px), 960px);
	}
	/*
	.p-ability-box {
		width: min(70vw, 600px);
	}
	*/
	.p-es .c-es-btn {
		left: -30px;
		left: -67px;
		/* transform: translate(-50%, -50%); */
	}
	/* flexbox gap 対策 */
	.no-flexbox-gap .p-chara-list > *:nth-child(2n) {
		margin-right: 14px;
	}
	.no-flexbox-gap .p-chara-list > *:nth-child(3n) {
		margin-right: 0;
	}
}
@media screen and (min-width: 641px) and (orientation: landscape) {
	/* base */
	/* layout */
	/* components */
	.c-kakusei-list dd li {
		width: 16px; /* clamp非対応対策 */
		width: clamp(16px, 5.5vw, 18px);
	}
	/* projects */
	.p-illust-box__img {
		max-width: 110vh;
	}
	.p-ability-box__others {
		font-size: 12px; /* clamp非対応対策 */
		font-size: clamp(10px, 1.2vw, 16px);
	}
	#txt_flavor {
		height: clamp(320px,90vh, 800px)
	}
	
}

@media screen and (min-width: 641px) and (max-width: 1023px) and (orientation: landscape) {
	/* base */
	/* layout */
	/* components */
	.c-modal-close {
		width: 40px; /* clamp非対応対策 */
		width: clamp(40px, 5vw, 54px);
		height: 40px; /* clamp非対応対策 */
		height: clamp(40px, 5vw, 54px);
		font-size: 24px;/* clamp非対応対策 */
		font-size: clamp(24px, 4vw, 40px);
	}
	.c-evo-btn-list__item {
		width: min(13vw, 180px);
	}
	/* projects */
	.p-ability-box__others {
		justify-content: center;
	}
}

/*--------------　PC size --------------------*/

@media screen and (min-width: 1024px) {
	/* base */
	/* layout */
	.btn {
		padding: 0;
		box-sizing: content-box;
	}
	nav ul {
		gap: 30px
	}
	nav ul li a span {
		padding: 0 40px;
	}
	nav ul li a {
		padding: 35px 0;
	}
	#chara h2.title {
		margin: 40px auto 0;
	}
	#chara .txt.gacha {
		text-align: center;
		font-size: 250%;
	}
	#chara .txt.notice {
		margin-top: 50px;
		font-size: 150%;	
	}
	#chara .thumb_list {
		margin: 0 auto;
	}
	#chara .thumb_list li {
		width: 100%;
		margin: 15px 10px 0 0;
	}
	#chara .thumb_list li:nth-child(4n) {
		margin: 15px 0 0 0;
	}
	
	#chara .txt.adjust {
		margin-top: 50px;
		font-size: 220%;
	}
	#dungeon .num {
		max-width: 224px;
		margin: 0 auto -30px;
	}
	#dungeon p {
		font-size: 150%;
	}
	#dungeon .btn.detail {
		margin: 60px auto 0;
	}
	#dungeon dt {
		font-size: 250%;
	}
	#gacha ul li {
		padding: 0 15px;
		box-sizing: content-box;
	}
	#pagetop {
		max-width: 140px;
		bottom: 20px;
		right: 20px;
	}
	.download_box li {
		max-width: 320px;
	}
	.modal_close {
		width: 68px;
		top: 0;
		right: 0;
	}
	
	#modal_illust .modal-content {
		padding: 0;
		width: calc(100vh / 1);
		margin: 0 auto;
	}
	#modal_ability .ability_box {
		max-width: 640px;
		width: calc(100vh / 1.77777777778);
	}
	#modal_ability .kakusei_list li {
		margin-right: 10px;
	}
	#flavor {
		top: -50px;
		right: 0;
	}
	#flavor .txt {
		line-height: 3;
		font-size: 180%;
		font-weight: normal;
	}
	#flavor dt {
		font-size: 250%;
		text-align: center;
		font-weight: bold;
		padding-left: 50px;
	}
	#flavor .close {
		font-size: 200%;
		left: 60px;
	}
	#flavor .close img {
		width: 42px;
	}
	#flavor dl {
		padding: 10px 15% 10px 0;
		width: 100%;
		box-sizing: border-box;
	}
	#modal_ability .kakusei_list  {
		font-size: 130%;
		min-height: 35px;
		line-height: 35px;
		margin: 10px 0;
	}
	#modal_ability .kakusei_list li img {
		max-width: 32px;
	}
	
	/* projects */
	.p-chara-list {
		max-width: calc(calc(285px * 4) + calc(14px * 3) + calc(32px * 2));
	}
	.p-chara-list__item {
		width: min(calc(calc(100% - calc(14px * 3)) / 4), 320px);
	}
	.p-illust-box__img .c-modal-close {
		/*transform: translate(25%, -25%); */
	}
	.p-ability-box__others,
	.p-modal-notice {
		padding: 0;
	}
	.c-kakusei-list dd li {
		width: 20px;
		width: clamp(16px, 5.5vw, 24px);
	}
	
	/* flexbox gap 対策 */
	.no-flexbox-gap .p-chara-list > *:nth-child(3n) {
		margin-right: 14px;
	}
	.no-flexbox-gap .p-chara-list > *:nth-child(4n) {
		margin-right: 0;
	}
}

@media screen and (min-width: 1367px) and (orientation: landscape) {
	/* base */
	/* layout */
	/* components */
	/* projects */
	.p-ability-box__img {
		width: min(100%, 600px);
		max-width: 52vh;
	}
}

/* <!-- 230710 수정 --> */
.list_btn li{
	max-width: 540px;
	margin:0 10px;
}

footer {
	padding: 20px 0 0;
	text-align: center;
	/* color:#fff; */
}
.bottomBox {
	position: relative;
	background: #fff;
	box-sizing: border-box;  
	padding: 20px;  
}
.bottomBox p {
	color: #000;
	text-align: center;
}

#copyright p.inline {
	display: inline-block;
	margin: 0 10px;
}

.p-ability-box__img .c-modal-close{
	right: -7px;
	top: -7px;
} 

.p-ability-box__img .c-modal-close {
	top: -20px;
	right: -10px;
}

@media screen and (min-width: 641px) {
	.p-ability-box__img .c-modal-close {
		top: 0;
		right: 0;
		transform: translate(100%, -50%);
	}
}