@media screen and (max-width: 1380px) {
	#join-our-team .infographic_wrapper .infographic_box3 svg {
		padding: 0;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info .chart_info_inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width: 1250px) {
	#who-we-are #history .company-container {
		display: block;
		min-height: 0;
		padding-bottom: 150px;
	}
	#who-we-are #history .company-history {
		padding-right: 0;
	}
	#who-we-are #history .company-history::before {
		translate: -50% -50%;
		min-width: 1200px;
	}
	#who-we-are #history .company-keyclients {
		min-width: 500px;
		margin-left: auto;
	}
}
@media screen and (max-width: 1100px) {
	#join-our-team .infographic_wrapper {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(3, auto);
		padding-top: 4rem;
	}
	#join-our-team .infographic_wrapper .infographic_box1 {
		grid-column: 1 / span 4;
	}
	#join-our-team .infographic_wrapper .infographic_box2 {
		grid-column: 5 / span 4;
	}
	#join-our-team .infographic_wrapper .infographic_box3 {
		grid-column: 1 / span 8;
		grid-row: 2;
		display: flex;
		justify-content: center;
	}

	#join-our-team .infographic_wrapper .infographic_box3 svg {
		margin: 40px 40px 20px 40px;
		padding: 8px;
		width: 50%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info .info_text_big_outter {
		max-width: 64px;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info1 {
		position: absolute;
		top: 5%;
		left: 40%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info2 {
		position: absolute;
		top: 20%;
		right: 20%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info3 {
		position: absolute;
		bottom: 10%;
		right: 30%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info4 {
		position: absolute;
		bottom: 30%;
		left: 20%;
	}

	#join-our-team .infographic_wrapper .infographic_box4 {
		grid-column: 1 / span 4;
		grid-row: 3;
	}
	#join-our-team .infographic_wrapper .infographic_box5 {
		grid-column: 5 / span 4;
		grid-row: 3;
	}

}
@media screen and (max-width: 768px) {
	:root {
		--left-space: 6vw;
		--right-space: 6vw;
	}
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}

	/* header */
	header {
		padding: 0 var(--right-space) 0 var(--left-space);
	}

	/* footer */
	footer .inner {
		padding: 15vw var(--right-space) 15vw var(--left-space);
		border-radius: 30vw 0;
	}
	footer .link {
		padding-left: .5em;
	}
	footer .copy {
		display: block;
	}
	footer .copy .copyright {
		margin-right: 0;
		text-align: center;
	}
	footer .copy .to-policy {
		padding-top: 1em;
		text-align: right;
	}
	footer .copy .to-policy a {
		margin-right: 1.5em;
	}

	/* navigation */
	.nav .body .menu {
		position: absolute;
		width: 100%;
		padding: calc(160px + 2vw) var(--right-space) 0 var(--left-space);
		transition: left .3s;
	}
	.nav .body .sub-menu {
		left: 100%;
	}
	.nav.sub .body .main-menu {
		left: -100%;
	}
	.nav.sub .body .sub-menu {
		left: 0;
	}
	.nav .body .sub-menu .back-main {
		display: block;
	}
	.nav .body .sub-menu .subMenuLabel {
		display: block;
	}
	.nav .foot ul {
		align-items: center;
	}
	.nav .foot ul li {
		padding-left: var(--left-space);
	}
	.nav .foot ul li.contact,
	.nav .foot ul li.privacy {
		width: 50%;
	}

	/* Who we are */
	#who-we-are #vision {
		padding-top: calc(var(--header-height) + 25vw);
	}
	#who-we-are #vision .catch-ja {
		margin-bottom: 1em;
	}
	#who-we-are #vision .catch-en {
		padding-left: 2em;
	}
	#who-we-are #what-we-believe-in .circle ul li.blue {
		top: auto;
		bottom: 10vw;
		left: -30vw;
	}
	#who-we-are #what-we-believe-in .circle ul li.yellow {
		bottom: auto;
		top: 0;
		right: 0;
	}
	#who-we-are #what-we-believe-in .catch-ja {
		padding-left: 0;
	}
	#who-we-are #what-we-believe-in .catch-en {
		padding-left: 2em;
	}
	#who-we-are #company .pics .switch-pic {
		bottom: -1.5em;
		left: auto;
		right: 12vw;
	}
	#who-we-are #gallery .gallery-swiper ul li {
		margin: 2vw 2.5vw;
	}

	/* What we do */
	#what-we-do #commitment .catch-ja {
		margin-bottom: 1em;
	}
	#what-we-do #commitment .catch-en {
		padding-left: calc(var(--left-space) * 1.5);
	}
	#what-we-do .projects {
		padding-top: 6rem;
		padding-top: var(--header-height);
	}
	#what-we-do .projects .content {
		width: 100%;
	}
	#what-we-do .projects .wrapper {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#what-we-do .projects .content {
		padding: 0 var(--right-space) 2em var(--left-space) !important;
	}
	#what-we-do .projects .content .catch-en {
		padding-left: calc(var(--left-space) * 1.5);
	}
	#what-we-do .projects .content .catch-ja {
		padding-top: 1em;
	}
	#what-we-do .projects .catch-ja {
		margin-bottom: 1em;
		white-space: normal;
	}
	#what-we-do .projects .works {
		width: 100vw;
		height: 100vw;
	}
	#what-we-do .projects .works button {
		font-size: 24px;
	}
	#what-we-do #creative-projects .subtitle {
		text-align: initial;
	}
	#what-we-do #creative-projects .content {
		width: 100%;
	}
	#what-we-do #creative-projects .works figure {
		margin-left: calc(var(--left-space) * -1.5);
	}
	#what-we-do #creative-projects .works figure,
	#what-we-do #creative-projects .works figure img {
		width: 90vw;
		height: 90vw;
	}
	#what-we-do #creative-projects .works figure figcaption {
		position: absolute;
		width: 100%;
		top: 95vw;
		left: auto;
		right: auto;
		bottom: auto;
		margin-left: calc(var(--left-space) * 1.5);
		padding: 1em;
		padding-left: calc(var(--left-space) * 2.5);
	}
	#what-we-do #creative-projects .works button {
		top: calc(95vw + .5em);
		left: 10px;
	}
	#what-we-do #web-projects .wrapper {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#what-we-do #web-projects .works figure {
		margin-top: 1em;
	}
	#what-we-do #web-projects .works figure,
	#what-we-do #web-projects .works figure img {
		width: 91vw;
	}
	#what-we-do #web-projects .works {
		height: 75vw;
	}
	#what-we-do #web-projects .works figure {
		height: 75vw;
		margin-left: 9vw;
	}
	#what-we-do #web-projects .works figure figcaption {
		position: absolute;
		width: calc(100% / 0.91);
		top: 77vw;
		left: -9vw;
		right: auto;
		bottom: auto;
		padding: 1em;
		padding-left: calc(var(--left-space) * 2.5);
	}
	#what-we-do #web-projects .works button {
		top: calc(77vw + 1em);
		left: 10px;
	}
	#what-we-do #development-projects .subtitle {
		text-align: initial;
	}
	#what-we-do #development-projects .works {
		height: 75vw;
	}
	#what-we-do #development-projects .works figure {
		margin-top: 1em;
		margin-right: 9vw;
	}
	#what-we-do #development-projects .works figure,
	#what-we-do #development-projects .works figure img {
		width: 91vw;
	}
	#what-we-do #development-projects .works figure figcaption {
		position: absolute;
		width: calc(100% / 0.91);
		top: 70vw;
		left: 9vw;
		right: auto;
		bottom: auto;
		margin-left: calc(var(--left-space) * 1.5);
		padding: 1em;
		padding-left: calc(var(--left-space) * 2.5);
	}
	#what-we-do #development-projects .works button {
		top: calc(70vw + 1em);
		left: 10px;
	}

	/* Privacy Policy */
	#privacy-policy #policy {
		padding-top: calc(var(--header-height) + 25vw);
	}
	#privacy-policy #policy .lock {
		top: 25vw;
		right: 25vw;
	}
	#privacy-policy #policy .catch-ja {
		margin-bottom: 1em;
		padding-right: 0;
		padding-bottom: 40vw;
		background-position: right bottom;
		background-size: auto 40vw;
	}

	/* join our team */
	#join-our-team .hiring_box .hiring_wrapper .hiring_inner .hiring_inner_left {
		grid-column: 1 / span 8;
	}
	#join-our-team .hiring_box .hiring_wrapper .hiring_inner .hiring_inner_right {
		grid-column: 1 / span 8;
		grid-row: 2;
	}
	#join-our-team .recruit_section, 
	#job_description .recruit_section {
		margin-bottom: 12rem;
	}
	#join-our-team .cta_link_box,
  #job_description .cta_link_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#job_description .job_details .table_wrapper table tbody tr {
	display: flex;
	flex-direction: column;
}
#job_description .job_details_1 .table_wrapper table tbody tr:first-child {
	border-bottom: 0;
}
#job_description .job_details_2 .table_wrapper table tbody tr:nth-child(-n+7) {
	border-bottom: 0;
}
#job_description .job_details .table_wrapper table tbody tr th {
	padding-bottom: 1rem;
}
#job_description .job_details .table_wrapper table tbody tr td {
	padding-top: 2rem;
}
}

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

	/* join our team */
	#join-our-team .work_wrapper {
		padding-top: 4rem;
	}
	#join-our-team .work_wrapper .work_box {
		row-gap: 24px;
		margin-bottom: 8rem;
	}
	#join-our-team .work_wrapper .work_box .work_animation-area {
		grid-column: 1 / span 8;
		grid-row: 2;
		display: flex;
		justify-content: center;
	}
	#join-our-team .work_wrapper .work_box .work_animation-area .lottie {
		width: 60%;
		padding: 2rem;
	}
	#join-our-team .work_wrapper .work_box .work_text-area {
		grid-column: 1 / span 8;
		grid-row: 1;
	}

	#join-our-team .infographic_wrapper .infographic_box3 .info_text_small_center {
		top: 52%;
		transform: translate(-50%, -52%);
	}

	#join-our-team .accordion_area {
		padding-top: 4rem;
	}
	#join-our-team .accordion_area .details_mamber .summary_member .member_info .member_icon {
		grid-column: 1 / span 3;
	}
	#join-our-team .accordion_area .details_mamber .summary_member .member_info .member_type {
		grid-column: 4 / span 9;
	}
	#join-our-team .accordion_area .details_mamber .summary_member .member_info .toggle_icon {
		width: 30px;
	}
	#join-our-team .accordion_area .details_mamber .summary_member .member_info .toggle_icon::before {
		width: 18px;
	}
	#join-our-team .accordion_area .details_mamber .summary_member .member_info .toggle_icon::after {
		width: 18px;
	}
	#join-our-team .accordion_area .details_mamber .accordion_box .acoordion_wrapper .details_inner {
		padding: 20px 24px;
	}
	#join-our-team .accordion_area .details_mamber .accordion_box .acoordion_wrapper .details_inner .summary_question {
		grid-template-columns: 32px 1fr;
	}
	#join-our-team .accordion_area .details_mamber .accordion_box .acoordion_wrapper .details_inner .answer_inner {
		padding: 0.8rem 0;
	}
	#join-our-team .hiring_box {
		padding-top: 4rem;
	}
	#join-our-team .hiring_box .hiring_wrapper .hiring_inner {
		padding: 4rem 1rem;
	}
	#join-our-team .process_box,
	#job_description .process_box {
		padding-top: 4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#join-our-team .process_box .process_wrapper,
	#job_description .process_box .process_wrapper {
		width: 80%;
		height: 120px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
		margin-right: 0px;
		margin-bottom: 16px;
	}
	#join-our-team .process_box .process_wrapper .process_ttl, 
	#job_description .process_box .process_wrapper .process_ttl {
	padding-right: 0;
}
}

@media screen and (max-width: 560px) {
	#who-we-are #history .company-keyclients {
		width: 100%;
		min-width: auto;
		margin-left: auto;
		padding: 5%;
	}
	#who-we-are #history .company-keyclients::before {
		min-width: 600px;
	}

	#join-our-team .sliderImg_wrapper {
		height: 240px;
	}
	#join-our-team .infographic_wrapper .infographic_box .infographic_box_inner .info_text_area {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .info_text_small_center {
		top: 5%;
		left: 50%;
		transform: translate(-50%, -5%);
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info1 {
		top: 17%;
		left: 36%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info2 {
		top: 25%;
		right: 5%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info3 {
		right: 20%;
	}
	#join-our-team .infographic_wrapper .infographic_box3 .chart_info4 {
		left: 10%;
		bottom: 18%;
	}
}
/* 会社概要（who-we-are）: スマホではブロック間の余白を元の約 56%（30% 詰めた後さらに 20% 詰める）に */
@media screen and (max-width: 768px) {
	#who-we-are #vision {
		padding-top: calc(var(--header-height) + 3vw); /* 46 Years → Vision（元: + 25vw） */
	}
	#who-we-are #what-we-believe-in {
		padding-top: 4.7rem; /* Vision → What we believe in（元: 12rem） */
		padding-bottom: 23.5vw; /* What we believe in → Company（元: 30vw） */
	}
	#who-we-are #office {
		padding-top: calc(var(--header-height) * 0.49); /* Company → オフィス紹介（元: ヘッダーの高さ） */
	}
	#who-we-are #history .company-history h3 {
		margin-top: 30px; /* オフィス紹介 → History（元: 80px） */
	}
	#who-we-are #history .company-container {
		padding-bottom: 50px; /* History → ギャラリー（元: 150px） */
	}
	/* 冒頭の画像: スマホでは枠が画像より横長になり左右に動かせないため、少し拡大して横に余裕を作る（main.js の panCraftPicture） */
	#who-we-are #craft45 .pic {
		background-size: 130% auto;
	}
}