/* メイン画像関連 */
.main-image-block{
	margin-top: 0px;
}

.image-block-product{
	background:none;
}

.main-image-product{
	width: 450px;
}

.image-block-product{
	margin-bottom: 100px;
}

.main-subtitle {
	line-height: 1.4;
	font-size: 3.0rem;
}

#main-title-wrapper{
	height: auto;
}

.block-group{
	display: flex;
	width: 100%;
	margin-top: 40px;
}

.block-group p {
	font-size: 1.6rem;
}

.section-block-inner > p {
	margin-bottom: 60px;
	font-size: 1.6rem;
}

.basic-block-element p{
	width: 100%;
}

/* セクション事例紹介 */
section.case{
	background:#f9f9f9;
	padding-top: 80px;
} 

.case .section-inner {
	padding-top: 10px;
	padding-bottom: 50px;
}


/* セクション製品紹介 */
.infrared .section-basic-block{
	padding-bottom: 100px;
}

/* セクション導入方法 */
section.introduction{
	background:#f9f9f9;
	padding-top: 80px;
}

.introduction .section-inner {
	padding-top: 0px;
}


p.img-desc{
	margin-bottom: 20px;
	font-size: 1.4rem;
}

.element-movie {
	width:80%; /* 幅を親要素に合わせる */
	padding: 50px;
	height: 450px;
}

/* 背景にSchwalbel Visionと書く部分とグレーの部分 */
.main-top::before {
	content: "Schwalbel Vision"; 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 150px;
	color: rgba(170, 170, 170, 0.2); 
	text-align: center; 
	z-index: -1; 
	display: flex;
	justify-content: start;
	align-items: start;
	overflow: hidden;
  }

  .main-top::after {
	content: "Schwalbel Vision"; 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 150px;
	color: rgba(170, 170, 170, 0.15); 
	text-align: center; 
	z-index: -1; 
	display: flex;
	justify-content: end;
	align-items: end;
	overflow: hidden;
  }

    .product-name {
	top: 10px;
	left: 50px;
	color: white;
	font-size: 32px;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	border-radius: 5px;
	text-align: center;
  }

  .basic-block-column-wrap{
	display: flex;
	gap: 10px;
  }

/* droneの記事のみ文と写真の配置を調整したいので */
.basic-block-line {
    display: flex;
    justify-content: space-between; /* 両端揃え */
    align-items: flex-start;
    gap: 20px;
}

.basic-block-wrapper:first-child {
    flex: 7; /* 文章部分を7割に */
}

.basic-block-wrapper:last-child {
    flex: 3; /* 画像部分を3割に */
}

.basic-block-wrapper {
	flex: none; /* 幅をリセット */
	width: 80%; /* 親要素いっぱいに広げる */
	margin: 0 auto;
	margin-bottom: 20px; /* 下の余白を追加 */
}

.no-image {
	width: 70%;
}

.text-description{
	line-height: 1.5;
	margin-bottom: 30px;
	max-width: 100%;
}

.basic-block-element img {
    max-width: 100%; /* 親要素に対して最大幅 */
	width: 80%;
    height: auto;
    display: block; /* 余分な隙間を防ぐ */
    margin: 0 auto; /* 画像を中央揃え */
	margin-top: 25px;
}

.basic-block-element iframe {
	width: 100%;
    margin: 0 auto; /* 画像を中央揃え */
}

.basic-block-wrapper:first-child p {
    margin: 0; /* 余計なマージンを削除 */
    padding: 0 10px; /* 左右に少し余白 */
    line-height: 1.8; /* 読みやすくする */
}

.element-movie {
	width: 80%;
	padding: 0;
	height: 450px;
}

right-item {
	margin-bottom: 50px;
}

.last-text {
	margin-bottom: 150px;
}

/* モバイル向けスタイル */
@media screen and (max-width: 768px) {
    .basic-block-line {
        flex-direction: column; /* 縦並びにする */
    }

    .basic-block-wrapper {
        flex: none; /* 幅をリセット */
        width: 100%; /* 親要素いっぱいに広げる */
        margin-bottom: 20px; /* 下の余白を追加 */
    }

	.basic-block-column-wrap{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.element-movie {
		width:100%; /* 幅を親要素に合わせる */
		padding: 30px;
	}
}

/* droneの記事のみ文と写真の配置を調整したいのここまで */

@media screen and (max-width:1400px){
	.section-block-inner{
		width: 1000px;
	}

	#main-title-wrapper{
		margin-left: 30px;
	}

	.main-top::before {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.2); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: start;
		align-items: start;
		overflow: hidden;
	}

  .main-top::after {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.15); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: end;
		align-items: end;
		overflow: hidden;
	}
}

@media screen and (max-width:1200px){
	.main-subtitle{
		font-size: 2.0rem;
	}
	.main-top::before {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.2); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: start;
		align-items: start;
		overflow: hidden;
	}

  .main-top::after {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.15); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: end;
		align-items: end;
		overflow: hidden;
	}
}

@media screen and (max-width:1100px){
	.section-block-inner{
		max-width: 65%;
	}

	.main-image-product{
		width: 500px;
	}

	.basic-block-wrapper{
		width: 100%;
	}

	.basic-block-column-wrap{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

@media screen and (max-width:980px){
	.main-image-product{
		width: 380px;
	}
	.main-top::before {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 50%;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.2); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: start;
		align-items: start;
		overflow: hidden;
		writing-mode: vertical-rl; /* 右から左の縦書き */
		white-space: nowrap; /* 改行を防ぐ */
	}

  .main-top::after {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.15); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: end;
		align-items: end;
		overflow: hidden;
		writing-mode: vertical-rl; /* 右から左の縦書き */
		white-space: nowrap; /* 改行を防ぐ */
	}
}

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

	.main-title{
		font-size: 28px;
	}

	.image-block-product{
		margin-bottom: 0px;
	}

	.main-subtitle{
		width: 400px;
		margin-top: 10px;
	}

	.main-image-product{
		margin-bottom: 40px;
	}

	h3{
		max-width: 100%;
		text-align: center;
		font-size: 2.2rem;
	}

	.section-block-inner{
		max-width: 100%;
	}

	#main-title-wrapper {
		flex-direction: column;
		height: auto;
		margin-left: 0px;
	}	
	
	.block-group{
		display: block;
		width:auto;
		margin-left: 0px;
	}

	.block-group p {
		margin-bottom: 30px;
	}

	/* セクション事例紹介 */
	section.case{
		margin-top: 50px;
		padding-top: 0px;
	}

	.case .section-inner {
		padding: 50px 20px 40px;
	}

	/* セクション製品紹介 */
	.infrared .section-basic-block{
		padding-bottom: 0px;
	}
	
	/* セクション導入方法 */
	section.introduction{
		margin-top: 50px;
		padding-top: 0px;
	}
	
	.introduction .section-inner {
		padding: 50px 20px 40px;
	}

	/* 背景にSchwalbel Visionと書く部分とグレーの部分 */
	.main-top::before {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 50%;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.2); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: start;
		align-items: start;
		overflow: hidden;
		writing-mode: vertical-rl; /* 右から左の縦書き */
		white-space: nowrap; /* 改行を防ぐ */
	}

  	.main-top::after {
		content: "Schwalbel Vision"; 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 100px;
		color: rgba(170, 170, 170, 0.15); 
		text-align: center; 
		z-index: -1; 
		display: flex;
		justify-content: end;
		align-items: end;
		overflow: hidden;
		writing-mode: vertical-rl; /* 右から左の縦書き */
		white-space: nowrap; /* 改行を防ぐ */
	}

	.element-movie {
		width:100%; /* 幅を親要素に合わせる */
		padding: 0;
		height: 400px;
	}

}

@media screen and (max-width: 450px){
	.main-subtitle {
		width: auto;
		text-align: center;
		font-size: 1.4rem;
	}

	.main-image-product {
		width: 100%;
		margin-bottom: 40px;
	}

	#si_solut .block-group p {
		font-size: 1.4rem;
	}

	.case .section-block-inner > p{
		font-size: 1.4rem;
	}

	.element-movie {
		width:100%; /* 幅を親要素に合わせる */
		padding: 0;
		height: 400px;
	}
}

/* 仕様 */
.table-specification{
	width: 100%;
	min-width: auto;
	max-width: none;
	margin: 0 auto 20px;
}

.table-specification th {
	background: #b0c4de;
}

.table-specification th, .table-specification td {
	padding: 8px;
	font-weight: 400;
}

.table-specification tr th:nth-child(1) {
  width:70%;
}
.table-specification tr th:nth-child(2) {
  width:30%;
}