.toka a:hover img 
{ 
opacity:0.5; 
filter: alpha(opacity=50); 
-ms-filter: "alpha( opacity=50 )"; 
}

li {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.3;
}

header, footer {color: white; background-color: #121212;}
header li a {color: black;}

h4.title1 {
    color: white;
    letter-spacing: 0.3rem;
}

h4.title2 {
    color: white;
	margin: 20px 0px; 
	padding: 15px 20px; 
	background: #e3dcc8;
}

th, td { padding: 10px; }

.frame1 {
  display: block;
  padding: 0;
  margin: 2rem 0;
  position: relative;
  width: 100%;                 /* 追加：col幅に合わせる */
  box-sizing: border-box;     /* ←最重要：paddingを幅に含める */
  height: auto;
  background-color: #f3f3f3;
  outline: 15px solid #fff;   /* ボックス間の隙間風 */
}

.frame1:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  pointer-events: none; /* ← これを追加 */
}

.bass-thum img {
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: 0 100%;
}

.circle img {
    border: 1px solid #000;
    border-radius: 50%;
    width: 80%;
}

.space { margin: 0 5rem; }

.news ul {
    color: #000;/*文字色*/
    border: double 1px #666;/*線種 太さ 色*/
    border-radius: 20px;
    background: #e3dcc8; /*背景色*/
    padding: 1em;
    padding-left: 4rem;
    margin: 2rem 1rem;
}

.news li {
    font-size: 1.6rem;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
}

.clearLeft { clear: left; }

.bimg { border: 2px solid #ddd; }

.back-darkblue { background-image: url("img/dark-blue_back.jpg"); margin: 3rem 0; }

.back-brown { background: #a05536; padding: 3rem 0rem 2rem 0rem; }

.back-beige { background: #c09b5a; padding: 2rem 0rem 0rem 0rem; margin: 3rem 0; }

.back-ofw { background: #f5f4ef; padding: 2rem 0rem 0rem 0rem; }

.back-black { background: #292d30; padding: 2rem 0rem 2rem 0rem; }

.back-light-gray { 
    background: #f3f3f3;
    padding: 2rem;
    display: block;
    margin: 2rem 0;
    position: relative;
    width: 100%;                 /* 追加：col幅に合わせる */
    box-sizing: border-box;     /* ←最重要：paddingを幅に含める */
    height: auto;
    background-color: #f3f3f3;
    outline: 15px solid #fff;   /* ボックス間の隙間風 */
}

.white { color: white; }

.beige { color: #c09b5a; }

.red { color: red; }

.brown { color: #a05536; }

.keyFeatures1 {
    border-left: 0;
    border-right: 9px solid #bf9c5c;
    background-color: #f5f4ef;
    padding: 3rem;
    margin: 3rem 0;
}

.keyFeatures2 {
    border-left: 9px solid #bf9c5c;
    border-right: 0;
    background-color: #f5f4ef;
    padding: 3rem;
    margin: 3rem 0;
}

/* スライダー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.swiper-slide { position: relative; display: block; }

.swiper-slide img {
  height: auto;
  width: 100%;
  display: block;
}

.swiper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
    position: relative; 
}

.swiper-wrapper {
    padding-bottom: 30px;
}

.swiper-button-next::after, .swiper-button-prev::after {
  color: #ccc;
}

/* ページネーションが見えない／クリックできない場合の保険 */
.main-swiper .swiper-pagination { bottom: 12px; z-index: 20; pointer-events: auto; }
.main-swiper .swiper-pagination-bullet { opacity: 1; }

/* ベース画像用スライダー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.spector-gallery {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== メイン ===== */
.spector-main-swiper {
  width: 100%;
  margin-bottom: 15px;
}

.spector-main-swiper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== サムネイル ===== */
.spector-thumb-swiper {
  width: 100%;
}

.spector-thumb-swiper .swiper-slide {
  opacity: 0.5;
  cursor: pointer;
}

.spector-thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #000;
}

.spector-thumb-swiper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*Youtube動画レスポンシブ表示
---------------------------------------------------------------------------*/
.youtube {
  position: relative;
  height: 0;
  margin-bottom: 3rem;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*トップページ動画レスポンシブ表示
---------------------------------------------------------------------------*/

.video-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* PC・通常表示 */
.video-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト */
.video-overlay {
  position: absolute;
  top: 50%;
  left: 40px;                 /* ← 左余白40px */
  transform: translateY(-50%);
  text-align: left;
  color: #fff;
  z-index: 2;
  max-width: 600px;
}

.video-overlay h2,
.video-overlay p,
.video-overlay .btn{
  margin: 0 0 15px 15px;   /* 右だけ15px、他は0 */
}

.video-overlay h3 {
  font-size: clamp(24px, 4vw, 48px);
  margin-bottom: 10px;
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.video-overlay p {
  font-size: clamp(14px, 2vw, 20px);
  margin-bottom: 15px;
}


/* ===== スマホ時 ===== */
@media (max-width:768px){

  .video-wrapper {
    height: 60vh;             /* ← 縦高さを画面基準で確保 */
    min-height: 320px;       /* ← 最低高さ */
  }

  .video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ← 左右トリミングして全面表示 */
    object-position: center;
  }

  .video-overlay {
    left: 30px;
    right: 20px;
  }

  .video-overlay h3 {
    font-size: 22px;
    color:#fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }

  .video-overlay p {
    font-size: 14px;
  }
}

/* ボタン
---------------------------------------------------------------------------*/
.square-pop {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.5em;
　vertical-align: middle;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 14px;
}