/* ----------------------------------
　
　The National Career Cluster® Framework
　※画像説明付きアコーディオン 

----------------------------------- */

/* -- main ------------------------ */

.accordion-image {
	overflow: hidden;
	min-height: 420px;
	margin-bottom: 40px;
}
@media screen and (max-width: 1180px){
	.accordion-image {
		overflow-x: hidden;
		min-height: 420px;
	}
}
@media screen and (max-width: 1100px){
	.accordion-image {
		overflow-x: hidden;
		min-height: 41vw;
	}
}

.accordion-image > .image {
	/* Cluster図 */
	width: 45%;
	float: left;
	position: relative;
}

.accordion-image > .image > p,
.accordion-image > .image > dl {
	position: absolute;
}

.accordion-image > section {
	width: 53%;
	float: right;
}

@media screen and (max-width: 700px){

	.accordion-image > .image {
		width: 100%;
		float: none;
		min-height: 85vw;
	}

	.accordion-image > section {
		width: 100%;
		float: none;
	}
}

/* -- 
　Article Layout
------------------------------------*/

/* --
  inactive
----- */

.accordion-image .article {
	display: block;
	width: 100%;
	height: auto;
	text-decoration: none;
	background-image: repeating-linear-gradient(0deg, #7B6951, #7B6951 5px, transparent 5px, transparent 10px, #7B6951 10px), 
	repeating-linear-gradient(90deg, #7B6951, #7B6951 5px, transparent 5px, transparent 10px, #7B6951 10px), 
	repeating-linear-gradient(180deg, #7B6951, #7B6951 5px, transparent 5px, transparent 10px, #7B6951 10px), 
	repeating-linear-gradient(270deg, #7B6951, #7B6951 5px, transparent 5px, transparent 10px, #7B6951 10px);
	background-size: 2px calc(100% + 10px), calc(100% + 10px) 2px, 2px calc(100% + 10px) , calc(100% + 10px) 2px;
	background-position: 0 0, 0 0, 100% 0, 0 100%;
	background-repeat: no-repeat;
	margin-bottom: 20px;
	padding: 1px;
}

.accordion-image .article >h4 {
	cursor: pointer;
	padding: 15px;
	background-color: #7B6951;
	margin: 3px;
	color: #fff;
}
.accordion-image .article > .exp {
	height: 0px;
	overflow: hidden;
	padding: 0x 15px 0px;
	transition: all 0.3s ease;
}


/* -- mouse hover --  */

.accordion-image .article:hover{ /*- 点線アニメーション -*/
	animation: borderAnimation 0.6s infinite linear;
}

@keyframes borderAnimation {
	from { background-position: 0 0, -20px 0, 100% -20px, 0 100%; }
	to { background-position: 0 -20px, 0 0, 100% 0, -20px 100%; }
}

/* --
  active
----- */

.accordion-image .article.active { /*- 実線に変更 -*/
	background-image: repeating-linear-gradient(0deg, #7B6951, #7B6951 5px, transparent 5px, transparent 5px, #7B6951 5px), 
	repeating-linear-gradient(90deg, #7B6951, #7B6951 5px, transparent 5px, transparent 5px, #7B6951 5px), 
	repeating-linear-gradient(180deg, #7B6951, #7B6951 5px, transparent 5px, transparent 5px, #7B6951 5px), 
	repeating-linear-gradient(270deg, #7B6951, #7B6951 5px, transparent 5px, transparent 5px, #7B6951 5px);
	background-size: 1px calc(100% + 5px), calc(100% + 5px) 1px, 1px calc(100% + 5px) , calc(100% + 5px) 1px;
}

.accordion-image .article:hover.active {
	animation:  none;
}

.accordion-image .article.active > .exp {
	height: auto;
	padding: 5px 15px 15px;
}

/* -- graph common ----------------*/

.accordion-image > .image > dl > div {
	position: relative;
}

.accordion-image > .image > dl > div > dd {
	position: absolute;
}

/* --
	1. Cluster_Grouping
-- */

.accordion-image > .image > .Cluster_Grouping {
	display: none;
}

.accordion-image > .image > dl > div.cluster_grouping > dd {
	width: 30.4%;
	top: 50%;
	left: 50%;
	transform: translate(-50.5%, -50.5%);
}

.accordion-image > .image > dl > div.cluster_grouping > dd.on {
	animation: cg-Animation01 0.3s ease-out;
	animation-fill-mode:forwards;
}

@keyframes cg-Animation01 { /*- バウンドアニメーション -*/
	from{ width: 30%; }
	60%, 80% {width: 70%;}
	70% {width: 65%;}
	90% {width: 75%;}
	to {width: 70%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));}
}

/* --
	2. Career_Cluster
-- */

/* -- Graph ---------  */

.accordion-image > .image > .Career_Cluster {
	display: none;
}

.accordion-image > .image > .Career_Cluster > div > dd {
	transform: translateX(-50%);
	display: block;
	z-index: 5;
}

.accordion-image > .image > .Career_Cluster > div > dd.group01 {
	width: 20.7%;
	top: 3.1%;
	left: 50%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group01.on {
	animation: cc-Animation01 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation01 { /*- バウンドアニメーション -*/
	from{ width: 20.7%; }
	60%, 80% {width: 55%;}
	70% {width: 50%;}
	90% {width: 60%;}
	to {width: 55%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 53%;left: 50%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group02 {
	width: 25.4%;
	top: 4.5%;
	left: 66.2%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group02.on {
	animation: cc-Animation02 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation02 { /*- バウンドアニメーション -*/
	from{ width: 25.4%; }
	60%, 80% {width: 65%;}
	70% {width: 60%;}
	90% {width: 70%;}
	to {width: 65%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 50%;left: 55%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group03 {
	width: 32.3%;
	top: 13.7%;
	left: 75.9%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group03.on {
	animation: cc-Animation03 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation03 { /*- バウンドアニメーション -*/
	from{ width: 32.3%; }
	60%, 80% {width: 82%;}
	70% {width: 82%;}
	90% {width: 87%;}
	to {width: 82%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 44%;left: 50%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group04 {
	width: 32.8%;
	top: 29.7%;
	left: 80.2%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group04.on {
	animation: cc-Animation04 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation04 { /*- バウンドアニメーション -*/
	from{ width: 32.8%; }
	60%, 80% {width: 85%;}
	70% {width: 85%;}
	90% {width: 90%;}
	to {width: 85%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 42%;left: 50%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group05 {
	width: 32.8%;
	top: 49.7%;
	left: 80.2%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group05.on {
	animation: cc-Animation05 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation05 { /*- バウンドアニメーション -*/
	from{ width: 32.8%; }
	60%, 80% {width: 85%;}
	70% {width: 85%;}
	90% {width: 90%;}
	to {width: 85%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 58%;left: 48%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group06 {
	width: 32.3%;
	top: 56.3%;
	left: 75.9%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group06.on {
	animation: cc-Animation06 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation06 { /*- バウンドアニメーション -*/
	from{ width: 32.3%; }
	60%, 80% {width: 82%;}
	70% {width: 82%;}
	90% {width: 87%;}
	to {width: 82%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 54%;left: 53%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group07 {
	width: 25.7%;
	top: 62%;
	left: 66.5%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group07.on {
	animation: cc-Animation07 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation07 { /*- バウンドアニメーション -*/
	from{ width: 25.7%; }
	60%, 80% {width: 65%;}
	70% {width: 60%;}
	90% {width: 70%;}
	to {width: 65%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 50%;left: 56%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group08 {
	width: 20.7%;
	top: 64.8%;
	left: 50%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group08.on {
	animation: cc-Animation08 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation08 { /*- バウンドアニメーション -*/
	from{ width: 20.7%; }
	60%, 80% {width: 55%;}
	70% {width: 50%;}
	90% {width: 60%;}
	to {width: 55%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 48%;left: 50%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group09 {
	width: 25.7%;
	top: 62%;
	left: 33.8%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group09.on {
	animation: cc-Animation09 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation09 { /*- バウンドアニメーション -*/
	from{ width: 25.7%; }
	60%, 80% {width: 65%;}
	70% {width: 60%;}
	90% {width: 70%;}
	to {width: 65%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 52%;left: 44%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group10 {
	width: 32.3%;
	top: 56.3%;
	left: 24%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group10.on {
	animation: cc-Animation10 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation10 { /*- バウンドアニメーション -*/
	from{ width: 32.3%; }
	60%, 80% {width: 82%;}
	70% {width: 82%;}
	90% {width: 87%;}
	to {width: 82%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 54%;left: 47%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group11 {
	width: 32.8%;
	top: 49.7%;
	left: 19.8%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group11.on {
	animation: cc-Animation11 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation11 { /*- バウンドアニメーション -*/
	from{ width: 32.8%; }
	60%, 80% {width: 85%;}
	70% {width: 85%;}
	90% {width: 90%;}
	to {width: 85%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 57%;left: 52%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group12 {
	width: 32.9%;
	top: 29.7%;
	left: 19.7%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group12.on {
	animation: cc-Animation12 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation12 { /*- バウンドアニメーション -*/
	from{ width: 32.9%; }
	60%, 80% {width: 85%;}
	70% {width: 85%;}
	90% {width: 90%;}
	to {width: 85%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 44%;left: 52%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group13 {
	width: 32.3%;
	top: 13.5%;
	left: 24.2%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group13.on {
	animation: cc-Animation13 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation13 { /*- バウンドアニメーション -*/
	from{ width: 32.3%; }
	60%, 80% {width: 82%;}
	70% {width: 82%;}
	90% {width: 87%;}
	to {width: 82%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 45%;left: 47%;transform: translate(-50.5%, -50.5%);}
}

.accordion-image > .image > .Career_Cluster > div > dd.group14 {
	width: 25.4%;
	top: 4.5%;
	left: 33.8%;
}

.accordion-image > .image > .Career_Cluster > div > dd.group14.on {
	animation: cc-Animation14 0.3s ease-out;
	animation-fill-mode:forwards;
	z-index: 10;
}

@keyframes cc-Animation14 { /*- バウンドアニメーション -*/
	from{ width: 25.4%; }
	60%, 80% {width: 65%;}
	70% {width: 60%;}
	90% {width: 70%;}
	to {width: 65%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));top: 50%;left: 44%;transform: translate(-50.5%, -50.5%);}
}

/* --
	3. sub_Cluster
-- */

/* -- Graph ---------  */

.accordion-image > .image > .sub_Cluster {
	display: none;
}


/* --
	4. Cross_Cutting_Cluster
-- */

/* -- Graph ---------  */

.accordion-image > .image > .Cross_Cutting_Cluster {
	display: none;
}

.accordion-image > .image > .Cross_Cutting_Cluster > div > dd {
	display: none;
	width: 30.4%;
	top: 50%;
	left: 50%;
	transform: translate(-50.5%, -50.5%);
}

.accordion-image > .image > dl.Cross_Cutting_Cluster > div > dd.on {
	display: block;
	animation: ccc-Animation01 0.3s ease-out;
	animation-fill-mode:forwards;
}

@keyframes ccc-Animation01 { /*- バウンドアニメーション -*/
	from{ width: 30%; }
	60%, 80% {width: 90%;}
	70% {width: 85%;}
	90% {width: 95%;}
	to {width: 90%;filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));}
}

/* -- exp ---------  */

.article[data-area="Career_Cluster"] .exp > ul > li {
	cursor: pointer;
	padding: 5px;
	border-bottom: dotted 1px #ccc;
	padding-left: 2em;
	text-indent: -2em;
	font-size: 95%;
}
@media screen and (max-width: 1180px){
	.article[data-area="Career_Cluster"] .exp > ul > li {
		font-size: 1.3vw;
	}
}

@media screen and (max-width: 700px){
	.article[data-area="Career_Cluster"] .exp > ul > li {
		font-size: 2.5vw;
		padding-left: 2.5em;
		text-indent: -2.5em;
	}
}


/* -- Hover  --------------*/

.article[data-area="Career_Cluster"] .exp > ul > li:hover {
	background: #f1f1f1;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(1):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(2):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(3):hover{
	background: #FCE9E0;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(4):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(5):hover {
	background: #F8EAF1;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(6):hover {
	background: #FAEECD;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(7):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(8):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(9):hover {
	background: #E2F3FC;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(10):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(11):hover {
	background: #F6FBF3;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(12):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(13):hover,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(14):hover {
	background: #EFDFED;
}

/* -- click  --------------*/

.article[data-area="Career_Cluster"] .exp > ul > li.on {
	background: #f1f1f1;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(1).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(2).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(3).on {
	background: #F7CAB3;
	color: #AD5C4B;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(4).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(5).on {
	background: #F4D9E8;
	color: #8A2F5D;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(6).on {
	background: #FADEA3;
	color: #8E6434;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(7).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(8).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(9).on {
	background: #9BDBF3;
	color: #0D4752;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(10).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(11).on {
	background: #DFEED3;
	color: #38592A;
}

.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(12).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(13).on,
.article[data-area="Career_Cluster"] .exp > ul > li:nth-child(14).on {
	background: #D0C8D8;
	color: #7F3F98;
}

.article[data-area="Career_Cluster"] .exp > ul > li > .arrow {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	line-height: 1;
	width: 1em;
	height: 1em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(25%) rotate(-135deg);
	margin-left: 10px;
}

@media screen and (max-width: 700px){
	.article[data-area="Career_Cluster"] .exp > ul > li > .arrow {
		display: inline-block;
		vertical-align: middle;
		color: #333;
		line-height: 1;
		width: 1em;
		height: 1em;
		border: 0.1em solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateY(25%) rotate(-45deg);
		margin-right: 10px;
	}
}