@charset "utf-8";
.service_main {
		position: relative;
		margin: 0 auto;
		max-width: 1280px;
		padding: 120px 20px;
}

.service_main .service_sideber {
		width: 250px;
		position: sticky;
		left: 0;
		top: 110px;
		float: left;
		z-index: 5
}
.service_sideber li {
		list-style: none;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 14px;
		letter-spacing: 0
}
.service_sideber li {
		margin: 0 0 25px;
}
.service_sideber li a {
		color: #787878;
		text-decoration: none;
		display: inline-block;
		position: relative;
		padding-left: 20px;
		transition: color 0.2s;
}
.service_sideber li a.isCurrent {
		color: #ddd;
}
@media (hover: hover) {
		.service_sideber li a:hover {
				color: #ddd;
		}
}
.service_sideber li a::before, .service_sideber li a::after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 10px;
		height: 2px;
		background: #ddd;
		opacity: 0;
}
.service_sideber li a::before {
		transform: scaleX(4);
		transform-origin: right center;
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service_sideber li a::after {
		transform: rotate(90deg) scaleX(4);
		top: calc(50% + 10px);
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.service_sideber li a.isCurrent::before {
		transform: scaleX(1);
		opacity: 1;
}
.service_sideber li a.isCurrent::after {
		transform: rotate(90deg) scaleX(1);
		opacity: 1;
		top: 50%;
}
.service_cont {
		margin-left: 370px;
		position: relative;
		z-index: 10
}
.service_cont section {
		min-height: 400px;
		margin: 0 0 180px;
}
.service_cont section.planning_section {
		margin-bottom: 120px;
		min-height: inherit;
}
.service_cont section.writing_section {
		min-height: inherit;
}
.anchor {
		pointer-events: none;
		position: relative;
		padding-top: 100px;
		margin-top: -100px;
}
@media(max-width: 767px) {
		.service_cont section {
				margin: 0 0 120px;
		}
		.service_cont section.planning_section {
				margin-bottom: 80px;
				min-height: inherit;
		}
}
/* ================= */
.service_main section {
		position: relative;
}
section .anime_item {
		position: absolute;
		left: -350px;
		top: 180px;
		z-index: 0
}
.service_hd {
		border-bottom: 1px solid #3C3C3C;
		margin: 0 0 40px;
		height: 100px;
		display: flex;
		align-items: center;
}
.service_hd_icon {
		width: 70px;
		margin-left: 10px;
		margin-right: 30px;
}
.service_hd_icon img {
		width: 100%;
		height: auto;
}
.service_hd_gr {
		display: flex;
		flex-direction: column-reverse;
		flex: 1;
}
.service_hd_en {
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 42px;
		letter-spacing: 0;
		margin: 0 0 15px;
}
.service_hd_en span {
		display: inline-block;
		position: relative;
}
/*
.service_hd_en span::before, .service_hd_en span::after {
		content: '';
		display: block;
		position: absolute;
		top: 4px;
		right: -20px;
		width: 10px;
		height: 2px;
		background: #ddd;
}
*/
.service_hd_en span::after {
		transform: rotate(90deg);
}
.service_hd_jp {
		font-size: 14px;
		font-weight: 400;
}
.service_caption {
		padding: 0 120px 0 110px;
}
.service_caption_txt {
		color: #D3D3D3;
		line-height: 2.0;
		margin: 0 0 20px;
		text-align: justify;
}
.service_caption_notes {
		color: #787878;
		line-height: 2.0;
		display: flex;
		flex-wrap: wrap;
}
.service_caption_notes li {
		list-style: none;
		padding-right: 0.25em;
		margin: 0;
		position: relative;
}
.service_caption_notes li::after {
		content: '/';
		padding-left: 0.25em;
}
.service_caption_notes li:last-child::after {
		display: none
}
.service_figure {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
}
.anime_item {
		transform: scale(1.5)
}
.service_figure_item {
		width: 330px;
}
.service_figure_item img {
		width: 100%;
		height: auto;
}
@media(max-width: 1400px) {
		.service_main {
				padding: 120px 20px;
		}
		.service_cont {
				margin-left: 250px;
		}
		.anime_item {
				transform: scale(0.9);
		}
		section .anime_item {
				left: -250px;
				top: 100px;
		}
		.service_caption {
				padding: 0 40px 0 110px;
		}
		.service_figure_item {
				width: calc(50% - 10px);
		}
}
@media(max-width: 1023px) {
		.service_caption {
				padding-left: 80px;
				padding-right: 15px;
		}
		.service_hd {
				margin: 0 0 30px;
				height: 100px;
		}
		.service_hd_icon {
				width: 60px;
				margin-left: 5px;
				margin-right: 15px;
		}
		.service_hd_en {
				font-size: 34px;
				margin: 0 0 15px;
		}
		.service_hd_jp {
				font-size: 13px;
		}
		.service_cont {
				margin-left: 230px;
		}
		.service_caption_txt {
				line-height: 2.0;
				margin: 0 0 20px;
		}
}
@media(max-width: 960px) {
		.service_caption {
				padding-left: 0;
		}
}
@media(min-width: 768px) {
		.sidebar_trigger {
				display: none
		}
}
@media(max-width: 767px) {
		.service_main {
				padding: 80px 0 0;
		}
		.service_main .service_sideber {
				float: none;
				z-index: 10;
				top: 70px;
				background: #1e1e1e;
				width: 100%;
				left: -30px;
				padding: 20px 30px;
				box-sizing: border-box;
				position: static;
				margin-bottom: 80px;
		}
		.sidebar_trigger {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 14px;
				font-weight: 400;
				cursor: pointer;
				line-height: 1;
		}
		.sidebar_trigger span {
				display: inline-block;
				position: relative;
		}
		.sidebar_trigger span::after {
				content: '';
				display: block;
				position: absolute;
				top: 3px;
				right: -17px;
				width: 6px;
				height: 6px;
				border-left: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				border-right: 1px solid rgba(255, 255, 255, 0);
				border-top: 1px solid rgba(255, 255, 255, 0);
				transform: rotate(-45deg)
		}
		.sidebar_trigger.isOpen span::after {
				top: 7px;
				border-left: 1px solid rgba(255, 255, 255, 0);
				border-bottom: 1px solid rgba(255, 255, 255, 0);
				border-right: 1px solid #ddd;
				border-top: 1px solid #ddd;
		}
		.service_sideber ul li:last-child {
				margin-bottom: 0;
		}
		.service_sideber ul li a {
				color: #ddd;
				padding-left: 0;
		}
		.service_sideber li a::before, .service_sideber li a::after {
				display: none;
		}
		.service_sideber ul {
				padding-top: 40px;
		}
		.service_cont {
				margin-left: 0;
				margin-right: 0;
				overflow: hidden;
				padding: 0 25px;
		}
		.service_hd {
				position: relative;
				z-index: 5;
				height: auto;
				padding: 0 0 15px;
				margin: 0 0 20px;
				display: flex;
				align-items: flex-start;
		}
		.service_hd_icon {
				width: 40px;
				margin-left: 5px;
				margin-right: 15px;
		}
		.service_hd_en {
				font-size: 27px;
				margin: 0 0 5px;
				line-height: 1.4;
		}
		.service_hd_en span::before, .service_hd_en span::after {
				top: 4px;
				right: -15px;
		}
		.service_hd_jp {
				font-size: 13px;
		}
		.service_caption {
				padding: 0;
				position: relative;
				z-index: 5;
		}
		.service_caption_txt {
				line-height: 1.8;
				font-size: 15px;
		}
		.service_caption_notes {
				line-height: 1.8;
				font-size: 12px;
		}
		.service_figure {
				margin-top: 40px;
				display: block
		}
		.service_figure_item {
				width: 100%;
				margin: 0 0 15px;
		}
		section .anime_item {
				left: calc(50% - 160px);
				top: 0;
		}
		.anime_item {
				transform: scale(1);
		}
}
/* ============= */
@media(min-width: 768px) {
		section > .anime_item {
				display: none
		}
}
.service_sideber .service_sideBg {
		position: absolute;
		top: 100px;
		top: calc(50vh - 300px);
		left: 20px;
		width: 480px;
		height: 480px;
		z-index: -1;
		pointer-events: none;
}
.service_sideBg .sideBg_item {
		position: absolute;
		top: 0;
		left: 0;
		width: 480px;
		height: 480px;
		opacity: 0;
		transition: opacity 0.4s;
		background: #1e1e1e;
}
.sideBgItem-1 {
		opacity: 1;
}
.graphic .sideBgItem-1 {
		opacity: 1
}
.web .sideBgItem-2 {
		opacity: 1
}
.photography .sideBgItem-3 {
		opacity: 1
}
.retouch .sideBgItem-4 {
		opacity: 1
}
.branding .sideBgItem-5 {
		opacity: 1
}
.illustration .sideBgItem-6 {
		opacity: 1
}
.planning .sideBgItem-7 {
		opacity: 1
}
.writing .sideBgItem-8 {
		opacity: 1
}
@media(max-width: 960px) {
		.service_sideber .service_sideBg {
				position: absolute;
				left: -50px;
		}
}
@media(max-width: 767px) {
		.service_sideBg {
				display: none
		}
}