/* スマホ向けCSS */
@media screen and (max-width:767px) {

	body{
		-webkit-text-size-adjust: 100%;
	}
	
	/**************** ヘッダー内コンテンツ *****************/
	
	
	header{
		width:100%;
		position:relative;
	}
	
	.header_top {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 2% 0;
		background: rgba(1,18,24,.5);
		z-index: 100;
	}
	
	.main_image{
		width: 100%;
		height: 100vh;
	}
	
	.main_image_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	.main_image_bg video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
		object-fit: cover;
	}
	
	.main_image_bg .video_pc {
		display: none;
	}
	
	.main_image_bg .video_sp {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: none;
	}

	.video_overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}

	.decoration {
		position: absolute;
		z-index: 1;
		pointer-events: none;
	}
	
	.left-bottom {
		left: 0;
		bottom: 0;
		width: 20vw;
		rotate: 180deg;
	}
	
	.right-top {
		right: 0;
		top: 0;
		width: 30vw;
	}
	
	.main_image_inner_contents{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		z-index: 2;
		text-align: center;
	}
	
	.catchcopy {
		color: #fff;
		font-size: 5vw;
		font-weight: 800;
		line-height: 1.5;
		margin: 0 0 0.5em;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		letter-spacing: 0.05em;
	}
	
	.subcopy {
		color: #fff;
		font-size: 3.5vw;
		font-weight: 500;
		line-height: 1.5;
		margin: 0 0 1em;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	}
	
	.btn_wrapper {
		text-align: center;
	}
	
	.btn_contact {
		display: inline-block;
		padding: 12px 32px;
		background: #FFFFFF;
		color: #000000;
		text-decoration: none;
		font-weight: 700;
		font-size: 18px;
		border-radius: 4px;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
		transition: opacity 0.3s;
		min-width: 280px;
		text-align: center;
	}
	
	.btn_contactBlack {
		background: #000000 !important;
		color: #FFFFFF !important;
	}
	
	.btn_contact:hover {
		opacity: 0.8;
	}
	
	/**************** ヘッダー内コンテンツ end *****************/
	
	/**************** メインコンテンツ *****************/
	main{
		background-attachment: fixed;
		background-image: url(../images/ai_background_1.png);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	/**************** メインコンテンツ end *****************/
	
	/**************** 各sectionの共通スタイル *****************/
	
	.bgSection_inner_sp {
		overflow: hidden;
	}
	
	
	.section_title {
		text-align: center;
		padding: 0 20px;
	}
	
	.section_title h2 {
		font-size: 28px;
		font-weight: 700;
		line-height: 1.2;
		color: #FFFFFF;
		padding: 20px 0;
	}
	
	.title_line {
		border: 1px solid #000;
		border-color: #FFFFFF;
		margin: 0 auto 30px;
		width: 80%;
	}
	
	.title_line_white {
		background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
	}
	
	.faq_title_line {
		width: 80px;
		height: 3px;
		background: #CCCCCC;
		margin: 0 auto;
	}
	
	/**************** 各sectionの共通スタイル end *****************/
	
	/**************** AI駆動開発とは？ *****************/
	
	section#about_sp .about_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 20px;
	}
	
	section#about_sp .about_content .about_item {
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	
	section#about_sp h2 {
		margin-top: 0;
		padding-top: 80px;
	}
	
	.about_text {
		margin: 30px 0;
		width: 100%;
		padding: 0 20px;
	}
	
	.about_text h3 {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0 0 20px;
	}
	
	.about_text p {
		font-size: 14px;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0 0 20px 0;
	}
	
	.about_image img {
		display: inline-block;
		width: 100%;
		height: 100%;
		/*box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.7);*/
	}
	
	/**************** AI駆動開発とは？ end *****************/
	
	/**************** CTAセクション *****************/
	.cta_section {
		padding: 60px 0;
		background: #FFFFFF;
		position: relative;
		top: 0;
		z-index: 0;
	}
	
	.cta_content {
		width: 100%;
		padding: 0 1.5em;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	
	.cta_text {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		margin: 0;
	}
	
	/**************** CTAセクション end *****************/
	
	/**************** EBAテックならではの強み *****************/
	
	.strength_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 20px;
	}
	
	.strength_item {
		display: flex;
		flex-direction: column;
	}
	
	.strength_text {
		width: 100%;
		margin: 20px 0 60px 0;
		padding: 0 20px;
	}
	
	.strength_text h3 {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0 0 20px;
	}
	
	.strength_text p {
		font-size: 14px;
		line-height: 1.5;
		color: #FFFFFF;
	}
	
	.strength_image {
		width: 100%;
	}
	
	.strength_image img {
		width: 100%;
		height: auto;
	}
	
	/**************** EBAテックならではの強み end *****************/
	
	/**************** サービス概要 *****************/
	.service_section {
		margin: 30px 0 0 0;
	}
	
	.service_content {
		width: 100%;
		padding: 0 1.5em;
	}
	
	.service_cards {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	
	.service_card {
		background: #FFFFFF;
		border: 1px solid #989898;
		border-radius: 20px;
		padding: 24px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.card_icon img {
		display: inline-block;
		width: 100px;
		height: 100px;
		border-radius: 8px;
	}
	
	.service_card h3 {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		text-align: center;
	}
	
	.service_card p {
		font-size: 13px;
		line-height: 1.5;
		color: #666666;
		text-align: center;
	}
	
	/**************** サービス概要 end *****************/
	
	/**************** 開発フロー／プロセス紹介 *****************/
	.process_section {
		padding: 80px 20px;
		background-position: center center;
		background-size: cover;
	}
	
	.process_wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		background-color: rgba(33,102,172,0.9);
		border-radius: 20px;
		padding: 40px 20px;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.process_section .section_title h2,
	.flow_section .section_title h2 {
		color: #FFFFFF;
	}
	
	.process_content {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	
	.process_line,
	.flow_line {
		position: absolute;
		left: 20px;
		top: 35px;
		width: 2px;
		height: calc(100% - 105px);
		background: #FFFFFF;
	}
	
	.process_steps,
	.flow_steps {
		display: flex;
		flex-direction: column;
		gap: 30px;
		position: relative;
		z-index: 1;
	}
	
	.process_step,
	.flow_step {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-left: 60px;
		position: relative;
	}
	
	.step_number {
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 40px;
		background: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: 700;
		color: #000000;
	}
	
	.process_step h3,
	.flow_step h3 {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: #FFFFFF;
		margin: 0;
	}
	
	.process_step p,
	.flow_step p {
		font-size: 14px;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0;
	}
	
	/**************** 開発フロー／プロセス紹介 end *****************/
	
	/**************** ご利用の流れ *****************/
	.flow_section {
		padding: 80px 20px;
		background-position: center center;
		background-size: cover;
	}
	
	.flow_wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		background-color: rgba(33,102,172,0.9);
		border-radius: 20px;
		padding: 40px 20px;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.flow_content {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	
	/**************** ご利用の流れ end *****************/
	
	/**************** よくあるご質問 *****************/
	.faq_section {
		padding: 80px 20px;
		background: #FFFFFF;
	}
	
	.faq_section .section_title h2 {
		color: #000000;
	}
	
	.faq_content {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	
	.faq_item {
		background: #FFFFFF;
		border: 1px solid #AAAAAA;
		border-radius: 4px;
		box-shadow: 0px 4px 0px rgba(230, 235, 239, 1);
		overflow: hidden;
		margin: 16px 0;
	}
	
	.faq_question {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px;
		cursor: pointer;
		position: relative;
	}
	
	.faq_question:hover {
		background: rgba(0, 0, 0, 0.02);
	}
	
	.q_icon {
		width: 40px;
		height: 40px;
		background: #000000;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: 700;
		color: #FFFFFF;
		flex-shrink: 0;
	}
	
	.faq_question h3 {
		flex: 1;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		margin: 0;
	}
	
	.arrow_icon {
		font-size: 20px;
		color: #000000;
		transition: transform 0.3s;
	}
	
	.faq_open .arrow_icon {
		transform: rotate(180deg);
	}
	
	.faq_answer {
		padding: 0 16px 16px 68px;
		display: none;
	}
	
	.faq_open .faq_answer {
		display: block;
	}
	
	.answer_line {
		width: 100%;
		height: 1px;
		background: #AAAAAA;
		margin-bottom: 12px;
	}
	
	.faq_answer p {
		font-size: 14px;
		line-height: 1.8;
		color: #000000;
		margin: 0;
	}
	
	.faq_btn_area {
		margin-top: 40px;
		text-align: center;
	}
	
	.faq_btn_area .btn_contact {
		display: inline-block;
		padding: 12px 32px;
		background: #000000;
		color: #FFFFFF;
		text-decoration: none;
		font-weight: 700;
		font-size: 18px;
		border-radius: 4px;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
		transition: opacity 0.3s;
		min-width: 280px;
		text-align: center;
	}
	
	.faq_btn_area .btn_contact:hover {
		opacity: 0.8;
	}
	
	
	/**************** 背景画像 *****************/
	
	.bgSection_inner_sp {
		background-attachment: fixed;
		background-image: url(../images/ai_background_2.png);
		object-fit: cover;
		background-position: center center;
		background-size: cover;
		width: 100%;
	}
	
	
	
	/**************** PC版の要素非表示 *****************/
	
	.bgSection_inner {
		display: none;
	}
	
	section#about {
		display: none;
	}
}