body {
    background-color: transparent /*#010d18*/;
}

.wisp-hero {
    position: relative;
  width:100%;
    height: 500px; /* Adjust the height to 500px */
    text-align: center;
    color: white;
  background: url('https://toho-giken.com/products/wise_isp/img/wisp_bg.jpg') no-repeat center center;
    background-size: cover;
  display:flex;
  justify-content:space-between;
  margin:0 auto 5em auto;
  align-items:center;
}

.wisp-hero section{
    width: 90%;
    max-width:1100px;
    display:flex;
  justify-content:space-between;
  margin:auto;
  align-items:center;
}


.hero-text {
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 2em;
    border-radius: 8px;
  text-align:left;
  width:42%;
	backdrop-filter: blur(5px); /* Apply blur effect behind the element */
    -webkit-backdrop-filter: blur(5px); /* Safari specific */
}

.hero-text h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5em 0;
}

.hero-text p {
    font-size:1.2rem;
    margin: 10px 0 0;
}
.hero-text img {
    height:45px;
	margin-bottom: 1.25em;
}

.hero-image {
  width:43%;
    text-align: center;
    padding: 0;
  text-align:left;
}
.hero-image img{
  width:100%;
}


.wiseisp_head{
	width:100%;
	max-width: 1100px;
}


.wiseisp_features{
	width:100%;
	max-width: 1100px;
}



.list_item {
    width: 90%;
    margin: auto;
	max-width: 1100px;
}

.line_up div img {
    mix-blend-mode: normal;
}



/*特長*/
.wisp-f-wap{
	margin-bottom: 150px;
}

.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

/* 左右の幅を % で指定 */
.feature-left .feature-video-container,
.feature-left .feature-image-container {
    flex-basis: 65%;  /* 画像・動画の幅を40%に指定 */
}

.feature-left .feature-text {
    flex-basis: 30%;  /* テキスト部分の幅を60%に指定 */
  padding: 0 0 0 3em;
}

.feature-right .feature-video-container,
.feature-right .feature-image-container {
    flex-basis: 65%;  /* 画像・動画の幅を60%に指定 */
}

.feature-right .feature-text {
    flex-basis: 30%;  /* テキスト部分の幅を40%に指定 */
  padding: 0 3em 0 0 ;
}

.feature-video-container {
    text-align: center;
}

.feature-video {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-text {
    
}

.feature h3 {
    font-size: 1.5rem;
	line-height: 1.6;
    color: #333333;
    margin-bottom: 10px;
}

.feature p {
    color: #555;
    line-height: 1.8;
}

.highlight {
    font-weight: bold;
    color: #333;
}

@media screen and (max-width: 640px) {
	
	.wisp-hero {
  margin:0 auto 3em auto;
}

	.wisp-hero section{
		flex-direction: column-reverse; /* 縦に並べている要素を逆順に */
		flex-wrap: wrap;
	}
	
	.hero-text {
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 2em;
    border-radius: 8px;
  text-align:left;
  width:auto;
}
	.hero-text h1 {
    font-size: 4.5vw;
    margin: 0 0 0.25em 0;
}
	.hero-text p {
    font-size: 3.9vw;
    margin: 0;
}
	.hero-text img {
    height:30px;
	margin-bottom: 0.5em;
}
	.hero-image {
  width:90%;
    margin-bottom: 45px;
}
	
	.list_item  h2.p_title{
		margin-bottom: 0;
		
	}
	
/*特長*/
	.wisp-f-wap {
		margin-bottom: 30px;		
	}
	.wisp-f-wap .p_title{
		margin-bottom: 25px;		
	}
	
    .feature {
        flex-direction: column;
    }
	.feature h3{
        font-size: 1.3rem;
    }

    .feature-video-container, .feature-image-container, .feature-text {
        flex-basis: 100%;
        padding: 0;
    }

    .feature-video, .feature-image {
        max-width: 100%;
    }
	.feature-left .feature-text,.feature-right .feature-text {
	padding: 0 0.5em 0 0.5em;
	order: 2;
}

	
}