/*
 Theme Name:   WP-qolp-Mido-Child-home
 Template:     wp-qolp-mido
 Version:      1.0.0
 利用ページ:   a18
*/

body.home {
  font-family: 'Zen Old Mincho', serif;
}

h1,
h2,
h3 {
  font-family: 'Zen Old Mincho', serif;
}
.home #pc-menu a {
    color: #ffffff;
}
.home #pc-menu a:visited {
    color: #ffffff;
}
.home #pc-menu a:active {
    
}
/* 子テーマ用のスタイルはここに書く */
body.home {
  background-color: rgb(230, 230, 230);
}

.home #masthead {
  background-color:#0000004d;
  z-index: 1;
}

/* heroセクション */
.hero-box {
  position:relative;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  /* 縦並び */
  width: 100%;
  height: 100vh;
  overflow: hidden;
margin-top: -142px;

}

/* 上部画像エリア */
.hero-box .hero-img {
  flex: 1;
  /* 残りの高さをすべて使う */
  position: relative;
  overflow: hidden;
}

.hero-box .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-box .hero-img .hero-logo img {
  max-width: 500px;
  width: 30%;
  min-width: 200px;
  height: auto;
 object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 下部テキストコンテナ */
.hero-box .top-item-container {
  background-image: url(img/wa-img-a.png);
  color: #fff;
  z-index: 2;
  position: relative;
  overflow: hidden;
  /* 擬似要素のはみ出し防止 */

}

a.home-button {
  width: 360px;
  height: 80px;
  padding: 3px;
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  color: #000;
margin: 20px 0;
}
a.home-button:hover {
  background-color: #c5cd85;
}

.home-button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid #000;
  pointer-events: none;
  box-sizing: border-box;
}

.home-button .button {
  font-size: 36px;
  display: inline-block;
  z-index: 1;
  position: relative;
}

.container-message {
}

.home .bottom-box {
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content:space-evenly;
}

/* フッタに隙間があくための処理 */
.home .post,
.home .page {
  margin: 0;
}


/* slick　css */

/* 初期状態は非表示 */
.slider {
  visibility: hidden;
}

/* Slick初期化後に表示 */
.slider.slick-initialized {
  visibility: visible;
}


.slider .slick-slide {
  position: relative;
  overflow: hidden;
    height: 200px!important; /* 高さは固定 */
}

.slider .slick-slide img {
  width: 100%;
  height: 200px; /* 高さは固定 */
  object-fit: cover; /* はみ出しても比率を維持しつつ切り抜き */
   object-position: center;  /* 高さ・幅とも中央に切り抜く */
  display: block;
  overflow: hidden;
}

.breadcrumbs {
  display: none !important;
}

/*カスタムロゴ*/
.home .custom-logo {

  width: 320px;
  margin-top: 0px;
  margin-bottom: 15px;
  left: 10px;
}


/*フッタ*/
.home footer img.custom-logo {
  margin-bottom: 20px;
}

.home footer img.custom-logo {
  filter: brightness(0) invert(0);
  //ロゴを黒くする
}

.home footer {
 color: #151515;
}


.home .footer-company .address{
  font-size: 16px;
  color:white;
}
.home .footer-company .address .tel{
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;
 font-family: 'Inter', sans-serif;
}



/* メインメニュー */
.home #pc-menu {
  font-size: 16px;

}

/* ハンバーガーボタン */
.home .menu-toggle-2 {

  background-color: #9a9c2f;
}

/* トップに戻るボタン */
#page-top {
  display: none;
}

.home .sns-bar,
.home #company .footer {
  background: transparent;
}

.home .button-container .vertical-button li {
  background-color: #151515;
}
.home .button-container .vertical-button li:nth-child(2)  {
  background-color: #151515;
}
.home .button-container .vertical-button li:nth-child(2):hover {
    background-color: #001D56;
}
/*----------- デザイン-------------- */
.home-background-line-1{
  background-image: url(img/line-hude.png);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position:  center bottom;
  padding-bottom: 30px;
}

@media screen and (max-width: 767px) {
  /* スクリーンサイズが767px以下の場合に適用 */

.bottom-box {
  display: block;
}
.home .bottom-box {
  display:flex;
  flex-direction: column;
  min-height: 170px;
  align-items: center;
  justify-content:center;
}
}