.b {
  height: calc(100vw / 3.5 );
}
.b_index {
  height: calc(100vw / 3.5 );
}

.non_banner_height {
  height: calc(50vw / 3.5 );
}

.banner {
  width: 98vw;
  //box-shadow: inset 0px -11px 8px -10px #444;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 5rem;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .title_index {
    word-break: break-all;
    color: var(--text-main);
    background: var(--background-body-opaq);
    text-align: center;
    margin-bottom: 0;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
          0px 8px 13px rgba(0,0,0,0.1),
          0px 18px 23px rgba(0,0,0,0.1);
    
  }
  .title {
    background: var(--background-body-opaq);
    word-break: break-all;
    color: var(--text-main);
    margin-bottom: 0;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
          0px 8px 13px rgba(0,0,0,0.1),
          0px 18px 23px rgba(0,0,0,0.1);
    
  }
}

@media (min-width: 640px) {
	.banner {
    width: 89%;
	margin-left: auto;
	margin-right: auto;
	}
}