@media screen and (min-width:768px){
	.sp_only{
		display: none!important;
	}
}/*@media screen and (min-width:768px){*/

@media screen and (max-width:767px){
	.sp_hide{
		display: none!important;
	}



	/*
	------------------------------------
	共通パーツ
	------------------------------------
	*/


	main{
		padding-top: 88px;
	}

	.container{
		max-width: 420px;
		padding:0;
		width: calc(335 / 375 * 100vw);
	}

	.c_page_title{
		font-size: 22px;
	}

	/*
	------------------------------------
	ヘッダー
	------------------------------------
	*/


	header .header_inner{
		padding-inline: 8px;
	}

	header .header_flex{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap:20px;
	}

	header .header_logo{
		width:86px;
		border-radius: 0 0 44px 44px;
		padding-top: 10px;
	}


	header .header_logo h1,
	header .header_logo p{
		width:calc(37 / 86 * 100%);
	}


	header .header_right{
		padding-top: 12px;
	}

	header .header_nav{
		display: none;
	}


	header .drawer_open{
		display: flex;
		justify-content: center;
		align-items: center;
		width:50px;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		cursor: pointer;
		pointer-events: auto;
		backdrop-filter: blur(32px);
		-webkit-backdrop-filter: blur(32px);
		background-color: rgba(0, 0, 0, 0.13);
		position: relative;
		z-index: 2000;
		transition-duration: var(--c_duration);
	}

	header .drawer_open.active{
		background-color: transparent;
		backdrop-filter: blur(0);
		--webkit-backdrop-filter: blur(0);
	}


	header .drawer_open_inner{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	header .drawer_open .bar{
		width:15px;
		height:1px;
		border-radius: 1px;
		background-color: #fff;
		transition-duration: 0.5s;
	}

	header .drawer_open .bar02{
		margin-top:6px;
	}
	
	header .drawer_open.active .bar{
		width:22px;
	}
	header .drawer_open.active .bar01 {
		transform: translateY(2px) rotate(-45deg);
	}
	header .drawer_open.active .bar02 {
		margin-top: 0;
		transform: translateY(1px) rotate(45deg);
	}

	#drawer_menu{
		position: fixed;
		top:0;
		right:0;
		z-index:1001;
		width:100%;
		height: 100dvh;
		transition-duration: 0.5s;
		opacity: 0;
		pointer-events: none;
		transition-property: opacity;
		backdrop-filter: blur(32px);
		--webkit-backdrop-filter: blur(32px);
		background-color: rgba(0, 0, 0, 0.13);
		overflow-y: auto;
	}

	#drawer_menu.show{
		opacity: 1;
		pointer-events: auto;
	}

	#drawer_menu .drawer_menu_inner{
		min-height: 100dvh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#drawer_menu .drawer_logo{
		display: block;
		position: fixed;
		top:15px;
		left:24px;
		width:51px;
		z-index: 2001;
	}

	#drawer_menu .drawer_menu_contents{
		width:100%;
		padding-inline: 24px;
	}

	#drawer_menu .drawer_parent_menu{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap:64px;
	}

	#drawer_menu .drawer_parent_link{
		font-family: var(--font_instrumen);
		font-size: 20px;
		letter-spacing: 0.1em;
		line-height: 1.2;
		text-align: center;
		color: #fff;

	}

	/*
	------------------------------------
	フッター
	------------------------------------
	*/


	footer{
		padding-top: 36px;
		padding-bottom: 24px;
	}



	footer .footer_flex{
		display: block;
		padding-inline: 10px;
	}


	footer .footer_left{
		display: block;
		
	}

	footer .footer_left_block{
		display: flex;
		gap:32px;
	}

	footer .footer_logo_frame{
		flex-shrink: 0;
	}

	footer .footer_logo{
		width:58px;
	}

	footer .footer_info_area{
		display: flex;
		align-items: center;
	}

	footer .footer_name{
		font-size: 22px;
		letter-spacing: 0.05em;
		line-height: 1.3;
	}

	footer .footer_info{
		margin-top: 6px;
		font-weight: 500;
		font-size: 12px;
	}

	footer .footer_nav{
		display: block;
		padding-top: 0;
		margin-top: 24px;
		border-top:1px solid #222222;
	}

	footer .footer_menu{
		padding-left: 0;
		border-left:none;
		
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap:0;
		font-size: 16px;
	}

	footer .footer_menu_item{
		border-bottom:1px solid #222222;
	}

	footer .footer_menu_link{
		min-height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:12px 0;
		padding-right: 5px;
	}

	footer .footer_menu_link::after{
		content:'';
		width:17px;
		aspect-ratio: 1 / calc(5 / 17);
		background-image: url('../img/common/icon_arrow_right_white.svg');
	}

	footer .footer_right{
		margin-top: 24px;
	}

	footer .footer_sns_list{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap:18px;
	}

	footer .footer_sns_item{
		width:48px;
	}


	footer .footer_copy{
		margin-top: 24px;
		font-size: 10px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	/*
	------------------------------------
	TOP
	------------------------------------
	*/

	main.top_main{
		padding-top: 0;
	}

	.top_section{

	}


	.top_fv_section .fv_inner{
		height:100svh;
		min-height: 500px;
	}


	.top_fv_section .site_logo{
		width:120px;
	}

	.top_philosophy_section{
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.top_philosophy_section .philosophy_head{
		font-size: 14px;
		letter-spacing: 0.04em;
	}

	.top_philosophy_section .philosophy_text{
		margin-top: 6px;
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.05em;
		line-height: 1.7;
		text-align: center;
	}

	.top_portfolio_section{
		padding-top: 24px;
		padding-bottom: 56px;
	}


	.top_portfolio_section .container{
		width: 100%;
	}

	.top_portfolio_section .sec_head{
		margin-top: 32px;
		font-size: 22px;
	}

	.top_portfolio_section .main_slide_area{
		position: relative;
	}

	.top_portfolio_section .main_slide_frame{
		aspect-ratio: 1 / calc(211 / 375);
	}

	.top_portfolio_section .portfolio_cat_list{
		width: fit-content;
		max-width: 250px;
		position: static;
		margin-inline: auto;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
		gap:12px 30px;
		font-size: 17px;
		letter-spacing: 0.04em;
		margin-bottom: 20px;
		color:#969696;
	}

	.top_portfolio_section .portfolio_cat_list li{
		padding-bottom: 4px;
	}
	.top_portfolio_section .portfolio_cat_list li::after{
		width:20px;
		background-color: #969696;
	}

	.top_portfolio_section .portfolio_card{
		aspect-ratio: 1 / calc(211 / 375);
	}

	.top_portfolio_section .video_play{
		width:85px;
		border:2px solid #fff;
		padding-left: 5px;
	}
	.top_portfolio_section .video_play::after{
		width:13px;
	}

	.top_portfolio_section .video_play.vanish{
		opacity: 0;
		pointer-events: none;
	}

	.top_portfolio_section .sub_slide_area{
		margin-top: 24px;
	}

	.top_portfolio_section .sub_slide_frame{
		position: relative;
		padding-inline: 0;
	}

	.top_portfolio_section .portfolio_sub_swiper{
		overflow: clip;
		padding-left: 24px;
	}

	.top_portfolio_section .sub_slide_nav{
		display: none;
	}

	.top_portfolio_section .thumb_slide{
		width:151px;
		margin-right: 16px;
	}

	.top_portfolio_section .swiper-slide-thumb-active .portfolio_pic{
		border:4px solid #fff;
	}

	.top_portfolio_section .portfolio_pic{
		aspect-ratio: 1 / calc(190 / 151);
		border-radius: 10px;
	}

	.top_portfolio_section .portfolio_sub_info_area{
		margin-top: 10px;
		padding-inline: 8px;
	}

	.top_portfolio_section .portfolio_name{
		font-size: 13px;
		letter-spacing: 0;
		line-height: 1.2;
	}

	.top_portfolio_section .portfolio_info{
		font-weight: 500;
		font-size: 10px;
		letter-spacing: 0.05em;
		line-height: 1.2;
		margin-top: 2px;
	}

	.top_portfolio_section .portfolio_button_frame{
		margin-top: 32px;

	}

	.top_portfolio_section .portfolio_button{
		width: 183px;
		min-height: 45px;
		font-size: 14px;
		padding-right: 4px;
	}

	.top_portfolio_section .portfolio_button span::after{
		width:17px;
		left: calc(100% + 10px);
	}

	.top_project_section{
		padding-top: 50px;
		padding-bottom: 70px;
	}

	.top_project_section .sec_head{
		font-family:var(--font_instrumen);
		font-weight: 400;
		font-size: 30px;
		letter-spacing: 0.04em;
		text-align: center;
	}

	.top_project_section .project_list{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap:12px;
		margin-top: 28px;
	}

	.top_project_section .project_item{
		width:auto;
	}

	.top_project_section .project_border{
		display: none;
	}

	.top_project_section .project_block{
		border-radius: 14px;
	}



	/*
	------------------------------------
	PORTFOLIO
	------------------------------------
	*/

	.portfolio_list_section{
		padding-bottom: 72px;
	}

	.portfolio_list_section .port_cat_list{
		margin-top: 24px;
		font-size: 17px;
		letter-spacing: 0.04em;
		color: #333;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		max-width: 320px;
		gap:10px 32px;
	}

	.portfolio_list_section .port_cat_link{
		padding-bottom: 2px;
		position: relative;
	}

	.portfolio_list_section .port_cat_link::after{
		width:20px;
		height:1px;
	}


	.portfolio_list_section .port_list_area{
		margin-top: 16px;
	}

	.portfolio_list_section .port_list{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap:32px 12px;
	}


	.portfolio_list_section .port_pic{
		aspect-ratio: 1 / calc(277 / 167);
	}

	.portfolio_list_section .port_pic img{
		border-radius: 10px;
	}

	.portfolio_list_section .port_info_area{
		margin-top: 10px;
		padding-inline: 6px;
	}

	.portfolio_list_section .port_name{
		font-size: 13px;
		letter-spacing: 0;
		line-height: 1.2;
	}

	.portfolio_list_section .port_info{
		font-weight: 500;
		font-size: 10px;
		letter-spacing: 0.05em;
		line-height: 1.5;
		margin-top: 2px;
	}

	.portfolio_list_section .more_button_frame{
		margin-top: 32px;
		display: none;
	}


	.portfolio_list_section .more_button{
		gap:8px;
		width:140px;
		min-height: 48px;
		padding:6px 24px;
		font-size: 13px;
		letter-spacing: 0.1em;
		line-height: 1.5;		
	}

	.portfolio_list_section .more_button span{
		padding-left: 10px;
	}

	.portfolio_list_section .more_button::after{
		width:12px;
	}

	.portfolio_list_section .port_item:nth-child(n+17){
		display: none;
	}

	.portfolio_list_section:has(.port_item:nth-child(n+17)) .more_button_frame{
		display: block;
	}

	.portfolio_list_section .port_pop{

	}

	.portfolio_list_section .port_pop_inner{
		width: 92%;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.portfolio_list_section .port_pop_frame{
		position: relative;
		width: 100%;
	}

	.portfolio_list_section .port_pop_close{
		right:0;
		bottom:calc(100% + 8px);
	}

	.portfolio_list_section .port_pop_close::after{
		width:24px;
	}

	.portfolio_list_section .port_video_area{
		min-height: 150px;
	}


	.portfolio_list_section .port_video_play{
		width:60px;
		border:2px solid #fff;
		padding-left: 5px;
	}
	.portfolio_list_section .port_video_play::after{
		width:13px;
	}

	
	/*
	------------------------------------
	ABOUT US
	------------------------------------
	*/

	.about_prof_section{
		padding-bottom: 30px;
	}


	.about_prof_section .prof_flex{
		margin-top: 24px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		gap:24px;
	}


	.about_prof_section .prof_left{
		flex-shrink: 0;
		width:100%;
	}

	.about_prof_section .prof_right{
		width:100%;
	}

	.about_prof_section .prof_head{
		font-size: 10px;
		letter-spacing: 0.04em;
		line-height: 1.5;
	}

	.about_prof_section .prof_name{
		font-size: 46px;
		letter-spacing: 0.04em;
		line-height: 1.3;
	}

	.about_prof_section .prof_text{
		margin-top: 10px;
		font-size: 13px;
		letter-spacing: 0.03em;
		line-height: 1.75;
	}

	.about_work_section{
		padding-top:48px;
		padding-bottom: 56px;
	}

	.about_work_section .work_block_list{
		margin-top: 16px;
	}


	.about_work_section .work_block_head{
		font-size: 15px;
		padding:24px 24px 24px 0;
	}

	.about_work_section .work_block_switch{
		width: 12px;
		right:3px;		
	}

	.about_work_section .work_block_switch::before,
	.about_work_section .work_block_switch::after{
		height:1px;
	}

	.about_work_section .work_block_switch::after{
		margin-top: -1px;
	}


	.about_work_section .work_block_contents{
		padding-bottom: 24px;
		/* display: block; */
	}	

	.about_work_section .work_list_flex{
		display: block;
	}

	.about_work_section .work_list{
		width:100%;
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.75;
	}

	.about_work_section .work_list li{
		padding-left: 13px;
	}

	.about_work_secti6n .work_list li + p{
		margin-top: 16px;
	}

	.about_work_section .work_list li::before{
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.75;
	}

	.about_company_section{
		padding-top: 60px;
		padding-bottom: 44px;
	}

	.about_company_section .info_list{
		margin-top: 20px;
	}

	.about_company_section .info_line{
		padding-top: 30px;
		padding-bottom: 20px;
		display: block;
	}

	.about_company_section .info_line:first-child{
		padding-top: 0;
	}

	.about_company_section .info_title{
		min-height: 36px;
		
		width:100%;
		padding:8px;
		border-radius: 10px;
		font-weight: 500;
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.3;
	}

	.about_company_section .info_contents{
		width:100%;
		min-height: auto;
		margin-top: 20px;
		font-weight: 500;
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.8;
		display: block;
	}

	.about_company_section .info_contents.center{
		text-align: center;
	}

	.about_company_section .info_contents ul li{
		padding-left: 13px;
		text-align: left;
	}
	.about_company_section .info_contents ul li::before{
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.8;
	}

	.about_company_section .info_remark{
		margin-top: 20px;
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.75;
	}


	/*
	------------------------------------
	CONTACT
	------------------------------------
	*/

	.contact_form_section{
		padding-bottom: 64px;
	}

	.contact_form_section .form_area{
		margin-top: 22px;
	}

	.contact_form_section .form_line + .form_line{
		margin-top: 20px;
	}

	.contact_form_section .form_line:has(.form_block:nth-child(2)){
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap:20px;
	}

	.contact_form_section .text_input{
		height:52px;
		padding-inline: 16px;
		font-size: 12px;
	}

	.contact_form_section textarea{
		height:220px;
		border-radius: 10px;
		padding:12px 16px;
		font-size: 12px;
		line-height: 1.75;
		font-weight: 500;
	}

	.contact_form_section .submit_area{
		margin-top: 40px;
		gap:24px;
	}


	.contact_form_section .submit_frame::after{
		width:22px;
		top:24px;
		left:calc(50% + 12px);
		position: absolute;
		transition-duration: var(--c_duration);
		transform-origin: left;
	}

	.contact_form_section .submit_button{
		width:158px;
		height:50px;
		font-weight: 500;
		font-size: 13px;
		padding-right: 5px;
	}

	.contact_form_section .complete_text01{
		font-size: 20px;
	}

	.contact_form_section .complete_text02{
		width: fit-content;
		margin-inline: auto;
		margin-top: 24px;
		line-height: 1.75;
	}


	/*
	------------------------------------
	PRIVACY POLICY
	------------------------------------
	*/

	.privacy_section{
		padding-bottom: 56px;
	}

	.privacy_section .privacy_frame{
		margin-top: 24px;
	}

	.privacy_section .privacy_block{
		font-size: 13px;
		letter-spacing: 0.03em;
		line-height: 1.75;
	}

	.privacy_section .privacy_block + .privacy_block{
		margin-top: 32px;
	}

	.privacy_section .privacy_head{
		font-size: 16px;
		letter-spacing: 0.03em;
		line-height: 1.5;
	}


	.privacy_section .privacy_text{
		margin-top: 10px;
	}

	.privacy_section .privacy_block ul li{
		position: relative;
		padding-left: 12px;
	}

	.privacy_section .privacy_block ul li::before{
		content:'・';
		font-size: 13px;
		letter-spacing: 0.03em;
		line-height: 1.75;
	}

}/*@media screen and (max-width:767px){*/