@charset "UTF-8";

/* 20.12.25追加 */
.linkItem1225 {
	margin-top: .2em;
}
.linkItem1225 a {
	display: block;
	padding: .3em;
	text-decoration: none;
	text-align: center;
	line-height: 1.3em;
	font-size: .8em;
	color: #fff;
	background-color: #000;
}

/* -------------------------------------------------------------------------- */
/* color */
/* 春組 */
#charaCont #txtArea.spring>div::before {
	background-color: #ff91b2;
}
article .contArea.spring {
	background-color: rgba(255,145,178,.4);
}
article .spring .list li p::before {
	border-color: transparent transparent #ff91b2 transparent;
}
#charaCont.spring-1,
article .spring .list li:first-child p {
	background-color: #ff8282;
}
#charaCont.spring-2,
article .spring .list li:nth-child(2) p {
	background-color: #826ee6;
}
#charaCont.spring-3,
article .spring .list li:nth-child(3) p {
	background-color: #00e6b4;
}
#charaCont.spring-4,
article .spring .list li:nth-child(4) p {
	background-color: #ff375e;
}
#charaCont.spring-5,
article .spring .list li:last-child p {
	background-color: #ade601;
}

/* 夏組 */
#charaCont #txtArea.summer>div::before {
	background-color: #ffc800;
}
article .contArea.summer {
	background-color: rgba(255,200,0,.4);
}
article .summer .list li p::before {
	border-color: transparent transparent #ffc800 transparent;
}
#charaCont.summer-1,
article .summer .list li:first-child p {
	background-color: #ffaa00;
}
#charaCont.summer-2,
article .summer .list li:nth-child(2) p {
	background-color: #ffc0df;
}
#charaCont.summer-3,
article .summer .list li:nth-child(3) p {
	background-color: #64f0ff;
}
#charaCont.summer-4,
article .summer .list li:nth-child(4) p {
	background-color: #ffeb00;
}
#charaCont.summer-5,
article .summer .list li:last-child p {
	background-color: #00ff96;
}

/* 秋組 */
#charaCont #txtArea.autumn>div::before {
	background-color: #ff9b63;
}
article .contArea.autumn {
	background-color: rgba(255,155,99,.4);
}
article .autumn .list li p::before {
	border-color: transparent transparent #ff9b63 transparent;
}
#charaCont.autumn-1,
article .autumn .list li:first-child p {
	background-color: #be8c00;
}
#charaCont.autumn-2,
article .autumn .list li:nth-child(2) p {
	background-color: #787878;
}
#charaCont.autumn-3,
article .autumn .list li:nth-child(3) p {
	background-color: #ff4a8e;
}
#charaCont.autumn-4,
article .autumn .list li:nth-child(4) p {
	background-color: #782800;
}
#charaCont.autumn-5,
article .autumn .list li:last-child p {
	background-color: #c8be96;
}

/* 冬組 */
#charaCont #txtArea.winter>div::before {
	background-color: #6ac1ff;
}
article .contArea.winter {
	background-color: rgba(106,193,255,.4);
}
article .winter .list li p::before {
	border-color: transparent transparent #6ac1ff transparent;
}
#charaCont.winter-1,
article .winter .list li:first-child p {
	background-color: #0032be;
}
#charaCont.winter-2,
article .winter .list li:nth-child(2) p {
	background-color: #00c80a;
}
#charaCont.winter-3,
article .winter .list li:nth-child(3) p {
	background-color: #001482;
}
#charaCont.winter-4,
article .winter .list li:nth-child(4) p {
	background-color: #d20029;
}
#charaCont.winter-5,
article .winter .list li:last-child p {
	background-color: #a00096;
}

/* OTHER */
#charaCont #txtArea.other>div::before {
	background-color: #76d689;
}
article .contArea.other {
	background-color: rgba(118,214,137,.4);
}
article .other .list li p::before {
	border-color: transparent transparent #76d689 transparent;
}
#charaCont.other,
article .other .list li p {
	background-color: #74c9b4;
}



/* -------------------------------------------------------------------------- */
/* #charaOver */
#charaOver {
	display: none;
	position: fixed;
	z-index: 200;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	box-sizing: border-box;
	color: #4c444d;
	background-color: rgba(255,255,255,.8);
}
/* -------------------------------------------------------------------------- */
/* #charaCont */
#charaCont {
	box-shadow:0px 0px 10px 0px rgba(0,0,0,.2);
}
#charaCont #imgArea .imgBack>p {
	opacity: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transform: translate(0, 20px);
}
#charaCont #imgArea .imgBack .imgleft.motion {
	animation: anime1 .8s cubic-bezier(.52,.07,.46,.86) forwards;
}
#charaCont #imgArea .imgBack .imgright {
	animation: anime1 .8s .2s cubic-bezier(.52,.07,.46,.86) forwards;
}
@keyframes anime1 {
	0%    {
		opacity: 0;
		transform: translate(0, 20px);
	}
	100%  {
		opacity: 1;
		transform: translate(0, 0);
	}
}
#charaCont #txtArea::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	right: -4px;
	bottom: -4px;
	background-color: #979797;
}
#charaCont #txtArea>div {
	overflow: hidden;
	position: relative;
	z-index: 201;
	background-color: #fff;
}
#charaCont #txtArea>div::before {
	content: '';
	position: absolute;
	right: 0;
	width: 80%;
	height: 100%;
	clip-path: polygon(70% 0, 100% 0, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 0% 100%);
}
#charaCont #txtArea .txtCont {
	position: relative;
	z-index: 202;
}
#charaCont #txtArea .txtCont h2,
#charaCont #txtArea .txtCont h3,
#charaCont #txtArea .txtCont h4
{
	opacity: 0;
	text-align: center;
	line-height: 1em;
	font-family: 'Noto Sans JP', sans-serif;
}
#charaCont #txtArea .txtCont h2 {
	border-bottom: #4c444d 3px solid;
}
#charaCont #txtArea .txtCont h3 {
	font-weight: normal;
}
#charaCont #txtArea .txtCont .txt {
	opacity: 0;
}
#charaLogo::after {
	content: '';
	position: absolute;
	z-index: 205;
	left: -4px;
	bottom: -4px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #979797;
}
#charaLogo>div {
	position: relative;
	z-index: 210;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 94% auto;
	background-color: #fff;
}
#charaCont.other #charaLogo {
	display: none;
}


/* ----------------------------- */
body:not(.sphone) #charaOver {
	padding-top: 5rem;
}
body:not(.sphone) #charaCont {
	position: relative;
	background-image: url("images/characont_back.png"), url("images/characont_back.png");
	background-position: -30px -60px, 500px bottom;
	background-repeat: no-repeat;
}
body:not(.sphone) #charaCont #imgArea .imgBack {
	position: relative;
	width: 50%;
	height: 620px;
	background: url("images/imgarea_back.png") -25px -60px no-repeat;
}
body:not(.sphone) #charaCont #imgArea .imgBack>p {
	position: absolute;
	width: 54%;
	height: 0;
	padding-top: 127.9%;
}
body:not(.sphone) #charaCont #imgArea .imgBack .imgleft {
	/*left: -20px;*/
	left: 85px;
	top: -70px;
}
body:not(.sphone) #charaCont #imgArea .imgBack .imgright {
	right: 0;
	top: -70px;
}
body:not(.sphone) #charaCont #txtArea {
	position: absolute;
	right: 30px;
	top: -15px;
	width: 48.1%;
}
body:not(.sphone) #charaCont #txtArea .txtCont {
	box-sizing: border-box;
	height: 490px;
	padding: 3rem 1.5rem 0;
	background: url("images/txtarea_back.png") 107px bottom no-repeat;
}
body:not(.sphone) #charaCont #txtArea .txtCont h2 {
	padding-bottom: .5rem;
	font-size: 4em;
}
body:not(.sphone) #charaCont #txtArea .txtCont h3 {
	margin-top: .5rem;
	font-size: 1.5em;
}
body:not(.sphone) #charaCont #txtArea .txtCont h4 {
	margin-top: 3rem;
	line-height: 1.3em;
	font-size: 1.6em;
}
body:not(.sphone) #charaCont #txtArea .txtCont .txt {
	margin-top: 1.5rem;
	line-height: 1.8em;
	font-size: 1.05em;
}
body:not(.sphone) #charaLogo {
	position: absolute;
	right: 30px;
	bottom: -20px;
	width: 210px;
}
body:not(.sphone) #charaLogo>div {
	height: 210px;
}

/* ----------------------------- */
.pc #charaCont {
	box-sizing: border-box;
	width: 1060px;
	height: 620px;
	margin: auto;
}
/* ----------------------------- */
.sphone #charaCont {
	position: relative;
	box-sizing: border-box;
	margin: 13vw 2vw 4vw;
	padding-bottom: 6vw;

	background-image: url("images/characont_back.png"), url("images/characont_back.png");
	background-position: -10vw -10vw, right bottom;
	background-repeat: no-repeat;
	background-size: 80%;
}
.sphone #charaCont #imgArea {
	padding-bottom: 3vw;
}
.sphone #charaCont #imgArea .imgBack {
	position: relative;
	height: 0;
	padding-top: 127.4%;
	background: url("images/imgarea_back.png") center top no-repeat;
	background-size: 102% auto;
}
.sphone #charaCont #imgArea .imgBack>p {
	position: absolute;
	width: 54%;
	height: 100%;
}
.sphone #charaCont #imgArea .imgBack .imgleft {
	/*left: 0;*/
	left: 20vw;
	top: 0;
}
.sphone #charaCont #imgArea .imgBack .imgright {
	right: 0;
	top: 0;
}
.sphone #charaCont #txtArea {
	position: relative;
	margin: 0 3% 4%;
}
.sphone #charaCont #txtArea .txtCont {
	padding: 6% 3% 18%;
	background: url("images/txtarea_back.png") 22vw bottom no-repeat;
	background-size: 70% auto;
}
.sphone #charaCont #txtArea .txtCont h2 {
	padding-bottom: 3%;
	font-size: 3.2em;
}
.sphone #charaCont #txtArea .txtCont h3 {
	margin-top: 2%;
	font-size: 1.25em;
}
.sphone #charaCont #txtArea .txtCont h4 {
	margin-top: 6%;
	line-height: 1.4em;
	font-size: 1.2em;
}
.sphone #charaCont #txtArea .txtCont .txt {
	margin-top: 4%;
	line-height: 1.8em;
}
.sphone #charaLogo {
	position: absolute;
	right: 2vw;
	bottom: -5vw;
	width: 30vw;
}
.sphone #charaLogo>div {
	height: 30vw;
}


/* -------------------------------------------------------------------------- */
/* #pager */
#charaOver #pager {
	position: absolute;
	z-index: 202;
	width: 100%;
}
#charaOver #pager li {
	cursor: pointer;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: auto 50%;
	border: #191919 1px solid;
	transition: all 200ms 0s ease-out;
}
#charaOver #pager .back,#charaOver #pager .next {
	background-image: url("../images/arrow.png");
	background-position: 40% center;
}
#charaOver #pager .next {
	transform: scale(-1, 1);
}
#charaOver #pager .close {
	background-image: url("../images/close.png");
	background-position: center center;
}
/* ----------------------------- */
body:not(.sphone) #charaOver #pager li {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}
body:not(.sphone) #charaOver #pager li:hover {
	opacity: .5;
}
/* ----------------------------- */
.pc #charaOver #pager .back,.pc #charaOver #pager .next {
	top: 2vh;
}
.pc #charaOver #pager .back {
	left: -30px;
}
.pc #charaOver #pager .next {
	right: -30px;
}
.pc #charaOver #pager .close {
	top: -60px;
	right: -40px;
}
/* ----------------------------- */
.tablet #charaOver #pager .back,.tablet #charaOver #pager .next {
	top: -2vh;
}
.tablet #charaOver #pager .back {
	left: 0;
}
.tablet #charaOver #pager .next {
	right: 0;
}
.tablet #charaOver #pager .close {
	top: -6vw;
	left: 0;
	right: 0;
	margin: auto;
}
/* ----------------------------- */
.sphone #charaOver #pager {
	left: 0;
	top: -12vw;
	width: 100%;
	text-align: center;
	letter-spacing: -.4em;
}
.sphone #charaOver #pager li {
	width: 2.6em;
	height: 2.6em;
	border-radius: 1.3em;
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
.sphone #charaOver #pager li:not(:last-child) {
	margin-right: 3vw;
}


body:not(.sphone) h1 {
	margin-bottom: 5rem;
}
.sphone h1 {
	margin-bottom: 10%;
}

/* -------------------------------------------------------------------------- */
/* -- .contArea -- */
/*読み込み時の表示エリア*/
body:not(.tablet) article .contArea:not(:first-of-type) {
	opacity: 0;
	transform: translate(0, 20px);
}
.tablet article .contArea:nth-of-type(n+3) {
	opacity: 0;
	transform: translate(0, 20px);
}
body:not(.tablet) article .contArea:not(:first-of-type).motion,.tablet article .contArea:nth-of-type(n+3).motion {
	animation: anime2 .7s cubic-bezier(.52,.07,.46,.86) forwards;
}
@keyframes anime2 {
	0%    {
		opacity: 0;
		transform: translate(0, 20px);
	}
	100%  {
		opacity: 1;
		transform: translate(0, 0);
	}
}

article .contArea h2 {
	text-align: center;
}

article .contArea .list {
	position: relative;
	text-align: center;
	letter-spacing: -.4em;
}
article .contArea .list li {
	position: relative;
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
article .contArea .list li::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #979797;
}
article .contArea .list li p {
	position: relative;
	z-index: 5;
	overflow: hidden;
	cursor: pointer;
}
article .contArea .list li p::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	transition: all .4s ease-out;
}
article .contArea .list li p:hover::before,
article .contArea .list li p:focus::before {
	right: -50%;
}
article .contArea .list li p span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
article .contArea .list li p span.charaImg2 {
	opacity: 0;
	transition: all .2s ease-in;
}
article .contArea .list li p span.charaImg2:hover,
article .contArea .list li p span.charaImg2:focus {
	opacity: 1;
}

/* ----------------------------- */
body:not(.sphone) article .contArea {
	padding: 2rem 0 3rem;
}
body:not(.sphone) article .contArea h2 img {
	width: 320px;
	height: auto;
}
body:not(.sphone) article .contArea .list {
	margin-top: 2rem;
}
body:not(.sphone) article .contArea .list li {
	width: 19.4%;
}
body:not(.sphone) article .contArea .list li::after {
	right: -4px;
	bottom: -4px;
}
body:not(.sphone) article .contArea .list li:not(:last-child) {
	margin-right: .75%;
}
body:not(.sphone) article .contArea .list li p {
	height: 0;
	padding-top: 157%;
}

/* ----------------------------- */
.pc article .contArea .list {
	width: 67rem;
	/*width: 1114px;*/
	margin-left: auto;
	margin-right: auto;
}
.pc article .contArea .list li p::before {
	border-width: 0 0 340px 150px;
}
/* ----------------------------- */
.tablet article .contArea .list {
	margin-left: 4%;
	margin-right: 4%;
}
.tablet article .contArea .list li p::before {
	border-width: 0 0 28vw 14vw;
}
/* ----------------------------- */
.sphone article .contArea {
	padding: 5% 2% 8%;
}
.sphone article .contArea h2 img {
	width: 60%;
	height: auto;
}
.sphone article .contArea .list {
	margin-top: 3%;
}
.sphone article .contArea .list li {
	width: 32%;
	margin-top: 2%;
}
.sphone article .contArea .list li::after {
	right: -3px;
	bottom: -3px;
}
.sphone article .contArea .list li:not(:nth-child(3n)) {
	margin-right: 2%;
}
.sphone article .contArea .list li p {
	height: 0;
	padding-top: 157%;
}
.sphone article .contArea .list li p::before {
	border-width: 0 0 49vw 21vw;
}