/* PC&タブレット端末向けCSS */
@media screen and (min-width:768px) {

	/**************** ヘッダー内コンテンツ *****************/
	
	
	header{
		width:100%;
		position:relative;
	}
	.header_bg{
		width:100%;
		background-size: cover;
		background:url('../images/header_bg.jpg') no-repeat center bottom;
	}
	
	.header_top{
		width:100%;
		position:absolute;
		top:0;
		left:0;
		padding: 1% 0;
		background: rgba(1,18,24,.5);
		z-index: 2;
	}
	
	.main_image {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	
	.main_image_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		overflow: hidden;
	}
	
	.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: block;
	}
	
	.main_image_bg .video_sp {
		display: 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;
		rotate: 180deg;
		width: 20vw;
	}
	
	.right-top {
		right: 0;
		top: 0;
		width: 26vw;
	}
	
	.main_image_inner_contents{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		text-align: center;
		color: #FFFFFF;
		width: 90%;
		max-width: 960px;
	}
	
	.catchcopy {
		color: #fff;
		font-size: 3.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.1em;
	}
	
	.subcopy {
		color: #fff;
		font-size: 1.5vw;
		font-weight: 500;
		line-height: 1.5;
		margin: 0 0 1.5em;
		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: 16px 48px;
		background: #FFFFFF;
		color: #000000;
		text-decoration: none;
		font-weight: 700;
		font-size: 24px;
		border-radius: 4px;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
		transition: opacity 0.3s;
		min-width: 343px;
		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 {
		background-attachment: fixed;
		background-image: url(../images/ai_background_2.png);
		object-fit: cover;
		background-position: center center;
		background-size: cover;
		width: 100%;
	}
	
	.section_title {
		text-align: center;
	}
	
	.section_title h2 {
		margin: 0;
		padding: 120px 0 40px 0;
		font-size: 42px;
		font-weight: 700;
		line-height: 1.2;
		color: #FFFFFF;
	}
	
	.process_box h2 {
		padding: 70px 0 40px 0 !important;
	}
	
	.title_line {
		border: 1px solid #000;
		width: 1000px;
		margin: 0 auto 60px auto;
		border-color: #FFFFFF;
	}
	
	.process_box .title_line {
		width: auto !important;
	}
	
	.title_line_white {
		background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
	}
	
	.faq_title_line {
		width: 120px;
		height: 3px;
		background: #CCCCCC;
		display: inline-block;
		margin: 0 0 16px 0;
	}
	
	/**************** 各sectionの共通スタイル end *****************/
	
	/**************** AI駆動開発とは？ *****************/
	.about_section {
		padding: 140px 0;
	}
	
	.about_content {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 2em;
		display: flex;
		flex-direction: column;
		gap: 60px;
	}
	
	.about_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 101px;
		padding: 60px 142px;
	}
	
	.about_text {
		flex: 1;
		max-width: 500px;
	}
	
	.about_text h3 {
		font-size: 28px;
		font-weight: 700;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0 0 38px;
	}
	
	.about_text p {
		font-size: 16px;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0;
	}
	
	.about_image img {
		display:block;
		width: 400px;
		height: 250px;
		background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		flex-shrink: 0;
		box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.7);
	}
	
	
	/**************** AI駆動開発とは？ end *****************/
	
	/**************** CTAセクション *****************/
	.cta_section {
		padding: 80px 0;
		background: #FFFFFF;
	}
	
	.cta_content {
		max-width: 1280px;
		margin: 0 auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 84px;
	}
	
	.cta_text {
		font-size: 42px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		margin: 0;
	}
	
	/**************** CTAセクション end *****************/
	
	/**************** EBAテックならではの強み *****************/
	
	.strength_content {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 2em;
		display: flex;
		flex-direction: column;
	}
	
	.strength_item {
		display: flex;
		align-items: stretch;
		min-height: 400px;
		margin: 0 0 60px 0;
	}
	
	.strength_item_left {
		justify-content: flex-start;
		padding-left: 142px;
	}
	
	.strength_item_right {
		justify-content: flex-end;
		padding-right: 142px;
	}
	
	.strength_text {
		flex: 0 0 35%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 60px 40px;
	}
	
	.strength_text h3 {
		font-size: 27px;
		font-weight: 700;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0 0 38px;
	}
	
	.strength_text p {
		font-size: 16px;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0;
	}
	
	.strength_image img {
		display: block;
		flex: 0 0 45%;
		height: 100%;
		min-height: 400px;
		background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}
	
	/**************** EBAテックならではの強み end *****************/
	
	/**************** サービス概要 *****************/
	
	.service_content {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 2em;
	}
	
	.service_cards {
		display: grid;
		/* 5枚構成でも最終行が中央に寄るように6カラム（各カード2カラムspan）で配置 */
		grid-template-columns: repeat(6, 1fr);
		gap: 60px 40px;
	}
	
	.service_card {
		grid-column: span 2;
		background: #FFFFFF;
		border: 1px solid #989898;
		border-radius: 20px;
		padding: 30px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 353px;
	}
	
	.service_card:nth-child(4),
	.service_card:nth-child(5) {
		/* 最終行(4,5枚目)を中央寄せ */
		grid-column: 2 / span 2;
	}
	.service_card:nth-child(5) {
		grid-column: 4 / span 2;
	}
	
	.card_icon img {
		display: inline-block;
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-bottom: 20px;
	}
	
	.service_card h3 {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		margin: 0 0 8px;
		text-align: center;
	}
	
	.service_card p {
		font-size: 14px;
		line-height: 1.5;
		color: #666666;
		margin: 0;
		text-align: center;
	}
	
	/**************** サービス概要 end *****************/
	
	/**************** 開発フロー／プロセス紹介 *****************/
	.process_section {
		margin: 140px auto;
		background-position: center center;
		background-size: cover;
	}
	
	.process_wrapper {
		min-width: 768px;
		max-width: 829px;
		margin: 0 auto;
		background-color: rgba(33,102,172,0.9);
		border-radius: 41px;
		padding: 0 0 50px 0;
		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 {
		max-width: 600px;
		margin: 0 auto;
		position: relative;
	}
	
	.process_line,
	.flow_line {
		position: absolute;
		left: 30px;
		top: 45px;
		width: 2px;
		height: calc(100% - 90px);
		background: #FFFFFF;
	}
	
	.process_steps,
	.flow_steps {
		display: flex;
		flex-direction: column;
		gap: 40px;
		position: relative;
		z-index: 1;
	}
	
	.process_step,
	.flow_step {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-left: 80px;
		position: relative;
	}
	
	.step_number {
		position: absolute;
		left: 0;
		top: 0;
		width: 60px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32px;
		font-weight: 700;
		color: #000000;
	}
	
	.process_step h3,
	.flow_step h3 {
		font-size: 25px;
		font-weight: 700;
		line-height: 1.2;
		color: #FFFFFF;
		margin: 0;
	}
	
	.process_step p,
	.flow_step p {
		font-size: 16px;
		line-height: 1.5;
		color: #FFFFFF;
		margin: 0;
	}
	
	/**************** 開発フロー／プロセス紹介 end *****************/
	
	/**************** ご利用の流れ *****************/
	.flow_section {
		margin: 140px auto;
	}
	
	.flow_wrapper {
		min-width: 768px;
		max-width: 829px;
		margin: 0 auto;
		background-color: rgba(33,102,172,0.9);
		border-radius: 41px;
		padding: 0 0 50px 0;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.flow_content {
		max-width: 600px;
		margin: 0 auto;
		position: relative;
	}
	
	/**************** ご利用の流れ end *****************/
	
	/**************** よくあるご質問 *****************/
	.faq_section {
		background: #FFFFFF;
	}
	
	.faq_section .section_title h2 {
		color: #000000;
	}
	
	.faq_content {
		max-width: 960px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	
	.faq_item {
		background: #FFFFFF;
		border: 1px solid #AAAAAA;
		border-radius: 4px;
		box-shadow: 0px 4px 0px rgba(230, 235, 239, 1);
		overflow: hidden;
	}
	
	.faq_question {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 24px;
		cursor: pointer;
		position: relative;
	}
	
	.faq_question:hover {
		background: rgba(0, 0, 0, 0.02);
	}
	
	.q_icon {
		width: 50px;
		height: 50px;
		background: #000000;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: 700;
		color: #FFFFFF;
		flex-shrink: 0;
	}
	
	.faq_question h3 {
		flex: 1;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
		color: #000000;
		margin: 0;
	}
	
	.arrow_icon {
		font-size: 24px;
		color: #000000;
		transition: transform 0.3s;
	}
	
	.faq_open .arrow_icon {
		transform: rotate(180deg);
	}
	
	.faq_answer {
		padding: 0 24px 24px 90px;
		display: none;
	}
	
	.faq_open .faq_answer {
		display: block;
	}
	
	.answer_line {
		width: 100%;
		height: 1px;
		background: #AAAAAA;
		margin-bottom: 16px;
	}
	
	.faq_answer p {
		font-size: 16px;
		line-height: 1.8;
		color: #000000;
		margin: 0;
	}
	
	.faq_btn_area {
		padding: 80px 0;
		margin: 0 0 70px 0;
		text-align: center;
	}
	
	.faq_btn_area .btn_contact {
		display: inline-block;
		padding: 16px 48px;
		background: #000000;
		color: #FFFFFF;
		text-decoration: none;
		font-weight: 700;
		font-size: 24px;
		border-radius: 4px;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
		transition: opacity 0.3s;
		min-width: 343px;
		text-align: center;
	}
	
	.faq_btn_area .btn_contact:hover {
		opacity: 0.8;
	}
	
	
	/**************** スマホ版の要素非表示 *****************/
	
	.bgSection_inner_sp {
		display: none;
	}
	
	section#about_sp {
		display: none;
	}
}