@charset "UTF-8";
/* ******************************************************************
 *	File name		: responsive.css
 * ******************************************************************
 */

@media only screen and (max-width:1400px) {
	.container {
		padding: 0 8%;
	}
	.service_group_l .service_title_main {
		font-size: 6rem;
	}
}


@media only screen and (max-width:960px) {
	main {
		margin-top: 54px;
	}
	
	/* -----------------------------------------------------------------
	page
	----------------------------------------------------------------- */
	/* パンくずリスト */
	.breadcrumb {
		position: sticky;
		z-index: 99999;
	}
	
	/*page_title */
	.page_title {
		height: 160px;
		margin-bottom: var(--spacing-8);
	}
	.page_title h2 {
		font-size: var(--font-size-title-l);
	}
	
	/* page_nav */
	.page_nav_list {
		padding: var(--spacing-2) 0;
	}
	.page_nav_list li {
		width: calc(50% - 8px);
		margin: 4px 12px 4px 0;
		padding: 10px 0 10px 10px;
	}
	.page_nav_list li:nth-child(2n) {
		margin-right: 0;
	}
	
	/* -----------------------------------------------------------------
	service
	----------------------------------------------------------------- */
	.page_service_container h2 {
		font-size: var(--font-size-title-l);
	}
}


@media only screen and (max-width:768px) {
	body {
		font-size: var(--font-size-text-s);
	}
	
	.arrow {
		display: block;
		width: 24px;
		background-image: url("../image/base/arrow.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	.box {
		margin-bottom: var(--spacing-4);
	}
	
	/* -----------------------------------------------------------------
	#work
	----------------------------------------------------------------- */
	#work {
		padding-bottom: var(--spacing-4);
	}
	.work_container {
		padding-top: var(--spacing-6);
	}
	.work_box_container {
		flex-direction: column;
		margin-bottom: 0;
	}
	.work_box {
		width: 100%;
		min-width: 100%;
		margin-bottom: var(--spacing-2);
		padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
	}
	.work_box_text {
		font-size: var(--font-size-title-s);
		font-family: var(--font-family-title);
		text-align: center;
		margin-bottom: 0;
	}
	.work_box_list {
		height: 150px;
		font-size: 1.2rem;
	}
	.work_box_img {
		height: 160px;
	}
	
	/* work_box */
	.work_sample .work_box_img {
		height: 160px;
	}
	.work_box_description {
		padding: var(--spacing-1) var(--spacing-2);
	}
	.work_box_text_title span {
		margin-top: 0;
		font-size: 1.2rem;
	}
	.work_sample_img-only {
		flex-direction: row;
	}
	.work_sample_img-only img {
		width: calc(100% / 2);
}
	
	/* -----------------------------------------------------------------
	#contact
	----------------------------------------------------------------- */
	#contact {
		padding: var(--spacing-8) 0;
	}
	.contact_text_title {
		font-size: var(--font-size-title-m);
	}
	.contact_text::after {
		margin: var(--spacing-3) 0;
	}
	.contact_contact {
		flex-direction: column;
	}
	.contact_contact_mail {
		text-align: center;
		letter-spacing: 1px;
	}
	.contact_contact_mail::before {
		padding-top: 2px;
	}
	
	/* -----------------------------------------------------------------
	footer
	----------------------------------------------------------------- */
	.footer_banner {
		flex-direction: column;
		height: 128px;
		line-height: 64px;
	}
	.footer_banner a {
		font-size: var(--font-size-text-m);
	}
	.footer_banner a::after {
		position: absolute;
		right: 24px;
		top: 20px;
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background: var(--background-arrow);
		background-size: contain;
	}
	#footer .container {
		padding-top: var(--spacing-3);
	}
	.footer_container {
		flex-direction: column-reverse;
	}
	.footer_info_containar {
		width: 100%;
		border-top: 1px solid var(--color-gray-l);
		padding-top: var(--spacing-2);
	}
	.footer_logo {
		width: 120px;
		margin-bottom: var(--spacing-1);
	}
	.footer_info_address {
		float: left;
		margin-right: 32px;
		margin-bottom: var(--spacing-2);
	}
	.footer_nav {
		width: 100%;
	}
	.footer_nav_container {
		margin-bottom: var(--spacing-1);
	}
	.footer_copy {
		padding-top: var(--spacing-2);
	}
	
	/* -----------------------------------------------------------------
	page
	----------------------------------------------------------------- */
	.content {
		margin-bottom: var(--spacing-6);
	}
	
	/* -----------------------------------------------------------------
	top / main visual
	----------------------------------------------------------------- */
	.mv_title {
		flex-direction: column;
		margin-bottom: 40px;
	}
	.mv_title_main {
		margin-right: 0;
		margin-bottom: 24px;
	}
	.mv_title_sub_group {
		margin-bottom: 0;
		text-align: center;
	}
	.mv_title_sub {
		margin-bottom: 16px;
		font-size: 1.8rem;
	}
	.btn_university {
		margin: 0 auto 16px;
	}
	.mv_img {
		height: 320px;
	}
	.mv_img_arrow {
		top: -40px;
		right: 0;
		width: 98%;
	}
	.mv_img_movie {
		height: 320px;
	}
	
	/* -----------------------------------------------------------------
	top / #info
	----------------------------------------------------------------- */
	#info {
		margin-bottom: var(--spacing-8);
	}
	.info_box time {
		font-size: 1rem;
	}
	
	/* -----------------------------------------------------------------
	#service
	----------------------------------------------------------------- */
	#service {
		margin-bottom: var(--spacing-8);
	}
	.service_group_l, .service_group_m, .service_group_s {
		flex-direction: column;
		margin-bottom: var(--spacing-4);
	}
	.service_group_l {
		flex-direction: column-reverse;
	}
	.service_group_l .service_content {
		width: 100%;
	}
	.service_group_l img {
		margin: 0 auto 16px;
		max-width: calc(50% + 100px);
	}
	.service_group_l_web img {
		margin-bottom: 0;
	}
	.service_title {
		position: relative;
		width: 100%;
		margin-bottom: var(--spacing-1);
		padding: 0 0 var(--spacing-1) 32px;
	}
	.service_title_flex::before {
		width: 12px;
		height: calc(100% - var(--spacing-1));
	}
	.service_title_main {
		font-size: var(--font-size-title-m);
	}
	.service_group_l .service_title_main {
		font-size: 4rem;
	}
	.service_title_sub {
		font-size: 2rem;
	}
	.service_list li {	
		margin-bottom: 0.3rem;
		font-size: 1.2rem;
	}
	.service_group_container {
		flex-direction: column;
	}
	.service_group_m {
		width: 100%;
	}
	.service_group_m {
		flex-direction: column;
	}
	.service_group_m img {
		height: 160px;
	}
	.service_group_m .service_content {
		margin-top: var(--spacing-1);
	}
	.service_group_s .service_title_sub {
		font-size: 1.6rem;
	}
	.service_group_s img {
		margin: 0 0 24px 0;
		width: 100%;
	}
	
	/* service_box */
	.service_box_m_container {
		flex-direction: column;
		margin-bottom: var(--spacing-3);
	}
	.service_box_m {
		width: 100%;
		margin-bottom: var(--spacing-3);
	}
	.service_box_m:last-child {
		margin-bottom: 0;
	}
	.service_box_m_img {
		height: 160px;
	}
	.service_box_m_content {
		position: relative;
		margin: var(--spacing-2) var(--spacing-3) var(--spacing-3);
	}
	.service_box_m_title {
		font-size: var(--font-size-title-m);
		line-height: 1.2;
	}
	.service_box_m_text {
		max-width: 450px;
	}
	
	/* -----------------------------------------------------------------
	top / #university
	----------------------------------------------------------------- */
	.university_main {
		padding: var(--spacing-4) 0 var(--spacing-6);
	}
	.university_main_title_2 {
		margin-bottom: var(--spacing-3);
	}
	.university_main_title_2 span {
		font-size: var(--font-size-title-m);
	}
	.university_sub {
		padding: var(--spacing-6) 0;
	}
	.university_sub_title {
		margin-bottom: var(--spacing-2);
	}
	.service_box_s_container {
		flex-direction: column;
	}
	.service_box_s {
		width: 100%;
		margin-bottom: var(--spacing-2);
		padding:  var(--spacing-2);
	}
	.service_box_s:last-child {
		margin-bottom: 0;
	}
	.service_box_s p::before {
		width: 12px;
	}
	
	/* -----------------------------------------------------------------
	top / #strength
	----------------------------------------------------------------- */
	#strength {
		padding: var(--spacing-6) 0 var(--spacing-8);
	}
	.strength_title {
		font-size: var(--font-size-title-m);
	}
	.strength_box_container {
		margin-top: var(--spacing-2);
	}
	.strength_box_container_inner {
		margin-bottom: var(--spacing-2);
	}
	.strength_box {
		width: 192px;
	}
	.strength_box_number {
		margin-bottom: var(--spacing-1);
		font-size: 40px;
	}
	.strength_box_img {
		margin-bottom: var(--spacing-1);
	}
	
	/* -----------------------------------------------------------------
	service
	----------------------------------------------------------------- */
	/*page_title */
	.page_service {
		margin: 0 auto 40px;
	}
	.page_service_container {
		margin-top: var(--spacing-8);
	}
	.page_service_container h2 {
		margin-bottom: var(--spacing-3);
	}
	.page_title_service_l {
		margin-bottom: var(--spacing-1);
	}
	.page_title_service_l span {
		padding: 4px 8px;
		font-size: var(--font-size-title-s);
		line-height: 1.2;
	}
	.page_title_service_s {
		margin-bottom: var(--spacing-6);
	}
	.page_service_list_outer {
		padding: var(--spacing-3);
	}
	.page_service_list_box {
		width: calc(100% / 2);
		padding: var(--spacing-2) var(--spacing-1) var(--spacing-3);
	}
	.page_service_list_box:nth-child(3n) {
		border-right: 1px solid var(--color-gray-l);
	}
	.page_service_list_box:nth-child(2n) {
		border-right: none;
	}
	.page_service_list_box:nth-last-child(2),.page_service_list_box:nth-last-child(1) {
		border-bottom: none;
	}
	.page_service_list_box:nth-last-child(3) {
		border-bottom: 1px solid var(--color-gray-l);
	}
	.page_service_list_box strong {
		font-size: var(--font-size-text-s);
	}
	.page_service_list_icon {
		width: 80px;
		height: 80px;
	}
	
	/* -----------------------------------------------------------------
	company
	----------------------------------------------------------------- */
	.company_list {
		width: 100%;
		height: 60px;
		margin-bottom: var(--spacing-2);
		font-size: var(--font-size-text-l);
	}
	.company_list a {
		line-height: 60px;
	}
	.company_concept_title {
		font-size: var(--font-size-title-m);
	}
	
	/* -----------------------------------------------------------------
	company / philosophy
	----------------------------------------------------------------- */
	.philosophy {
		flex-direction: column;
	}
	.philosophy_title {
		width: 100%;
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid var(--color-gray-l);
		font-size: var(--font-size-title-s);
	}
	.philosophy_text {
		width: 100%;
		padding-top: var(--spacing-3);
		padding-left: 0;
	}
	.philosophy_text p {
		margin-bottom: var(--spacing-3);
	}
	
	/* -----------------------------------------------------------------
	company /history
	----------------------------------------------------------------- */
	.history {
		padding-left: 8%;
		border-left: none;
	}
	.history th {
		width: 64px;
	}
	.history td {
		padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
	}
	.history .month {
		width: 32px;
		padding-left: 0;
	}
	
	/* -----------------------------------------------------------------
	work
	----------------------------------------------------------------- */
	#work_page .work_container {
		margin-bottom: var(--spacing-2);
	}
}


@media only screen and (max-width:400px) {
	/* -----------------------------------------------------------------
	#work
	----------------------------------------------------------------- */
	#work {
		padding-bottom: var(--spacing-4);
	}
	.work_client_list {
		overflow-y: scroll;
		height: 400px;
		margin-bottom: 0;
	}
	
	/* -----------------------------------------------------------------
	#contact
	----------------------------------------------------------------- */
	#contact {
		padding: var(--spacing-8) 0;
	}
	.contact_text_title {
		font-size: var(--font-size-title-s);
	}
	.contact_contact_phone {
		font-size: 8vw;
	}
	.contact_contact_mail a {
		width: 100%;
	}
	
	/* -----------------------------------------------------------------
	#footer
	----------------------------------------------------------------- */
	.footer_nav_container {
		flex-direction: column;
	}
	.footer_nav_group {
		margin-right: 0;
	}
	.footer_nav_l {
		display: block;
		margin-bottom: var(--spacing-2);
		font-weight: bold;
	}
	.footer_nav_s {
		display: block;
		margin-bottom: var(--spacing-2);
		color: var(--color-gray-d);
		font-size: var(--font-size-text-s);
	}
	.footer_copy {
		flex-direction: column;
	}
	.footer_copy a {
		margin-bottom: 1rem;
	}
	
	/* ナビゲーションの開閉 */
	.nav_hidden {
		display: none;
	}
	.nav_open {
		display: block;
		position: relative;
		float: right;
	}
	.nav_open::before {
		content: "−";
		display: block;
		position: absolute;
		top: -40px;
		right: 0;
		font-size: 2rem;
	}
	.nav_open.active::before {
		content: "+";
	}
	
	/* -----------------------------------------------------------------
	page
	----------------------------------------------------------------- */
	/*page_title */
	.page_title {
		height: 128px;
		margin-bottom: var(--spacing-4);
	}
	
	/* -----------------------------------------------------------------
	top / #university
	----------------------------------------------------------------- */
	.university_main_title_2 span {
		font-size: var(--font-size-title-s);
	}
	.university_sub_group_container {
		flex-direction: column;
		align-items: center;
		margin-bottom: var(--spacing-3);
	}
	.university_sub_group {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}
	.university_sub_group_img {
		width: 128px;
		margin-bottom: 0;
		margin-right: var(--spacing-2);
	}
	.university_sub_title {
		font-size: var(--font-size-title-s);
		margin-bottom: var(--spacing-2);
	}
	
	/* -----------------------------------------------------------------
	top / #strength
	----------------------------------------------------------------- */
	.strength_box {
		flex-direction: row;
	}
	
	/* -----------------------------------------------------------------
	service
	----------------------------------------------------------------- */
	.page_service_container {
		margin-top: var(--spacing-6);
	}
	.page_title_service_s {
		margin-bottom: var(--spacing-4);
	}
}