@charset "UTF-8";

@media screen and (min-width: 760px) {

	.content {
		text-align: left;
	}

	.mgb-none {
		margin-bottom: 0 !important;
	}

	.noWrap {
		white-space: nowrap;
	}

	.zoom_img {
		display: block;
		text-align: center;
	}

	/* .content-section
------------------------------------------------------------------- */
	figure.section-left,
	figure.section-right {
		padding-top: 9px;
	}

	.content-section p.no-indent {
		text-indent: 0;
	}

	.content-section p.relation-link {
		margin-top: -20px;
		text-indent: 0;
	}

	.content-section p.relation-link a {
		display: inline-block;
		position: relative;
		min-height: 17px;
		padding-left: 30px;
	}

	.content-section p.relation-link a:before {
		display: block;
		content: '';
		position: absolute;
		width: 17px;
		height: 17px;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto 0;
		background: url(../../common/img/sprite.png) -100px -100px;
	}

	/* section-title
------------------------------------------------------------------- */
	.article-title {
		background: url(../img/common/bg_dot.gif);
		border-radius: 16px;
		margin-left: auto;
		margin-right: auto;
		background-repeat: repeat;
		width: 100%;
		max-width: 960px;
	}

	.article-title span.break_point {
		display: inline-block;
	}

	.section-title {
		margin: 0 auto 27px;
		padding: 0 20px 9px 20px;
		font-weight: bold;
		font-size: 20px;
		line-height: 30px;
		background: url(../img/common/section-title_bg.gif) no-repeat left bottom;
	}

	.section-title small {
		font-size: 14px;
		line-height: 21px;
		vertical-align: middle;
	}

	.section-sub-title {
		padding-top: 3px;
		margin-bottom: 15px;
		font-size: 18px;
		font-weight: bold;
		color: #6e73c7;
	}

	.float-img-left {
		padding-top: 9px;
		margin-right: 50px;
	}

	.float-img-right {
		padding-top: 9px;
		margin-left: 50px;
	}

	.case-wrap {
		padding: 30px 25px 10px;
		margin-top: 30px;
		margin-bottom: 40px;
		border-radius: 10px;
		background: #f5f5f5;
		box-sizing: border-box;
	}

	/* ==========================================================================
		design
============================================================================= */

	.category-header h1 .sub-title {
		letter-spacing: .325em;
	}

	.category-header.none-category-nav_special .category-nav_special {
		display: none !important;
	}

	.category-footer.none-category-nav_special .category-nav_special {
		display: none !important;
	}

	.category-nav {
		align-items: stretch;
	}

	.category-nav li {
		font-size: 12px;
		height: auto;
		line-height: 1.4;
		text-align: center;
	}

	.category-nav li span {
		display: inline-block;
	}

	.category-nav li a:hover {
		color: #6e73c7 !important;
	}

	.category-nav li.is-active,
	.category-nav li.is-active a {
		color: #6e73c7 !important;
	}

	.category-nav li.is-active:after {
		top: 42px;
		z-index: 1;
	}

	.category-title--design {
		background-image: url(../img/common/bg_dot.gif);
	}

	.content-title--design {
		border-color: #6e73c7;
	}

	.content-title--design .content-intro {
		border-color: #6e73c7;
	}

	.content-title--design .sub-title {
		background: #6e73c7;
	}

	.content-title--design .sub-title::after {
		border-top: 10px solid #6e73c7;
	}

	.category-nav-line2 {
		display: none;
	}

	.category-nav.category-nav_special {
		height: 50px;
		justify-content: flex-end;
		margin-bottom: 25px;
		align-items: flex-start;
	}

	.category-nav.category-nav_special a {
		background: #6fad0c;
		border-radius: 2px;
		color: #fff !important;
		font-size: 13px;
		letter-spacing: .25em;
		line-height: 1.2;
		padding: 4px 10px 4px 18px;
	}

	.category-nav.category-nav_special a:hover {
		background: #83cc0e;
	}

	.add-category-nav_special .category-nav {
		margin-bottom: 0;
	}

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

		.category-nav li {
			letter-spacing: .05em;
		}

		.category-nav-line2 {
			display: block;
		}

	}

	/* ==========================================================================
		Work（index）
============================================================================= */

	.category-top-title {
		letter-spacing: .25em;
		border-color: #6e73c7;
	}

	.category-top-title .sub-title {
		color: #6e73c7;
		font-size: 14px;
		letter-spacing: .1em;
	}

	.category-title .sub-title {
		color: #fff;
		font-size: 14px;
		letter-spacing: .1em;
	}

	#top-lead {
		margin: 25px auto 40px;
		max-width: 830px;
		padding-left: 20px;

	}
	.top-lead-text span {
		display: inline-block;
	}
	.top-lead-box {
		margin: 1.3em;
	}
	.top-lead-list {
		margin-top: 1em;
		margin-right: -1em;
		text-indent: -1.3em;
		padding-right: 0;
	}

	.top-lead-item span {
		color: #6e73c7;
		font-weight: bold;
	}
	.top-lead-item a:hover span {
		opacity:0.7;
	}
	.top-lead-item::before {
		content: "";
		border-radius: 50%;
		width: 13px;
		height: 13px;
		display: inline-block;
		background-color: #6e73c7;
		opacity: 0.5;
		margin-right: 0.3em;
	}

	#work-title h1 {
		height: 114px;
	}

	#work-lead {
		margin: 37px auto 40px;
	}

	#work-lead .wl-policy p {
		display: table-cell;
		vertical-align: middle;
		font-size: 14px;
		line-height: 1.5;
		height: 90px;
		padding: 10px 10px 10px 224px;
	}

	#work-index {
		height: auto;
		padding: 114px 0 24px;
		background-image: url(../img/common/bg_dot.gif);
	}
	
	#work-index .content-wrap {
		max-width: 1200px;
	}

	#work-index .work-index-grid,
	#work-index .artwork-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
		width: 95%;
		margin: 0 auto;
	}

	@media screen and (max-width: 959px) {
		#work-index .wi-list,
		#work-index .wi-list-sub {
			width: 100%;
		}
	}

	#work-index .wi-list.wi-hardware {
		height: 222px;
	}

	#work-index .wi-list.wi-art {
		height: 242px;
	}

	#work-index .wi-list-block.wi-art {
		padding-bottom: 14px;
	}

	#work-index .wi-hardware {
		margin-bottom: 9px;
	}

	#work-index .wi-soft,
	#work-index .wi-hardware,
	#work-index .wi-art{
		padding-top: 74px;
		margin-top: -74px;
		margin-bottom: 90px;
	}
	#work-index .wi-art {
		margin-bottom: inherit;
	}
	@media screen and (max-width: 979px) {
		#work-index .wi-soft,
		#work-index .wi-hardware,
		#work-index .wi-art {
			padding-top: 44px;
			margin-top: -44px;
		}
	}

	#work-index .wi-soft dt,
	#work-index .wi-hardware dt,
	#work-index .wi-art dt {
		color: #fff;
		font-size: 22px;
		font-weight: bold;
		letter-spacing: .125em;
		line-height: 3;
		margin:0 0 50px;
		text-align: center;
		background-color: #5352a1;
		border-radius: 4px;
		padding: 7px;
	}

	#work-index .wi-soft dt {
		margin-bottom: 50px;
	}
	#work-index .wi-art dt {
		margin-bottom: 50px;
	}

	#work-index .wi-list dd {
		margin: 0 auto 10px;
		width: 100%;
	}

	#work-index .wi-list-sub dd {
		width: 100%;
	}

	#work-index .wi-list dd a {
		display: block;
		height: 110px;
	}


	#work-index .wi-list-sub dd.wi-stage a,
	#work-index .wi-list-sub dd.wi-character a,
	#work-index .wi-list-sub dd.wi-gui a,
	#work-index .wi-list-sub dd.wi-effect a,
	#work-index .wi-list-sub dd.wi-cut a,
	#work-index .wi-list-sub dd.wi-cgsp a,
	#work-index .wi-list .wi-product a,
	#work-index .wi-list .wi-graphic a,
	#work-index .wi-list .wi-illust a,
	#work-index .wi-list .wi-edcg a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 110px;
		background-color: #ebecfa;
		border-radius: 4px;
	}

	#work-index .wi-list-sub dd.wi-stage a,
	#work-index .wi-list-sub dd.wi-character a,
	#work-index .wi-list-sub dd.wi-cg p a,
	#work-index .wi-list-sub dd.wi-gui a,
	#work-index .wi-list-sub dd.wi-effect a,
	#work-index .wi-list-sub dd.wi-cut a,
	#work-index .wi-list-sub dd.wi-cgsp a,
	#work-index .wi-list .wi-product a,
	#work-index .wi-list .wi-graphic a,
	#work-index .wi-list .wi-illust a,
	#work-index .wi-list .wi-edcg a{
		position: relative;
	}


	#work-index .wi-list-sub dd.wi-stage a span,
	#work-index .wi-list-sub dd.wi-character a span,
	#work-index .wi-list-sub dd.wi-cg p a span,
	#work-index .wi-list-sub dd.wi-gui a span,
	#work-index .wi-list-sub dd.wi-effect a span,
	#work-index .wi-list-sub dd.wi-cut a span,
	#work-index .wi-list-sub dd.wi-cgsp a span,
	#work-index .wi-list .wi-product a span,
	#work-index .wi-list .wi-graphic a span,
	#work-index .wi-list .wi-illust a span,
	#work-index .wi-list .wi-edcg a span {
		color: #333;
		font-size: clamp(15px,1.8vw,20px);
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 1.2;
		padding-left: 13.75%;
		text-align: center;
	}

	#work-index .wi-list .wi-product a span {
		padding-left: 5.75%;

	}

	#work-index .wi-list-sub dd.wi-stage a:hover span,
	#work-index .wi-list-sub dd.wi-character a:hover span,
	#work-index .wi-list-sub dd.wi-gui a:hover span,
	#work-index .wi-list-sub dd.wi-effect a:hover span,
	#work-index .wi-list-sub dd.wi-cut a:hover span,
	#work-index .wi-list-sub dd.wi-cgsp a:hover span,
	#work-index .wi-list .wi-product a:hover span,
	#work-index .wi-list .wi-graphic a:hover span,
	#work-index .wi-list .wi-illust a:hover span,
	#work-index .wi-list .wi-edcg a:hover span {
		color: #6e73c7;
	}

	#work-index .wi-list-sub dd.wi-stage a span::after,
	#work-index .wi-list-sub dd.wi-character a span::after,
	#work-index .wi-list-sub dd.wi-gui a span::after,
	#work-index .wi-list-sub dd.wi-effect a span::after,
	#work-index .wi-list-sub dd.wi-cut a span::after,
	#work-index .wi-list-sub dd.wi-cgsp a span::after,
	#work-index .wi-list .wi-product a span::after,
	#work-index .wi-list .wi-graphic a span::after,
	#work-index .wi-list .wi-illust a span::after,
	#work-index .wi-list .wi-edcg a span::after {
		position: absolute;
		display: block;
		content: '';
		width: 30px;
		height: 30px;
		top: 0;
		right: 20px;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_white.svg);
	}
	#work-index .wi-list .wi-product a span::after {
		right: 20px;
	}

	#work-index .wi-list-sub dd.wi-stage a:hover,
	#work-index .wi-list-sub dd.wi-character a:hover,
	#work-index .wi-list-sub dd.wi-gui a:hover,
	#work-index .wi-list-sub dd.wi-effect a:hover,
	#work-index .wi-list-sub dd.wi-cut a:hover,
	#work-index .wi-list-sub dd.wi-cgsp a:hover,
	#work-index .wi-list .wi-product a:hover,
	#work-index .wi-list .wi-graphic a:hover,
	#work-index .wi-list .wi-illust a:hover,
	#work-index .wi-list .wi-edcg a:hover {
		opacity: 0.8;
		color: #676de1;
	}

	#work-index .wi-list-sub .wi-stage a {
		background-image: url(../img/top/index_stage_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list-sub .wi-character a {
		background-image: url(../img/top/index_character_btn.png);
		background-repeat: no-repeat;
	}


	#work-index .wi-list-sub .wi-cg {
		height: 228px;
		position: relative;
	}

	#work-index .wi-list-sub .wi-cg p a {
		height: 110px;
		align-items: center;
		display: flex;
		justify-content: flex-start;
		background-color: #ebecfa;
		background-image: url(../img/top/index_cg_btn.png);
		background-repeat: no-repeat;
		border-radius: 4px 4px 0 0;
	}

	#work-index .wi-list-sub .wi-cg .sub ul {
		background: #fff;
		border-radius: 0 0 4px 4px;
		padding: 10px 0;
	}

	#work-index .wi-list-sub .wi-cg .sub li+li {
		margin-top: 8px
	}

	#work-index .wi-list-sub .wi-cg .sub li a {
		display: block;
		height: 26px;
	}

	#work-index .wi-list-sub .wi-cg .sub li.wi-cg01 a,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg02 a,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg03 a {
		align-items: center;
		display: flex;
		justify-content: flex-start;
	}

	#work-index .wi-list-sub .wi-cg .sub li.wi-cg01 a span,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg02 a span,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg03 a span {
		color: #333;
		font-weight: bold;
		letter-spacing: .175em;
		margin-left: 37.5%;
		padding-left: 6.25%;
		position: relative;
	}

	#work-index .wi-list-sub .wi-cg .sub li.wi-cg01 a span:hover,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg02 a span:hover,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg03 a span:hover {
		color: #6e73c7;
	}

	#work-index .wi-list-sub .wi-cg .sub li.wi-cg01 a span::before,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg02 a span::before,
	#work-index .wi-list-sub .wi-cg .sub li.wi-cg03 a span::before {
		position: absolute;
		display: block;
		content: '';
		width: 22px;
		height: 22px;
		left: -10px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_gray.svg);
	}

	#work-index .wi-list-sub .wi-gui a {
		background-image: url(../img/top/index_ui_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list-sub .wi-effect a {
		background-image: url(../img/top/index_effect_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list-sub .wi-cut a {
		background-image: url(../img/top/index_cut_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list-sub .wi-cgsp a {
		background-image: url(../img/top/index_cgsp_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list .wi-product a {
		background-image: url(../img/top/index_product_btn.png);
		background-repeat: no-repeat;
		width: 75%;
		margin: 0 auto;
		
	}

	#work-index .wi-list .wi-graphic a {
		background-image: url(../img/top/index_graphic_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list .wi-illust a {
		background-image: url(../img/top/index_illust_btn.png);
		background-repeat: no-repeat;
	}

	#work-index .wi-list .wi-edcg a {
		background-image: url(../img/top/index_3dcg_btn.png);
		background-repeat: no-repeat;
	}

	/* ==========================================================================
		Work1
============================================================================= */

	#work1-title {
		margin-bottom: 30px;
	}

	.cg-pagenation {
		margin: 0 auto 40px;
		text-align: right;
		width: 100%;
		max-width: 960px;
	}

	.cg-pagenation:after {
		content: "";
		display: block;
		clear: both;
	}

	.cg-pagenation li.prev,
	.cg-pagenation li.next {
		display: inline-block;
	}

	.cg-pagenation li a {
		display: block;
		padding: 6px 40px 4px;
		font-weight: bold;
		position: relative;
	}

	.cg-pagenation li.prev a {
		padding-right: 20px;
	}

	.cg-pagenation li.next a {
		padding-left: 20px;
	}

	.cg-pagenation li.pager-num {
		display: inline-block;
		margin: 0px auto 4px;
		text-align: right;
		vertical-align: middle;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}

	.cg-pagenation li.pager-num ul li {
		float: left;
	}

	.cg-pagenation li.pager-num a,
	.cg-pagenation li.pager-num span {
		display: block;
		padding: 0 10px;
		line-height: 1.3;
		vertical-align: middle;
	}

	.cg-pagenation li a:before {
		content: "";
		display: block;
		width: 28px;
		height: 28px;
		background: url(../img/common/icon-arrow.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.cg-pagenation li.prev a:before {
		left: 0;
		transform: rotate(180deg);
	}

	.cg-pagenation li.next a:before {
		right: 0;
	}

	.cg-pagenation li.pager-active span {
		color: #afafaf !important;
	}

	.cg-pagenation li.pager-num a:before {
		display: none;
	}

	#work1-about .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work1-character,
	#work1-animation {
		margin-bottom: 40px;
		margin-top: -108px;
		padding-top: 108px;
	}

	#work1-about .section-left {
		margin-right: 5%;
		width: 45%;
	}

	#work1-about .section-left a {
		display: block;
	}

	#work1-about .section-left img {
		margin-bottom: 0;
	}

	#work1-about .section-right {
		width: 50%;
	}

	#work1-character h3.section-title {
		margin-top: min(2vw, 34px);
	}

	#work1-character .pc-center-image {
		width: 626px;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 54px;
	}

	#work1-character .pc-center-image.three {
		display: flex;
		gap: 15px;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 54px;
	}

	#work1-character :after {
		content: "";
		display: block;
		clear: both;
	}

	#work1-character .pc-center-image a {
		float: left;
		display: block;
		width: 293px;
		margin: 0 10px 34px;
	}

	#work1-character .pc-center-image.three a {
		display: block;
		margin: 0 auto 34px auto;
	}

	#work1-character figure img {
		margin-right: 0;
		margin-bottom: 0;
	}

	#work1-animation figure {
		margin: 0 auto 20px;
		max-width: 920px;
	}

	/* each case */
	#work1-character .case-example--3 a:first-child {
		display: block;
		width: 692px;
		margin: 0 auto 20px;
		text-align: center;
	}

	#work1-animation .case-example figure {
		display: block;
		text-align: center;
	}

	.list-image {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.list-image li {
		width: calc(100% / 3 - 10px);
	}

	.list-image li figure {
		width: auto;
		max-width: 100%;
		margin-bottom: 0 !important;
	}

	.list-image li figure a {
		width: auto !important;
		margin: 0 !important;
	}

	.list-image li figure img {
		width: 100%;
		height: auto;
	}

	.section-sub-title+.list-image,
	.section-sub-title+figure {
		padding-top: 10px;
	}

	.list-margin>li {
		margin-bottom: 48px;
	}

	#work1-animation .video_area {
		text-align: center;
	}

	#work1-animation .video_area video {
		width: 640px;
		height: 360px;
	}

	/* ==========================================================================
		Work2
============================================================================= */

	#work2-title {
		margin-bottom: 30px;
	}

	#work2-title h1 {
		height: 114px;
	}

	#work2-about .section-left {
		width: 460px;
	}

	#work2-about .section-left a {
		display: block;
	}

	#work2-about .section-left img {
		margin-bottom: 0;
	}

	#work2-about .section-right {
		width: 420px;
	}

	#work2-stage {
		margin-bottom: 40px;
		margin-top: -108px;
		padding-top: 108px;
	}

	#work2-stage .pc-center-image {
		width: 626px;
		margin: 0 auto 44px;
		text-align: center;
	}

	#work2-stage .pc-center-image a {
		float: left;
		display: block;
		margin: 0 10px 20px;
	}

	#work2-stage figure a img,
	#work2-movie figure a img {
		margin-right: 0;
		margin-bottom: 0;
	}

	#work2-movie .pc-center-image {
		width: 626px;
		margin: 0 auto 44px;
		text-align: center;
		overflow: hidden;
	}

	#work2-movie .pc-center-image a {
		float: left;
		display: block;
		margin: 0 10px 20px;
	}

	#work2-stage figure img {
		margin-bottom: 20px;
	}

	#work2-stage figure {
		margin-bottom: 0;
	}

	#work2-stage figure.stage-lead-image {
		margin-bottom: 34px;
	}

	#work2-stage figure:after {
		content: "";
		display: block;
		clear: both;
	}

	#work2-movie {
		margin-bottom: 40px;
	}

	#work2-movie .section-left {
		width: 528px;
	}

	#work2-movie .section-right {
		width: 365px;
		text-align: left;
	}

	#work2-movie .section-right img {
		margin-bottom: 10px;
	}

	#work2-movie .section-right a img {
		margin-bottom: 0;
	}

	#work2-movie .section-right a {
		display: block;
		margin-bottom: 10px;
	}

	#work2-aware {
		margin-bottom: 30px;
	}

	#work2-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	/* ==========================================================================
		Work3
============================================================================= */


	#work3-title {
		margin-bottom: 30px;
	}

	#work3-title h1 {
		height: 114px;
	}

	#work3-about,
	#work3-role,
	#work3-important,
	#work3-important .content-section--2,
	#work3-important .content-section--3,
	#work3-important .content-section--4,
	#work3-important .content-section--5,
	#work3-clear {
		margin-bottom: 40px;
	}

	#work3-about {
		margin-bottom: 60px;
	}

	#work3-about .article-title,
	#work3-role .article-title,
	#work3-important .article-title,
	#work3-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work3-about .section-left {
		margin-right: 5%;
		width: 50%;
	}

	#work3-about .section-left a {
		display: block;
	}

	#work3-about .section-right {
		width: 45%;
	}

	#work3-role .section-left {
		margin-right: 5%;
		width: 50%;
	}

	#work3-role .section-right {
		width: 427px;
		margin-bottom: 34px;
	}

	#work3-role .capture-images li img {
		height: auto;
		width: 100%;
	}

	#work3-role .capture-images {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: space-between;
		margin-bottom: 40px;
	}

	#work3-role .capture-images li {
		flex-grow: 1;
		width: calc(100% / 3 - 20px);
	}

	#work3-role .capture-images.smartphone-app {
		gap: 10px;
		justify-content: center;
	}

	#work3-role .capture-images.smartphone-app li {
		width: 145px;
		flex-grow: 0;
	}

	#work3-role .list-circle {
		padding-left: 1em;
	}

	#work3-role .list-circle li {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work3-role figure.wrap,
	#work3-important .content-section--5 figure.wrap {
		text-align: center;
		margin-bottom: 34px;
	}

	#work3-role figure.wrap {
		margin-left: 30px;
	}

	#work3-role figure.wrap a:first-child {
		margin-left: 20px;
	}

	#work3-important .content-section--1 .section-left,
	#work3-important .content-section--2 .section-right,
	#work3-important .content-section--3 .section-right,
	#work3-important .content-section--4 .section-right,
	#work3-important .content-section--5 .section-left {
		width: 45%;
	}

	#work3-important .content-section--1 .section-right,
	#work3-important .content-section--2 .section-left,
	#work3-important .content-section--3 .section-left,
	#work3-important .content-section--4 .section-left,
	#work3-important .content-section--5 .section-right {
		margin-right: 5%;
		width: 50%;
	}

	#work3-important .content-section--1 .section-right a,
	#work3-important .content-section--2 .section-right a,
	#work3-important .content-section--3 .section-right a,
	#work3-important .content-section--4 .section-left a,
	#work3-important .content-section--5 .section-right a {
		display: block;
	}

	#work3-important .content-section--3 figure.wrap,
	#work3-important .content-section--5 figure.wrap {
		align-items: flex-start;
		display: flex;
		gap: 30px;
	}

	#work3-important .content-section--3 figure.wrap a,
	#work3-important .content-section--5 figure.wrap a {
		width: 50%;
	}

	#work3-important figure.wrap {
		text-align: center;
		margin-bottom: 34px;
	}

	#work3-important .content-section--2 figcaption,
	#work3-important .content-section--3 figcaption {
		padding-top: 10px;
	}

	#work3-important .content-section--5 figcaption {
		display: flex;
		justify-content: space-between;
		margin-top: -14px;
		margin-bottom: 20px;
	}

	#work3-important .content-section--5 figcaption span {
		width: 49%;
		padding-left: 10px;
	}

	#work3-clear .section-left {
		width: 352px;
		margin-bottom: 34px;
	}

	#work3-clear .section-right {
		width: 528px;
	}

	#work3-aware {
		margin-bottom: 70px;
	}

	#work3-aware .section-left {
		margin-right: 5%;
		width: 50%;
	}

	#work3-aware .section-right {
		width: 45%;
	}

	#work3-role .content-section--flex {
		margin-bottom: 40px;
	}

	#work3-important .block {
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	#work3-important .inline-block {
		display: inline-block;
	}

	/* ==========================================================================
		Work4
============================================================================= */

	#work4-title {
		margin-bottom: 30px;
	}

	#work4-title h1 {
		height: 114px;
	}

	#work4-about .article-title,
	#work4-role .article-title,
	#work4-noeffect .article-title,
	#work4-important .article-title,
	#work4-how .article-title,
	#work4-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work4-about .capture-images {
		align-items: flex-start;
		display: flex;
		gap: 20px;
	}

	#work4-about .capture-images li {
		width: calc(100% / 3);
	}

	#work4-about .capture-images li a {
		margin-bottom: 20px;
		height: auto;
		width: 100%;
	}

	#work4-about .capture-images li a img {
		height: auto;
		width: 100%;
	}

	#work4-role .list-circle,
	#work4-important .list-circle {
		padding-left: 1em;
	}

	#work4-role .list-circle li,
	#work4-important .list-circle li {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work4-role .content-section--1,
	#work4-role .content-section--2,
	#work4-role .content-section--3,
	#work4-noeffect .content-section--1,
	#work4-noeffect .content-section--2,
	#work4-noeffect .content-section--3 {
		margin-bottom: 10px;
	}

	.movie-chapter-title {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
		color: #6e73c7;
	}

	#work4-about,
	#work4-role,
	#work4-noeffect,
	#work4-how,
	#work4-important {
		margin-bottom: 40px;
	}

	#work4-about .movie_area iframe,
	#work4-role .movie_area iframe,
	#work4-noeffect .movie_area iframe,
	#work4-important .movie_area iframe,
	#work4-how .movie_area iframe {
		aspect-ratio: 440/248;
		height: auto;
		width: 100%;
	}

	#work4-about li a {
		display: block;
	}

	#work4-role .section-left,
	#work4-noeffect .section-left,
	#work4-how .section-left {
		margin-right: 5%;
		width: 47.5%;
	}

	#work4-role .section-right,
	#work4-noeffect .section-right,
	#work4-how .section-right {
		width: 47.5%;
	}

	#work4-about .section-right,
	#work4-important .section-right {
		width: 352px;
		margin-bottom: 34px;
	}

	#work4-about .note {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work4-aware {
		margin-bottom: 70px;
	}

	/* ==========================================================================
		Work5
============================================================================= */

	#work5-title {
		margin-bottom: 30px;
	}

	#work5-title h1 {
		height: 114px;
	}

	#work5-about .article-title,
	#work5-switch .article-title,
	#work5-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work5-about,
	#work5-switch,
	#work5-oversea {
		margin-bottom: 40px;
	}

	#work5-about figure.wrap,
	#work5-switch figure.wrap {
		text-align: center;
		margin-bottom: 34px;
		margin-left: -30px;
	}

	#work5-about figure.wrap:after,
	#work5-switch figure.wrap:after {
		content: "";
		display: block;
		clear: both;
	}

	#work5-about figure.wrap a,
	#work5-switch figure.wrap a {
		display: block;
		margin: 0 0 30px 30px;
	}

	#work5-about figure.wrap img:first-child,
	#work5-switch figure.wrap img:first-child {
		margin-left: 0;
	}

	#work5-switch .content-wrap--indent>figure {
		margin-bottom: 34px;
	}

	#work5-switch .switch-body {
		display: block;
		width: 629px;
		margin: 0 auto;
	}

	#work5-switch .pc-center-image {
		display: inline-block;
		width: 626px;
		margin: 0 auto;
		margin-bottom: 54px;
		text-align: center;
	}

	#work5-switch .pc-center-image:after {
		content: "";
		display: block;
		clear: both;
	}

	#work5-switch .pc-center-image img {
		display: block;
		width: 293px;
		margin: 0 10px 20px;
	}

	#work5-switch .note {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work5-aware {
		margin-bottom: 70px;
	}

	#work5-aware .switch-body {
		display: flex;
		align-items: center;
	}

	#work5-aware .switch-body img {
		flex-shrink: 0;
		width: 100%;
	}

	#work5-aware .switch-body-left {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 8px;
		width: 30%;
	}

	#work5-aware .switch-body-left img:first-child {
		margin-bottom: 8px;
	}

	#work5-aware .switch-body-right {
		width: 70%;
	}

	/* ==========================================================================
		Work6
============================================================================= */

	#work6-title {
		margin-bottom: 30px;
	}

	#work6-title h1 {
		height: 114px;
	}

	#work6-about .article-title,
	#work6-graphic .article-title,
	#work6-chara .article-title,
	#work6-aware .article-title,
	#work6-switch .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work6-about,
	#work6-graphic,
	#work6-chara,
	#work6-aware {
		margin-bottom: 40px;
	}

	#work6-graphic figure,
	#work6-chara figure {
		margin-bottom: 34px;
	}

	#work6-graphic figure figcaption,
	#work6-chara figure figcaption {
		padding-top: 10px;
	}

	#work6-switch .two {
		max-width: 620px;
		margin: 0 auto 20px;
	}

	.sp_none {
		overflow: hidden;
	}

	/* ==========================================================================
		Work7
============================================================================= */

	#work7-title {
		margin-bottom: 30px;
	}

	#work7-title h1 {
		height: 114px;
	}

	#work7-about .article-title,
	#work7-important .article-title,
	#work7-chara .article-title,
	#work7-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work7-about,
	#work7-important {
		margin-bottom: 40px;
	}

	#work7-about figure,
	#work7-important figure {
		text-align: center;
		margin-bottom: 64px;
	}

	.movie_area--cg {
		width: 640px;
		margin: 0 auto 22px auto;
	}

	#work7-about .fluid-img,
	#work7-important .fluid-img {
		width: 100%;
		height: auto;
	}

	#work7-important .content-section--5 figure.wrap {
		margin-left: -10px;
	}

	#container .content-article .text-link,
	#container .content-article .text-link:visited,
	#container .content-article .text-link:active {
		text-decoration: underline;
	}

	#work7-important a.zoom_img .zoomicon,
	#work7-chara a.zoom_img .zoomicon {
		left: 0px;
		bottom: 0px;
	}

	/* ==========================================================================
		Work8
============================================================================= */

	#work8-title {
		margin-bottom: 30px;
	}

	#work8-title h1 {
		height: 114px;
	}

	#work8-about .article-title,
	#work8-important .article-title,
	#work8-recruit .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work8-about,
	#work8-important {
		margin-bottom: 40px;
	}

	#work8-about figure,
	#work8-important figure {
		text-align: center;
		margin-bottom: 64px;
	}

	#work8-about figure figcaption,
	#work8-important figure figcaption {
		text-align: left;
	}

	#work8-important figure figcaption {
		display: flex;
		justify-content: space-between;
	}

	#work8-important figure figcaption span {
		width: 49%;
	}

	.movie_area--cg {
		width: 640px;
		margin: 0 auto 22px auto;
	}

	#work8-about .fluid-img,
	#work8-important .fluid-img {
		width: 100%;
		height: auto;
	}

	#work8-about a.zoom_img .zoomicon,
	#work8-important a.zoom_img .zoomicon,
	#work8-recruit a.zoom_img .zoomicon {
		left: 0px;
		bottom: 0px;
	}

	/* ==========================================================================
		Work9
============================================================================= */

	#work9-title {
		margin-bottom: 30px;
	}

	#work9-title h1 {
		height: 114px;
	}

	#work9-about .article-title,
	#work9-what .article-title,
	#work9-summary .article-title,
	#work9-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work9-about .list-circle,
	#work9-what .list-circle,
	#work9-summary .list-circle,
	#work9-aware .list-circle {
		margin-bottom: 34px;
	}

	#work9-about .list-circle li,
	#work9-what .list-circle li,
	#work9-summary .list-circle li,
	#work9-aware .list-circle li {
		display: flex;
	}

	#work9-about .list-circle li span,
	#work9-what .list-circle li span,
	#work9-summary .list-circle li span,
	#work9-aware .list-circle li span {
		flex-shrink: 0;
	}

	#work9-about,
	#work9-what {
		margin-bottom: 40px;
	}

	#work9-about figure,
	#work9-what figure {
		margin-bottom: 24px;
	}

	#work9-about .fluid-img,
	#work9-what .fluid-img {
		width: 100%;
		height: auto;
	}

	#work9-what .pc-center-image {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: auto;
		margin-right: auto;
		max-width: 626px;
	}

	#work9-what .pc-center-image a {
		margin-bottom: 20px;
		width: calc(100% / 2 - 10px);
	}

	#work9-what .pc-center-image .image_line2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#work9-what .pc-center-image .image_line2 a {
		margin-bottom: 0;
		width: 48.666%;
	}

	#work9-what .pc-center-image .image_line2 .image_line2__item:first-child {
		padding-right: 20px;
	}

	#work9-what figure a img {
		margin-right: 0;
		margin-bottom: 0;
	}

	#work9-what .content-section--5 figure.wrap {
		margin-left: -10px;
	}

	#work9-what .annotation {
		margin-left: 1em;
		text-indent: -1em;
	}

	#work9-summary .mb50-sp20 {
		margin-bottom: 50px;
	}

	#reference .ref-text {
		padding-left:22px;
	}

	#reference .allow-position {
		position:relative;
	}

	#reference .allow-position::before{
		background: url(../../../recruit/img/top/arrow_r_red.svg) 50% 50% no-repeat;
		display: inline-block;
		content: "";
		width: 14px;
		height: 14px;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 6px;
	}

	#container .content-article .text-link,
	#container .content-article .text-link:visited,
	#container .content-article .text-link:active {
		text-decoration: underline;
	}

	.img_center {
		text-align: center;
		margin-bottom: 50px;
	}

	/* ==========================================================================
		Work10
============================================================================= */

	#work10-title {
		margin-bottom: 30px;
	}

	#work10-title h1 {
		height: 114px;
	}

	#work10-about,
	#work10-process,
	#work10-role,
	#work10-important {
		margin-bottom: 40px;
	}

	#work10-about .article-title,
	#work10-process .article-title,
	#work10-role .article-title,
	#work10-important .article-title,
	#work10-aware .article-title {
		height: 80px;
		margin-bottom: 40px;
	}

	#work10-process h3.section-title {
		margin-top: min(2vw, 34px);
	}

	#work10-process .pc-center-image {
		width: 626px;
		margin: 0 auto 34px;
		text-align: center;
	}

	#work10-process .pc-center-image.three {
		display: flex;
		gap: 15px;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 54px;
	}

	#work10-process :after {
		content: "";
		display: block;
		clear: both;
	}

	#work10-process .pc-center-image a {
		float: left;
		display: block;
		width: 293px;
		margin: 0 10px 6px;
	}

	#work10-process .pc-center-image.three a {
		display: block;
		margin: 0 auto 34px auto;
	}

	#work10-process figure img {
		margin-right: 0;
		margin-bottom: 0;
	}

	/* each case */
	#work10-process .case-example--3 a:first-child {
		display: block;
		width: 692px;
		margin: 0 auto 20px;
		text-align: center;
	}

	#work10-process .wi-list {
		margin-bottom: 20px;
	}

	#work10-process .wi-list li {
		font-weight: bold;
		letter-spacing: .1em;
		min-width: 19.25vw;
	}

	#work10-process .wi-list li a {
		padding-left: 20px;
		font-weight: bold;
		position: relative;
	}
	#work10-process .wi-list li a:hover {
		opacity: 0.7;
	}

	#work10-process .wi-list li a:before {
		position: absolute;
		display: block;
		content: '';
		width: 16px;
		height: 16px;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_r_blue.svg);
	}

	#work10-role .mt-30,
	#work10-important .mt-30 {
		margin-top: 30px;
	}

	#work10-role .mb-10,
	#work10-important .mb-10 {
		margin-bottom: 10px;
	}

	#work10-role .mb-20,
	#work10-important .mb-20 {
		margin-bottom: 20px;
	}

	#work10-role .mb-30,
	#work10-important .mb-30 {
		margin-bottom: 30px;
	}

	#work10-animation figure {
		margin: 0 auto 20px;
		max-width: 920px;
	}

	.video-box {
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
	}

	.video-box video {
		width: 100%;
        max-width: 640px;
        height: auto;
	}

	#work10-process a.zoom_img .zoomicon,
	#work10-role a.zoom_img .zoomicon,
	#work10-important a.zoom_img .zoomicon {
		left: 1px;
		bottom: 1px;
	}

	#work10-process .annotation {
		text-indent: -1.2em;
		padding-left: 1em;
	}

	#work10-process img,
	#work10-role img,
	#work10-important img {
		border-radius: 4px;
		border: 1px solid rgb(221, 221, 221);
	}




	#work8-about {
		margin-bottom: 40px;
	}

	#work8-about .pc-center-image {
		width: 626px;
		margin: 0 auto 44px;
		text-align: center;
	}

	#work8-about .pc-center-image a {
		display: block;
		margin: 0 10px 20px;
	}

	#work8-important figure.w630,
	#work8-recruit figure.w630 {
		width: 630px;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 50px;
	}

	#work8-about figure a img {
		margin-right: 0;
		margin-bottom: 0;
	}

	.mb50 {
		margin-bottom: 50px;
	}

	#work3-important .content-section--5,
	#work3-clear {
		margin-bottom: 40px;
	}

	figure.wrap4 a {
		display: inline-block;
		margin-left: 30px;
	}

	.mb30 {
		margin-bottom: 30px;
	}

	figure.w630 {
		width: 630px;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 50px;
	}

	.pc_none {
		display: none;
	}

	.two {
		align-items: flex-start;
		display: flex;
		gap: 20px;
		margin-bottom: 20px;
	}

	.two li {
		width: calc(100% / 2);
	}

	.two li img {
		width: 100%;
		height: auto;
	}

	.two li video {
		width: 420px;
	}

	.rights {
		font-size: 8px;
		text-align: right;
	}

	.rights li {
		line-height: 1.8em;
	}

	.inline {
		display: inline-block;
	}

	.mb50 {
		margin-bottom: 60px !important;
	}

	.mb50 figcaption {
		padding-top: 0px !important;
	}

	.flex_line2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.mb0 {
		margin-bottom: 0;
	}

	.w-100 {
		width: 100%;
	}

	/* safari */
	::-webkit-full-page-media,
	:future,
	#work4-about .movie_area,
	#work4-role .movie_area,
	#work4-noeffect .movie_area,
	#work4-important .movie_area,
	#work4-how .movie_area {
		position: relative;
		width: 100%;
		height: 0;
		margin-bottom: 10px;
		padding-top: 56.25%;
	}

	::-webkit-full-page-media,
	:future,
	#work4-about .movie_area iframe,
	#work4-role .movie_area iframe,
	#work4-noeffect .movie_area iframe,
	#work4-important .movie_area iframe,
	#work4-how .movie_area iframe {
		aspect-ratio: auto;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	/* ==========================================================================
		footer
============================================================================= */

	#footer.mt_0 {
		margin-top: 0px !important;
	}

}




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

	.mgb-none {
		margin-bottom: 0 !important;
	}

	.noWrap {
		white-space: nowrap;
	}

	#jobtype-body img {
		height: auto;
		-o-object-fit: cover;
		   object-fit: cover;
		width: 100%;
		max-width: 100%;
	}

	.two li img,
	.three li img {
		max-width: min(480px, 100%);
	}

	figure a {
		width: 100%;
	}

	.sp-max-fullSize {
		max-width: none !important;
	}


	/* .category-nav_special
------------------------------------------------------------------- */
	.category-nav_special {
		border-top: solid 1px #cdcdcd;
	}

	.category-nav_special a {
		position: relative;
		padding: 9px 20px;
		display: block;
		text-decoration: none;
		background: #f2f2f2;
	}

	.category-nav_special a:after {
		position: absolute;
		display: block;
		content: '';
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		height: 8px;
		width: 5px;
		text-decoration: none;
		background-image: url(../../common/img/sp-sprite.png);
		background-size: 300px 300px;
		overflow: hidden;
		background-position: -150px -100px;
	}

	.category-header.none-category-nav_special .category-nav_special {
		display: none !important;
	}

	.category-footer.none-category-nav_special .category-nav_special {
		display: none !important;
	}

	.related-info .add-category-nav_special {
		margin: 0 10px;
	}

	.related-info .category-nav_special {
		border-top: none;

	}

	.related-info .category-nav_special a {
		border-radius: 6px;
	}


	/* .content-section
------------------------------------------------------------------- */
	.content-section p {
		text-indent: 1em;
		margin-bottom: 22px;
	}

	.content-section p.no-indent {
		text-indent: 0;
	}

	.content-section p.relation-link {
		margin-top: -10px;
		text-indent: 0;
	}

	.content-section p.relation-link a {
		display: inline-block;
		position: relative;
		min-height: 14px;
		padding-left: 20px;
	}

	.content-section p.relation-link a:before {
		display: block;
		content: '';
		position: absolute;
		width: 14px;
		height: 14px;
		top: 5px;
		left: 0;
		background: url(../../common/img/sp-sprite.png) -250px -150px;
		background-size: 300px 300px;
	}

	.sp-word-brake {
		margin-left: 0 !important;
	}

	.case-wrap {
		padding: 25px 20px 10px;
		margin: 0 0 30px;
		background: #f5f5f5;
		box-sizing: border-box;
	}

	.case-wrap .content-wrap--indent {
		margin: 0;
	}

	/* section-title
------------------------------------------------------------------- */
	.article-title {
		padding: 15px;
		margin: 0 10px 20px;
		border-radius: 10px;
		color: #FFF;
		font-size: 18px;
		line-height: 23px;
		text-align: center;
		overflow: hidden;
		background: url(../img/common/bg_dot.gif) center top;
	}

	.article-title span.break_point {
		display: inline-block;
	}

	#work4-how .article-title {
		margin: 0 10px 30px;
	}

	.section-title {
		margin: 0 10px 15px;
		border-bottom: solid 2px #c5c7e9;
	}

	.section-title strong {
		position: relative;
		display: inline-block;
		font-size: 16px;
		line-height: 24px;
		padding: 0 5px 5px;
	}

	.section-title strong:after {
		position: absolute;
		display: block;
		content: '';
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #6e73c7;
	}

	.section-title small {
		display: inline-block;
		font-weight: normal;
		line-height: 18px;
		font-size: 12px;
		vertical-align: middle;
	}

	.section-sub-title {
		margin-bottom: 10px;
		font-size: 15px;
		font-weight: bold;
		color: #6e73c7;
	}

	.float-img-left,
	.float-img-right {
		display: block;
		float: none;
		margin: 0 auto 22px;
		max-width: 100%;
		height: auto;
	}

	.mb20 {
		margin-bottom: 20px !important;
	}

	figure {
		/**/
		text-align: center;
	}

	#work3-important .content-section--5 figcaption {
		display: flex;
		justify-content: space-between;
		margin-top: -6px;
		margin-bottom: 20px;
		text-align: left;
	}

	#work3-important .content-section--5 figcaption span {
		width: 49%;
		padding-left: 6px;
	}

	#work8-about figure {
		margin-bottom: 10px;
	}

	#work8-about figure figcaption,
	#work8-important figure figcaption {
		text-align: left;
	}

	#work8-important figure figcaption {
		display: flex;
		justify-content: space-between;
	}

	#work8-important figure figcaption span {
		width: 49%;
	}

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

		.article-title {
			font-size: 16px;
		}

	}

	/* ==========================================================================
		design
============================================================================= */

	.category-title--design {
		background-image: url(../img/common/bg_dot.gif);
	}

	.content-title--design {
		margin-bottom: 20px;
		border-color: #6e73c7;
	}

	.content-title--design .content-intro {
		border-color: #6e73c7;
	}

	.content-title--design h1 .sub-title {
		color: #6e73c7;
	}

	.cf-ctop-btn a {
		background-image: url(../img/common/bg_dot.gif);
	}

	.category-nav-line2 {
		display: none;
	}

	/* ==========================================================================
		Work（index）
============================================================================= */

	.category-top-title {
		margin-bottom: 20px;
		padding: 20px 0 13px;
		text-align: center;
		border-style: solid;
		border-color: #6e73c7;
		border-width: 5px 0 2px;
		font-size: 25px;
		line-height: 30px;
		letter-spacing: 1px;
	}

	.category-top-title .sub-title {
		margin-top: 6px;
		display: block;
		color: #6e73c7;
		font-size: 13px;
		line-height: 20px;
	}

	#top-lead {
		line-height: 1.6;
		margin: 25px 20px;
	}

	#work-index {
		padding: 20px 0;
		margin-bottom: 20px;
		background: #c5c7e9;
	}

	#work-index .content-wrap {
		margin: 0 auto;
		max-width: min(480px, 100%);
	}

	#work-index .wi-list,
	#work-index .wi-list-sub {
		margin: 0 10px;
	}

	#work-index .wi-list-block {
		padding-bottom: 5px;
		border: solid 4px #9b9fe7;
		border-radius: 14px;
		background-image: url(../img/common/bg_dot.gif);
		padding: 0 12px;
	}

	#work-index .wi-list-sub dd.wi-stage p a span,
	#work-index .wi-list-sub dd.wi-character p a span,
	#work-index .wi-list-sub dd.wi-cg p a span,
	#work-index .wi-list-sub dd.wi-gui a span,
	#work-index .wi-list-sub dd.wi-effect a span,
	#work-index .wi-list-sub dd.wi-cgsp a span,
	#work-index .wi-list .wi-product a span,
	#work-index .wi-list .wi-graphic a span,
	#work-index .wi-list .wi-illust a span,
	#work-index .wi-list .wi-edcg a span {
		color: #333;
		font-size: clamp(15px, 2.75vw, 18.5px);
		font-weight: bold;
		letter-spacing: .1em;
		line-height: 1.2;
		margin-left: 42.25%;
		padding-left: 2.5vw;
		position: relative;
		text-align: center;
	}

	#work-index .wi-list-sub dd.wi-stage p a:hover span,
	#work-index .wi-list-sub dd.wi-character p a:hover span,
	#work-index .wi-list-sub dd.wi-cg p a:hover span,
	#work-index .wi-list-sub dd.wi-gui a:hover span,
	#work-index .wi-list-sub dd.wi-effect a:hover span,
	#work-index .wi-list-sub dd.wi-cgsp a:hover span,
	#work-index .wi-list .wi-product a:hover span,
	#work-index .wi-list .wi-graphic a:hover span,
	#work-index .wi-list .wi-illust a:hover span,
	#work-index .wi-list .wi-edcg a:hover span {
		color: #6e73c7;
	}

	#work-index .wi-list-sub dd.wi-stage p a span::before,
	#work-index .wi-list-sub dd.wi-character p a span::before,
	#work-index .wi-list-sub dd.wi-cg p a span::before,
	#work-index .wi-list-sub dd.wi-gui a span::before,
	#work-index .wi-list-sub dd.wi-effect a span::before,
	#work-index .wi-list-sub dd.wi-cgsp a span::before,
	#work-index .wi-list .wi-product a span::before,
	#work-index .wi-list .wi-graphic a span::before,
	#work-index .wi-list .wi-illust a span::before,
	#work-index .wi-list .wi-edcg a span::before {
		position: absolute;
		display: block;
		content: '';
		width: 20px;
		height: 20px;
		left: -24.5px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_white.svg);
	}

	#work-index .wi-soft,
	#work-index .wi-hardware {
		margin-bottom: 10px;
	}

	#work-index .wi-list dt,
	#work-index .wi-list-sub dt {
		margin: 15px 0;
		font-size: 20px;
		color: #FFF;
		text-align: center;
		font-weight: bold;
		letter-spacing: .05em;
	}

	#work-index .wi-list dd {
		margin: 0 auto 10px;
	}

	#work-index .wi-list dd a,
	#work-index .wi-list-sub dd a {
		background-repeat: no-repeat;
		background-size: contain;
	}

	#work-index .wi-list-sub dd.wi-cg {
		margin: 0 auto 10px;
		border-radius: 5px;
	}

	#work-index .wi-list-sub .wi-cg p a {
		align-items: center;
		display: flex;
		background-image: url(../img/top/index_cg_btn.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #ebecfa;
		border: solid 1px #ebecfa;
		border-radius: 5px 5px 0 0;
		height: 14.5vw;
		min-height: 66px;
	}

	#work-index .wi-list-sub .wi-cg .sub ul {
		background: #fff;
		border-radius: 0 0 5px 5px;
		font-size: 12px;
		line-height: 1.2;
		padding: 10px 0;
	}

	#work-index .wi-list-sub .wi-cg .sub li {
		margin-left: 47.25%;
	}

	#work-index .wi-list-sub .wi-cg .sub li+li {
		margin-top: 10px
	}

	#work-index .wi-list-sub .wi-cg .sub li a {
		display: block;
		font-size: clamp(12px, 2vw, 14.5px);
		font-weight: bold;
		height: 15px;
		letter-spacing: .15em;
		position: relative;
	}

	#work-index .wi-list-sub .wi-cg .sub li a::before {
		position: absolute;
		display: block;
		content: '';
		width: 14px;
		height: 14px;
		left: -22px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_gray.svg);
	}

	#work-index .wi-list-sub dd.wi-stage a,
	#work-index .wi-list-sub dd.wi-character a,
	#work-index .wi-list-sub dd.wi-gui a,
	#work-index .wi-list-sub dd.wi-effect a,
	#work-index .wi-list-sub dd.wi-cgsp a,
	#work-index .wi-list dd a {
		align-items: center;
		display: flex;
		background-color: #ebecfa;
		border: solid 1px #ebecfa;
		border-radius: 5px;
		margin-bottom: 10px;
		height: 14.5vw;
		min-height: 66px;
	}

	#work-index .wi-list-sub .wi-stage a {
		background-image: url(../img/top/index_stage_btn.png);
	}

	#work-index .wi-list-sub .wi-character a {
		background-image: url(../img/top/index_character_btn.png);
	}

	#work-index .wi-list .wi-cg a {
		background-image: url(../img/top/index_cg_btn.png);
	}

	#work-index .wi-list-sub .wi-gui a {
		background-image: url(../img/top/index_ui_btn.png);
	}

	#work-index .wi-list-sub .wi-effect a {
		background-image: url(../img/top/index_effect_btn.png);
	}

	#work-index .wi-list-sub .wi-cgsp a {
		background-image: url(../img/top/index_cgsp_btn.png);
	}

	#work-index .wi-list .wi-product a {
		background-image: url(../img/top/index_product_btn.png);
	}

	#work-index .wi-list .wi-graphic a {
		background-image: url(../img/top/index_graphic_btn.png);
	}

	#work-index .wi-list .wi-illust a {
		background-image: url(../img/top/index_illust_btn.png);
	}

	#work-index .wi-list .wi-edcg a {
		background-image: url(../img/top/index_3dcg_btn.png);
	}

	/* ==========================================================================
		Work1
============================================================================= */

	#work1-animation .video_area video {
		width: 100%;
	}

	.cg-pagenation {
		margin: 0 20px 30px;
		text-align: right;
	}

	.cg-pagenation:after {
		content: "";
		display: block;
		clear: both;
	}

	.cg-pagenation>li {
		display: inline-block;
	}

	.cg-pagenation li.prev {
		display: inline-block;
		padding-right: 10px;
	}

	.cg-pagenation li.next {
		display: inline-block;
		padding-left: 10px;
	}

	.cg-pagenation li a {
		display: block;
		padding: 6px 40px 4px;
		vertical-align: 14px;
		font-weight: bold;
		position: relative;
	}

	.cg-pagenation li.prev a {
		padding-right: 5px;
	}

	.cg-pagenation li.next a {
		padding-left: 5px;
	}

	.cg-pagenation li a:before {
		content: "";
		display: block;
		width: 28px;
		height: 28px;
		background: url(../img/common/icon-arrow.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.cg-pagenation li.prev a:before {
		left: 0;
		transform: rotate(180deg);
	}

	.cg-pagenation li.next a:before {
		right: 0;
	}

	.cg-pagenation li.pager-num {
		display: inline-block;
		margin: 0 auto 4px;
		padding-top: 2px;
		text-align: center;
		vertical-align: middle;
	}

	.cg-pagenation li.pager-num ul li:first-child {
		border-left: 1px solid #ccc;
	}

	.cg-pagenation li.pager-num ul li:last-child {
		border-right: 1px solid #ccc;
	}

	.cg-pagenation li.pager-num a,
	.cg-pagenation li.pager-num span {
		display: block;
		padding: 0 10px;
		line-height: 1.3;
		vertical-align: middle;
	}

	.cg-pagenation li.pager-num ul li {
		float: left;
	}

	.cg-pagenation li.pager-active span {
		color: #afafaf !important;
	}

	.cg-pagenation li.pager-num a:before {
		display: none;
	}

	#work1-about,
	#work1-character,
	#work1-animation {
		margin-bottom: 30px;
		margin-top: -84px;
		padding-top: 84px;
	}

	#work1-about .content-section--2>figure {
		margin-bottom: 30px;
	}

	#work1-about figure>img,
	#work1-character figure>img {
		margin-bottom: 20px;
	}

	#work1-about figure .zoom_img,
	#work1-character figure .zoom_img,
	#work1-animation figure .zoom_img {
		margin: 0 0 20px;
		max-width: 460px;
	}

	#work1-character figure a {
		margin-bottom: 10px;
	}

	.list-image,
	.sp-list-image {
		margin-bottom: 10px;
		text-align: center;
	}

	.list-image:after,
	.sp-list-image:after {
		content: "";
		display: block;
		clear: both;
	}

	.list-image li,
	.sp-list-image>a {
		display: block;
		float: left;
		padding: 0 5px 0 0;
		box-sizing: border-box;
		width: 50%;
		line-height: 0;
		margin-bottom: 5px !important;
	}

	.list-image li a {
		margin-bottom: 0 !important;
	}

	/* ==========================================================================
		Work2
============================================================================= */

	#work2-stage,
	#work2-movie {
		margin-bottom: 30px;
		margin-top: -84px;
		padding-top: 84px;
	}

	#work2-stage figure .zoom_img,
	#work2-movie figure .zoom_img {
		margin: 0 0 20px;
	}

	#work2-stage figure>img {
		margin-bottom: 20px;
	}

	#work2-movie .section-right {
		text-align: center;
	}

	#work2-movie .section-right a {
		margin-bottom: 10px;
	}

	#work2-stage figure a {
		margin-bottom: 10px;
	}

	#work2-stage figure>img {
		margin-bottom: 20px;
	}

	/* ==========================================================================
		Work3
============================================================================= */

	#work3-about,
	#work3-role,
	#work3-important,
	#work3-important .content-section--1,
	#work3-important .content-section--2,
	#work3-important .content-section--3,
	#work3-important .content-section--4,
	#work3-important .content-section--5,
	#work3-clear,
	#work3-aware {
		margin-bottom: 30px;
	}

	#work3-about .zoom_img,
	#work3-role .zoom_img,
	#work3-important .zoom_img,
	#work3-clear .zoom_img,
	#work3-aware .zoom_img {
		max-width: min(480px, 100%);
	}

	#work3-about .section-left {
		margin-bottom: 22px;
	}

	#work3-work .section-right {
		margin-bottom: 22px;
	}

	#work3-role .list-circle {
		padding-left: 1em;
	}

	#work3-role .list-circle li {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work3-role .capture-images {
		align-items: flex-start;
		display: flex;
		gap: 1.5%;
		flex-wrap: wrap;
		margin: auto;
		max-width: min(480px, 100%);
		text-align: center;
	}

	#work3-role .capture-images li {
		width: calc(100% / 2 - .75%);
	}

	#work3-role .capture-images.smartphone-app {
		align-items: flex-start;
		display: flex;
		gap: 1%;
		flex-wrap: wrap;
		text-align: center;
	}

	#work3-role .capture-images.smartphone-app li {
		width: calc(100% / 3 - .675%);
	}

	#work3-role .capture-images li a {
		width: 100%;
		height: auto;
	}

	#work3-role figure,
	#work3-role figure a,
	#work3-important .content-section--2 a,
	#work3-important .content-section--3 a,
	#work3-important .content-section--4 a {
		margin-bottom: 10px;
	}

	#work3-role figure.wrap {
		margin-bottom: 0;
	}

	#work3-important figure.wrap {
		margin-bottom: 10px;
		text-align: center;
	}

	#work3-important figure.wrap a {
		margin: 0 2px 8px;
		box-sizing: border-box;
	}

	#work3-important .content-section--3 figure.wrap {
		margin-right: -5px;
	}

	#work3-important .content-section--3 figure.wrap a {
		width: 50%;
		padding-right: 5px;
		margin: 0 0 8px;
	}

	#work3-important .content-section--5 figure.wrap a {
		margin-bottom: 1px;
	}

	#work3-important .content-section--2 figcaption,
	#work3-important .content-section--3 figcaption {
		margin-bottom: 15px;
		text-align: left;
	}

	#work3-important .content-section--5 figcaption {
		display: flex;
		justify-content: space-between;
		margin-top: -14px;
		margin-bottom: 20px;
	}

	#work3-important .content-section--5 figcaption span {
		width: 49%;
		padding-left: 10px;
		margin-top: 10px;
	}

	#work3-clear .section-left {
		margin-bottom: 22px;
	}

	#work3-aware .content-section--flex {
		align-items: center;
		display: flex;
		flex-direction: column-reverse;
	}

	#work3-aware #keyword {
		margin-bottom: 30px;
	}

	/* ==========================================================================
		Work4
============================================================================= */

	.movie-chapter-title {
		margin-bottom: 10px;
		font-size: 15px;
		font-weight: bold;
		color: #6e73c7;
	}

	#work4-about .capture-images li {
		align-items: center;
		display: flex;
		gap: 1.5%;
		margin-bottom: 1.5%;
	}

	#work4-about .capture-images li a {
		width: calc(100% / 2 - .75%);
	}

	#work4-role .list-circle,
	#work4-important .list-circle {
		padding-left: 1em;
	}

	#work4-role .list-circle,
	#work4-important .list-circle {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work4-role .content-section--1,
	#work4-role .content-section--2,
	#work4-role .content-section--3,
	#work4-noeffect .content-section--1,
	#work4-noeffect .content-section--2,
	#work4-noeffect .content-section--3 {
		margin-bottom: 10px;
	}

	.movie_area {
		display: block;
		margin: 0 auto 5px;
		text-align: center;
		padding-top: 56.25%;
		position: relative;
		overflow: hidden;
	}

	.movie_area iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#work4-about,
	#work4-role,
	#work4-noeffect,
	#work4-important,
	#work4-how,
	#work4-aware {
		margin-bottom: 30px;
	}

	#work4-about .note {
		text-indent: -1em;
		padding-left: 1em;
	}

	#work4-about .section-right,
	#work4-role .section-left,
	#work4-noeffect .section-left,
	#work4-how .section-left {
		margin-bottom: 22px;
	}

	/* ==========================================================================
		Work5
============================================================================= */

	#work5-about,
	#work5-switch,
	#work5-oversea {
		margin-bottom: 30px;
	}

	#work5-about a,
	#work5-switch a,
	#work5-oversea a {
		pointer-events: none;
	}

	#work5-about a.zoom_img:after,
	#work5-switch a.zoom_img:after,
	#work5-oversea a.zoom_img:after {
		display: none;
	}

	#work5-about figure.wrap {
		margin-bottom: 10px;
		text-align: center;
	}

	#work5-about figure.wrap a {
		margin: 0 2px 15px;
		box-sizing: border-box;
	}

	#work5-switch a,
	#work5-aware a {
		margin-bottom: 15px;
	}

	#work5-switch .sp-list-image>img {
		display: block;
		padding: 0 5px 0 0;
		box-sizing: border-box;
		width: 50%;
		line-height: 0;
		margin-bottom: 5px !important;
	}

	#work5-about .content-section--3 figure img:first-child {
		margin-bottom: 40px;
	}

	/* ==========================================================================
		Work6
============================================================================= */

	#work6-about,
	#work6-graphic,
	#work6-chara,
	#work6-aware {
		margin-bottom: 30px;
	}

	#work6-graphic figure,
	#work6-chara figure {
		margin-bottom: 10px;
	}

	#work6-graphic figure figcaption,
	#work6-chara figure figcaption {
		text-align: left;
	}

	#work6-switch .two {
		margin: 0 auto;
		max-width: 293px;
	}

	/* ==========================================================================
		Work6
============================================================================= */

	#work7-about,
	#work7-important {
		margin-bottom: 30px;
	}

	#work7-about figure,
	#work7-important figure {
		margin-bottom: 10px;
	}

	/* ==========================================================================
		Work7
============================================================================= */

	#work7-important a.zoom_img:after,
	#work7-chara a.zoom_img:after {
		left: 0px;
		bottom: 0px;
	}

	/* ==========================================================================
		Work8
============================================================================= */

	#work8-about a.zoom_img:after,
	#work8-important a.zoom_img:after,
	#work8-recruit a.zoom_img:after {
		left: 0px;
		bottom: 0px;
	}

	/* ==========================================================================
		Work9
============================================================================= */

	#work9-what figcaption {
		margin-bottom: 20px;
	}

	#work9-summary .mb50-sp20 {
		margin-bottom: 20px;
	}

	#work9-summary .the_list li {
		margin-bottom: 4px;
	}

	#work9-about figcaption,
	#work9-what figcaption,
	#work9-summary figcaption,
	#work9-aware figcaption {
		text-align: left;
	}

	#work9-about .list-circle,
	#work9-what .list-circle,
	#work9-summary .list-circle,
	#work9-aware .list-circle {
		margin-bottom: 22px;
	}

	#work9-about .list-circle li,
	#work9-what .list-circle li,
	#work9-summary .list-circle li,
	#work9-aware .list-circle li {
		display: flex;
	}

	#work9-about .list-circle li span,
	#work9-what .list-circle li span,
	#work9-summary .list-circle li span,
	#work9-aware .list-circle li span {
		flex-shrink: 0;
	}

	#work9-what .pc-center-image .image_line2 {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#work9-what .pc-center-image .image_line2 a {
		width: 48.666%;
	}

	#work9-what .pc-center-image .image_line2 a:first-child {
		margin-right: 5px;
	}

	#work9-what .pc-center-image .image_line2 .image_line2__item:first-child {
		padding-right: 5px;
	}

	#work9-what .annotation {
		margin-left: 1em;
		text-indent: -1em;
	}

	#reference .ref-text {
		padding-left:22px;
	}

	#reference .allow-position {
		position:relative;
	}

	#reference .allow-position::before{
		background: url(../../../recruit/img/top/arrow_r_red.svg) 50% 50% no-repeat;
		display: inline-block;
		content: "";
		width: 14px;
		height: 14px;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 3px;
	}

	#reference .tab-icon {
		width:9px;
		height:auto;
	}

	/* ==========================================================================
		Work10
============================================================================= */

	#work10-process .wi-list {
		margin-bottom: 15px;
	}

	#work10-process .wi-list li {
		font-weight: bold;
		min-width: 19.25vw;
	}

	#work10-process .wi-list li a {
		padding-left: 20px;
		font-weight: bold;
		position: relative;
	}

	#work10-process .wi-list li a:before {
		position: absolute;
		display: block;
		content: '';
		width: 16px;
		height: 16px;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background: url(../../common/img/arrow_r_blue.svg);
	}

	.video-box {
		/*display: flex;*/
		justify-content: center;
		margin-left: 0px;
		margin-right: 4px;
		margin-bottom: 40px;
	}

	.video-box video {
		width: 100%;
		height: auto;
	}

	#work10-process .video-box {
		margin-left: 15px;
		margin-right: 15px;
	}

	#work10-process .annotation {
		text-indent: -1.2em;
		padding-left: 1em;
	}

	#work10-process img,
	#work10-role img,
	#work10-important img {
		border-radius: 4px;
		border: 1px solid rgb(221, 221, 221);
	}

	#container .content-article .text-link,
	#container .content-article .text-link:visited,
	#container .content-article .text-link:active {
		text-decoration: underline;
	}

	.w630 {
		margin: 0 auto 30px;
		max-width: min(630px, 100%);
	}

	.mb40 {
		margin-bottom: 40px;
	}
	.mb30 {
		margin-bottom: 30px;
	}

	.mb15 {
		margin-bottom: 15px;
	}

	#work10-role .mb-10,
	#work10-important .mb-10 {
		margin-bottom: 10px;
	}

	.mt-30 {
		margin-top: 30px;
	}

	.mb0 {
		margin-bottom: 0px;
	}

	.br_none {
		display: none;
	}

	.sp_none {
		display: none;
	}

	.rights {
		font-size: 8px;
		margin-bottom: 20px;
	}

	.rights li {
		line-height: 2em;
	}

	/* ==========================================================================
		footer
============================================================================= */
	#container #footer.sp_mt0 {
		margin-top: 0px;
	}

}

#work3-role .radius,
#work3-important .radius {
	border-radius: 6px;
}

@media screen and (min-width: 960px) {
	#work-index .art-last a { 
		margin-bottom: 76px !important;
	}
}