@charset "utf-8";

/*-----------------------------------------------
 * h
------------------------------------------------*/
h2{
	line-height: 1.1;
	font-size: 160%;
	font-weight: 700;
	text-align: center;
	aspect-ratio: 9.4 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	background-image: url(../images/common/bg_title.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #eff0f0;
	background-size: 100%;
	position: relative;
	flex-wrap: wrap;
    align-content: center;
}
@media screen and (max-width:767px){
	h2{
		font-size: 120%;
	}
}
h2::before{
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	background:var(--color-blue);
	position: absolute;
	top: -6px;
}

/*-----------------------------------------------
 * Header
-------------------------------------------------*/
.header{
	width: 100%;
	background: #fff;
	padding: 0.5em 1em;
	display: block;
	font-size: 90%;
}
.header__innerContent{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
h1{
	display: flex;
	align-items: center;
	width: fit-content;
	line-height: 1.2;
}
h1::before{
	display: block;
	content: '';
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.5em;
	background:url(../images/common/icon_title.webp) no-repeat center center;
	background-size: contain;
}
.lang{
	position: relative;
}
.lang_list{
	display: flex;
	text-align: center;
	align-items: center;
}
.l-language__item a{
	text-transform:uppercase;
	width: fit-content;
	display: block;
	line-height: 1;
	background: #fff;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #000;
	padding: 0.5em 0.5em 0.6em 0.6em;
}
.l-language__item a:hover{
	background: #000;
	color: #fff;
}
.l-language__item a.l-language__link--active{
	background: #000;
	color: #fff;
}
.lang_btn{
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	background: #000;
	color: #fff;
}
.lang_btn::before{
	display: block;
	content: '';
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	background:url(../images/common/icon_lang.png) no-repeat center center;
	background-size: contain;
}
.lang_btn:hover{
	cursor: pointer;
	background-color: var(--color-blue);
	transition: .3s ease;
}
@media screen and (max-width:767px){
	.header{
		background: #eff0f0;
	}
	.lang_btn{
		padding: 0.5em;
	}
	.lang_btn::before{
		margin-right: 0;
	}
}


/*-----------------------------------------------
 * Footer
-------------------------------------------------*/
.foooter{
	width: 100%;
}
/* bnr */
.footer_bnrLists{
	padding: 1em;
	display: flex;
	justify-content: space-between;
	background-color: var(--color-blue);
}
.footer_bnrList{
	width: 49%;
	height: fit-content;
	display: flex;
	background: #fff;
}
.footer_bnrList__link{
	display: block;
	line-height: 0;
}
/* copy */
.footer_copyrightWrap{
	padding: 2em 0;
	color: #FFF;
	background-color: #000;
}
.footer_copyright__caution{
	font-size: 70%;
	line-height: 2;
	text-align: center;
}
.footer_copyright__subLists{
	font-size: 70%;
	margin-top: 2em;
	display: flex;
	justify-content: center;
	gap: 1em;
}
.footer_copyright__subList a{
	width: fit-content;
	display: block;
	margin: auto;
	padding: 0.5em;
	border: 1px solid #fff;
	color: #fff;
}
.footer_copyright__subList a:hover{
	background: #fff;
	color: #000;
}
.footer_copyright__linkLists{
	margin-top: 2em;
	font-size: 70%;
	line-height: 1;
	display: flex;
	justify-content: center;
}
.footer_copyright__linkList{
	padding: 0 1em 0 0;
	position: relative;
}
.footer_copyright__linkList:not(:last-child)::after{
	content: '|';
	display: inline-block;
	margin-left: 1em;
}
.footer_copyright__linkList:last-child{
	padding: 0 0 0 0;
}
.footer_copyright__link{
	display: inline-block;
	text-decoration: none;
	color: var(--color-blue);
}
.footer_copyright__cp{
	margin-top: 2em;
	font-size: 70%;
	color: #AAA;
	text-align: center;
}

/*-----------------------------------------------
 * Main
-------------------------------------------------*/
section{
	padding: 0 0 4em 0;
	background-image: url(../images/common/bg_detail.png);
	background-repeat: repeat-y;
	background-size: 100%;
}

.mainContentWrap{
	position: relative;
	z-index: 1;
	font-family: var(--font-notosans);
}
.mainContentInWrap{
	max-width: 1050px;
	margin: auto;
	padding: 0 1em;
	background-color: #fff;
}
.main img{
	max-width: 100%;
}

@media screen and (max-width: 767px){
	section{
		padding: 0 0 2em 0;
	}
	.mainContentWrap{
	}
	.mainContentInWrap{
		max-width: 100%;
		padding: 0;
	}
}

/*-----------------------------------------------
 * mv
-------------------------------------------------*/
.mvCol{
	display: flex;
    align-items: center;
	justify-content: center;
	padding-bottom: 1em;
}
.mvCol_logo{
	width: 70%;
	height: fit-content;
	padding: 0 5% 0 5%;
}
.mvCol_kv{
	width: 100%;
	max-width: 600px;
	height: fit-content;
}

/*-----------------------------------------------
 * aboutCol
-------------------------------------------------*/
.aboutCol{
	padding: 4em 1em;
	background-image: url(../images/common/bg_subdetail.png);
	background-repeat: repeat-y;
	background-position-y: -2em;
	background-size: 100%;
}
.aboutCol__inner{
}
.aboutCol__inner .txt_emphasis{
	font-size: 240%;
    background: linear-gradient(transparent 70%, #fffbe8 0%);
}
.abouttxt_title{
	color: var(--color-blue);
	margin-bottom: 2em;
}
.abouttxt_title .abouttxt_title-sub{
	font-weight: 600;
}
.abouttxt_title .abouttxt_title-main{
	font-size: 240%;
	font-weight: 600;
    background: linear-gradient(transparent 70%, #f9e8ee 0%);
}
.abouttxt_default .txt_emphasis{
	font-size: 140%;
	color: #ff8900;
    background: linear-gradient(transparent 70%, #fff9e4 0%);
}
.event_period{
	max-width: 90%;
	width: fit-content;
	margin: 4em auto auto auto;
	display: flex;
	background: #e15769;
	background: linear-gradient(300deg,#e15769 20%, #00a2c2 79%);
	clip-path: polygon(0.6em 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
	padding: 2px;
}
.event_period dt,.event_period dd{
	background: #fff;
	padding: 1em 1.5em;
}
.event_period dt{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 1px;
	clip-path: polygon(0.6em 0, 100% 0, 100% 100%, calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
}
.event_period dd{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0);
}
.event_period dd span{
	color: #b60000;
	font-size: 160%;
	font-weight: 600;
}
@media screen and (max-width:767px){
	.aboutCol{
		padding: 2em 1em 3em 1em;
	}
	.aboutCol__inner .txt_emphasis{
		font-size: 140%;
	}
	.abouttxt_title{
		line-height: 1.2;
	}
	.abouttxt_title .abouttxt_title-sub{
		font-size: 80%;
	}
	.event_period{
		display: block;
		margin: 2em auto auto auto;
	}
	.event_period dt{
		margin-right: 0px;
		margin-bottom: 1px;
	}
	.event_period dd{
		display: block;
		line-height: 1.2;
	}
}

/*-----------------------------------------------
 * countCol
-------------------------------------------------*/
.countCol__inner{
	padding: 2em;
	line-height: 1.2;
}
.countCol__tit-s{
	width: 100%;
	font-size: 50%;
}
.countNum__num{
	font-size: 240%;
	font-weight: 700;
	color: #b60000;
}

/*-----------------------------------------------
 * voteCol(キャラ一覧)
-------------------------------------------------*/
.voteCol{
	padding: 0 0 0 0;
}
.voteCol__innner{
	padding: 2em;
}
@media screen and (max-width:767px){
	.voteCol__innner{
		padding: 2em 1em;
	}
}

/* search */
#searchForm{
	width: 100%;
	display: flex;
	justify-content: end;
	flex-wrap: wrap;
    align-items: stretch;
}
.searchTitle{
	padding-right: 0.5em;
	line-height: 2;
}
.search{	
	display: flex;
}
#searchInput{
	box-sizing: border-box;
	border: 1px solid #000;
	padding:0.2em 0.5em;
	text-align: right;
}
#searchButton,.btn_reset{
	padding: 0.5em;
	background-color: #000;
	border: 1px solid #000;
}
#searchButton img,.btn_reset img{
	display: block;
	width: 1em;
	height: 1em;
}
#searchButton:hover,.btn_reset:hover{
	background: var(--color-blue);
	border: 1px solid #000;
}
@media screen and (max-width:767px){
	.searchTitle{
		font-size: 80%;
		width: fit-content;
	}
	#searchInput{
		width: 50%;
	}
	#searchButton{
		padding: 0.49em;
	}
}

/* characterList */
.characterList{
	padding: 1em 0;
}
.characterList__innner{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1em;
	padding: 1em 0;
}
@media screen and (max-width:767px){
	.characterList__innner{
		grid-template-columns: 1fr 1fr;
	}
}
.characterList__innner li{
	padding: 1em;
	background-color: var(--color-blue);
	transition: .3s ease;
}
.characterList__innner li:hover{
	background: #000;
}
.select_scene:hover{
	cursor: pointer;
}

/* btn_more */
.btn_more{
	display: block;
	padding: 0.5em 3em;
	width: fit-content;
	margin: auto;
	background: #000;
	color: #fff;
	border-radius: 3em;
}
.btn_more:hover{
	cursor: pointer;
	background: var(--color-blue);
}

/* chara li */
.charaselect{
	height: 100%;
	text-align: center;
	display: grid;
    align-content: space-between;
}
.charaselect dt{
	background: #fff;
	aspect-ratio: 1/1;
	overflow: hidden;
}
.chara_name{
	padding: 0.5em;
	color: #fff;
	line-height: 1.3;
}
.characterList__innner li:hover .chara_name{
	color: #fff;
}
/* chara li > シーン選択ボタン */
.select_scene{
	padding:1em;
	background: #000;
	color: #fff;
	width: fit-content;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 80%;
	line-height: 1;
	clip-path: polygon(0.6em 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
}
.select_scene::before{
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	background: url(../images/common/deco_arrow_type1.svg) no-repeat center center;
	background-size: contain;
	margin-right: 0.3em;
	filter: brightness(0) saturate(100%) invert(100%);
}
.characterList__innner li:hover .select_scene{
	background: #fff;
	color: #000;
	font-size: 80%;
	line-height: 1;
}
.characterList__innner li:hover .select_scene::before{
	filter:none;
}

/* ストーリー選択画面 */
.storylist{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
.storylist_detail {
	margin-top: 1em;
	transition: .3s ease;
}
.story_img{
	aspect-ratio: 16 / 9;
	background: #eff0f0;
	overflow: hidden;
}
.story_num{
	font-size: 70%;
}
.story_name{
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1.2;
	font-size: 90%;
    border-bottom: 1px dotted;
	padding: 0 0 0.2em 0;
	margin-bottom: 0.5em;
}
.lines{
	color: var(--color-blue);
	font-size: 70%;
	margin-bottom: 0.5em;
}
.story_btnvote a{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #b60000;
	color: #fff;
	padding: 0.8em;
	margin: 0.5em auto;
	line-height: 1;
	clip-path: polygon(0.6em 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
}
.story_btnvote a::before{
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	background: url(../images/common/deco_arrow_type1.svg) no-repeat center center;
	background-size: contain;
	margin-right: 0.3em;
	filter: brightness(0) saturate(100%) invert(100%);
}
.story_btnvote a:hover{
	background: var(--color-blue);
	cursor: pointer;
}
.story_btnset{
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5em;
	line-height: 1;
}
.story_btnset a,.story_btnset button{
	background: #000;
	color: #fff;
	padding: 0.8em;
	text-decoration: none;
	clip-path: polygon(0.6em 0, 100% 0, 100% calc(100% - 0.6em), calc(100% - 0.6em) 100%, 0 100%, 0 0.6em);
}
.story_btnset a:hover,.story_btnset button:hover{
	cursor: pointer;
	background: var(--color-blue);
}
@media screen and (max-width:767px){
	.storylist{
		grid-template-columns: 1fr 1fr;
	}
	.story_name{
		min-height: 2.7em;
	}
	.story_btnset{
		grid-template-columns: 1fr;
	}
}

/* 投票確認画面 */
.votechackContent__inner--txt .story_btnset .votechack_y{
	background: #b60000;
}
.votechackContent__inner--txt .story_btnset .votechack_y:hover{
	background: var(--color-blue)
}
.votechackContent__inner--txt{
	font-size: 120%;
}
.votechackContent__inner--img{
	display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.votechackContent__inner--img dl dt{
	padding: 0.5em 0;
	color: #fff;background: #018EAB;
	background: linear-gradient(300deg,rgba(1, 142, 171, 1) 20%, rgba(0, 162, 194, 1) 20%, rgba(0, 162, 194, 1) 50%, rgba(0, 162, 194, 1) 80%, rgba(1, 142, 171, 1) 79%);
}
.votechackContent__inner--img dl dd{
	background: #eff0f0;
}
.votechackContent__inner--chara{
    width: 35%;
}
.votechackContent__inner--chara dd{
	aspect-ratio: 1/1;
	overflow: hidden;
}
.votechackContent__inner--story{
    width: 62%;
}
@media screen and (max-width:767px){
	.votechackContent__inner--img{
		display: block;
	}
	.votechackContent__inner--img dl{
		width: 100%;
	}
}
/* 投票後・シェア */
.btn_share{
    display: flex;
    margin: auto auto 1em auto;
    background: var(--color-blue);
    padding: 1em 0 1.5em;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
.btn_share dt{
    font-weight: 600;
    font-size: 110%;
    width: 100%;
    color: #fff;
}
.btn_share dd a{
    display: flex;
    gap: 0.3em;
    background: #fff;
    width: fit-content;
    border-radius: 4em;
    align-items: center;
    padding: 0 1em 0 0;
    transition: .3s ease;
	text-decoration: none;
}
.btn_share dd a:hover{
	background: #000;
	color: #fff;
	cursor: pointer;
}
.btn_share-x,.btn_share-fb{
	width: 2.5em;
	height: 2.5em;
	padding: 0.5em;
	display: block;
	background: #000;
	border-radius: 4em;
	line-height: 1;
}
.btn_share-x img,.btn_share-fb img{
	width: 100%;
}

/*-----------------------------------------------
 * presentCol
-------------------------------------------------*/
.presentCol{
	text-align: center;
}
.presentCol__inner{
	padding: 6em 2em 6em 2em;
	background-image: url(../images/common/bg_subdetail.png);
	background-repeat: repeat-y;
	background-position-y: -2em;
	background-size: 100%;
	margin-bottom: 4em;
}
@media screen and (max-width:767px){
	.presentCol__inner{
		padding: 2em 2em 2em 2em;
		margin-bottom: 3em;
	}
}

/*-----------------------------------------------
 * noticelistCol
-------------------------------------------------*/
.noticelistCol{
}
.noticelistCol__inner{
	padding: 4em 2em 4em 2em;
	background-image: url(../images/common/bg_subdetail.png);
	background-repeat: repeat-y;
	background-position-y: -2em;
	background-size: 100%;
}
.noticelistCol__inner .notice{
	width: fit-content;
	margin: auto;
}
.notice2{
	font-size: 90%;
	color: #b60000;
}