/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 15 2025 | 12:20:06 */
body{
background: linear-gradient(rgb(255 255 255 / 70%)), url(https://www.r-wellness.com/hokuroku-relay/wp-content/themes/hokuroku-relay/images/hokuroku-top-bg-pc.webp) no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


/* 親コンテナ */
.top-hero {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面全体の高さ */
  background-size: cover;
  background-position: center; /* デフォルトは中央 */
  background-repeat: no-repeat;
  transition: background-image 0.3s ease-in-out;
}

/* 半透明オーバーレイ */
.top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白 */
  pointer-events: none; /* オーバーレイがクリックを妨げない */
}

/* ロゴを中央配置 */
.top-hero-content {
  width: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* オーバーレイより前面 */
  text-align: center;
}

/* ロゴ画像のレスポンシブ */
.top-hero-content img {
  width: 30%;        /* PC初期値 */
  max-width: 400px;
  height: auto;
}

/* PC 背景 */
@media (min-width: 1025px) {
	
body {
    background: 
  linear-gradient(to bottom,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.2) 80%,
    rgba(255,255,255,1) 100%
  ),url('https://www.r-wellness.com/hokuroku-relay/wp-content/themes/hokuroku-relay/images/hokuroku-top-bg-pc.webp') no-repeat center top;
	      background-position: top 5% center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
  }
	
	.top-overlay {
  background-color: rgba(255, 255, 255, 0); /* 半透明白 */
}

	
  .top-hero {
    background-image: none;
    background-position: unset;

  }
  .top-hero-content img {
    width: 30%;
  }
}

/* タブレット 背景 */
@media (min-width: 768px) and (max-width: 1024px) {
  .top-hero {
    background-image: url('https://www.r-wellness.com/hokuroku-relay/wp-content/themes/hokuroku-relay/images/hokuroku-top-bg-tab.webp');
    background-position: top 15% center;
  }
  .top-hero-content img {
    width: 40%;
  }
}

/* スマホ 背景 */
@media (max-width: 767px) {
  .top-hero {
    background-image: url('https://www.r-wellness.com/hokuroku-relay/wp-content/themes/hokuroku-relay/images/hokuroku-top-bg-sp.webp');
    height: 100vh;
    background-position: center;
  }
  .top-hero-content img {
    width: 60%;
  }
}

/* 超小型スマホ */
@media (max-width: 500px) {
  .top-hero {
    height: 80vh;
    background-position: center;
  }
  .top-hero-content img {
    width: 60%;
  }
}