/*

Theme Name: smifehome

*/



ul{margin-left:0;list-style: none;padding: 0;}.text50{ font-size: 50%;}.text60{ font-size: 60%;}.text70{ font-size: 70%;}.text80{ font-size: 80%;}.text90{font-size:90%;}.text100{font-size:100%;}.text110{font-size: 110%;}.text120{font-size: 120%; }.text130 {font-size:130%;}.text140 {font-size:140%;}.text150{font-size:150%;}.text160{font-size:160%;}.text170{font-size: 170%;}.text180 {font-size:180%;}.text190{font-size:190%;}.text200{font-size:200%; }.text250{font-size: 250%;}.text300{font-size: 300%;}.text350 {font-size: 350%;}.text400{font-size:400%;}.alpha7,.alpha8,.alpha9{transition:0.25s ease-in-out;}.alpha7:hover{filter:alpha(opacity=70);opacity:.7!important;}.alpha8:hover{filter:alpha(opacity=80);opacity:.8!important;}.alpha9:hover{filter:alpha(opacity=90);opacity:.9!important;}.scale img{transition:transform 0.2s ease-out;}.scale:hover img{transform:scale(1.02);}.scale-m img{transition:transform 0.25s ease-out;}.scale-m:hover img{transform:scale(1.07);}.scale-l img{transition:transform 0.3s ease-out;}.scale-l:hover img{transform:scale(1.12);}.cf:after{content:".";display: block;clear:both;height: 0;visibility:hidden;}.cf{min-height:1px;}* html .cf {height: 1px;/*��*//*/height:auto;overflow:hidden;/**/}.clear{clear:both;}.fw300{font-weight:300;}.fw400{font-weight:400;}.fw500{font-weight:500;}.fw600{font-weight:600;}.fw700{font-weight:700;}.kome,.maru,.kaku,.hishi{display: block;position:relative;padding-left:1.3em;line-height:1.3;}.kome:before,.maru:before,.kaku:before,.hishi:before {position:absolute;left: 0;}.kome:before{content:"※";}.maru:before{content:"●";}.kaku:before{content:"■";}.hishi:before{content:"◆";}@media (-webkit-device-pixel-ratio: 2){.alpha7,.alpha8,.alpha9{transition:none !important;}.scale img,.scale-m img,.scale-l img{transition:none !important;}}

.w-space-s {letter-spacing: .15em;text-indent: .15em;}.w-space-m {letter-spacing: .3em;text-indent: .3em;}.w-space-l {letter-spacing: .5em;text-indent: .5em;}



body {

  font-size: 1.3vw;

  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto, MotoyaLCedar, sans-serif;

  line-height: 1.9;

  color: #222;

  background-color: #ffffff;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.font-latin {

  font-family: 'Comfortaa', "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto, MotoyaLCedar, sans-serif;

}

.tel-link {

  cursor: text;

  text-decoration: none;

  pointer-events: none;

}

a.no-line {

  text-decoration: none;

}

.bg-blue {

  background-color: #059eff;

}

.text-blue {

  color: #059eff;

}

.bg-kon {

  background-color: #024;

}

.text-kon {

  color: #036;

}

.text-brown,

a.text-brown {

  color: #6b4321;

}

.border-brown {

  border-color: #6b4321!important;

}

.bg-blown, 

.alert-blown {

  background-color: rgba(153,92,1,.4);

  

}

.bg-white-alpha {

  background-color: rgba(255,255,255,.75);

}



.bg-black {

  background-color: #222222;

}

.text-black {

  color: #222222;

}

.bg-black-alpha {

  background-color: rgba(0,10,20,.75);

  color: #fff;

}



.bg-gray {

  background-color: #9E9E9E;

}

.alert-gray {

  color: #222222;

  background-color: #9E9E9E;

  border-color: #838383;

}

.text-gray {

  color: #9E9E9E;

}



.border-box {

  border:3px solid #222222;

}

#header {

  height: auto;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1234;

  background-color: rgba(0,0,0,.7);

  color: #fff;

}

#header-nav {

	width: 90%;

	margin: 0 5%;

}

#mv-wrap {

  overflow: hidden;

  background-color: #222;

}

#mv {

	z-index: 12;

	width: 90%;

	margin: 0 auto;

    background-color: #222;

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

	position: relative;

    height: 28vw;

    max-height: 420px;

}

#mv::after {

  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: rgba(0,0,0,.3);

  z-index: 123456;

}

#mv-cover {

  position: absolute;

  bottom: 0;

  right: 0;

  z-index: 1234;

  width: 35vw;

  max-width: 400px;

}

#mv h1 {

  position: absolute;

  top: 16vw;

  left: 0;

  width: 100%;

  z-index: 1234567;

  text-align: center;

  font-size: 250%;

  text-shadow: 3px 3px 10px rgba(0,0,0,.6), -3px 3px 10px rgba(0,0,0,.6), 3px -3px 10px rgba(0,0,0,.6), -3px -3px 10px rgba(0,0,0,.6); 

}





/* progress bar */

.slider-progress {

  width: 100%;

  height: 3px;

  background: #eee;

}

.slider-progress .progress {

  width: 0%;

  height: 3px;

  background: #000;

}









.logo-area {

  text-align: center;

  width: 20vw;

  margin: 0 auto;

  height: 6.5vw;

}

.logo-area a {

  font-size: 100%;

}

.logo-area img {

   width: 100%;

}

#header .main-nav {

  text-align: center;

}

#header .main-nav li {

  /*padding: .4vw .2vw 0;*/

}







#header .nav-link {

  /*text-decoration: none;

  color: #fff;

  font-size: 90%;

  text-align: center;

  padding: 0 1vw;

  transition: 0.2s ease-in-out;

  line-height: 1;

	height: 2.5vw;

  font-weight: 400;

  position: relative;*/

}



#header .nav-link::after {

  /*position: absolute;

  bottom: 0;

  left: 0;

  content: '';

  width: 100%;

  height: 2%;

  background-color: #9E9E9E;

  border-radius: 3px;

  transform: scale(0);

  transition: transform .2s;

  z-index: -1;*/

}

#header .nav-link:hover,

#header .nav-link.active {

  color: #fff;

  background-color: #9E9E9E;

}

#header .nav-link:hover::after,

#header .nav-link.active::after {

  transform: scale(1);

}



#header .global_menu { /* メニュー全体のスタイル */

  text-decoration: none;

  color: #333;

  /*font-size:14px;*/

  text-align: center;

  height: 3vw;

  transition: 0.2s ease-in-out;

  line-height: 1;

  position: relative;

  font-weight: 600;

}

#header .global_menu li {

  display: inline-block;

}

#header .global_menu a {

  color: #fff;

  display: block;

  padding: 0 30px;

  line-height: 3vw;

  height:auto;

}

#header .global_menu .inner a {

  padding: 0 0;

}



#header #sns li, 

#header #company li, 

#header #inquiry li {

  padding: 0 30px;

}

#header .menu h2 {

  font-size: 100%;

}

#header .menu:hover > a {

  background: #9E9E9E;

}

#header .child_menu > li {

  padding: 2rem 0;

}

#header .child_menu > li > a:hover { /* 子項目のスタイル（ホバー時） */

  text-decoration: none;

}

  /* 下層メニューのスタイル*/

.global_menu .nav-list {

  display: flex;

  justify-content: space-between;

  list-style: none;

  margin: 0;

  padding: 0;

}

#header .nav-link {

  text-decoration: none;

  font-size: 14px;

  text-align: center;

  height: auto;

  transition: 0.3s ease-in-out;

  line-height: 1;

  position: relative;

  font-weight: 600;

}

#header .child_menu{

  height: auto!important;

  left: 0;

  margin: 0 auto;

  position: fixed;

  top: 9.5vw;

  transition: all 0.5s ease;

  /*opacity: 0;

  visibility: hidden;*/

  width: 100%;

  background-color: rgba(0,0,0,1);
	
	
  opacity: 0;              /* ← デフォルトは隠す */
  visibility: hidden;
  pointer-events: none;     /* ← 非表示中はクリック不可 */

}

#header .child_menu:hover div{

  transition: all 0.3s ease;

}

.child_menu li a {

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  text-decoration: none;

}


/* 親 <li id="sns"> にホバーした時だけ、外枠を表示 */
#header #sns:hover > .child_menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 同時に中身(.w-100)も確実に出す（横並びに） */
#header #sns:hover > .child_menu .w-100{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  justify-content: center;
  align-items: center;
  gap: 12px; /* 必要なら */
}

.fadeInAnim {

  opacity: 0;

  -webkit-transform: translateY(50px);

  transform: translateY(50px);

  -webkit-transition: opacity .8s ease-out, transform .8s ease-out;

  transition: opacity .8s ease-out, transform .8s ease-out;

}

.fadeInAnim.visible {

  opacity: 1;

  -webkit-transform: translateY(0px);

  transform: translateY(0px);

}

.link-img > div {

  overflow: hidden;

}

.link-img img {

  transform: scale(0.8);/* 拡大 */

  transition: transform .6s ease;/* ゆっくり変化させる */

  width: 100%;

	filter: grayscale(100%);}



.child_menu li a:hover img {

  transform: scale(1);/* 拡大 */

	/*opacity: 0.6;*/

	filter: grayscale(0%);

}

#footer .child_menu .w-100 { /* 下層メニューのスタイル */

  width: 100%;

  position: relative;

  top: 0;

  left: 0;

  padding: 5px;

  color: #fff;

  visibility: visible;

	z-index: 9999;

  padding-top:0;

}

#footer .col-md-auto.menu{

    -ms-flex: 0 0 20%;

    flex: 0 0 20%;

    max-width: 20%;

}



#footer .child_menu .inner .w-100{

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-right: -15px;

  margin-left: -15px;

  padding-top:3px!important;;

}

#footer .child_menu .inner .w-100 .col-md-auto{

  -ms-flex: 0 0 auto;

  flex: 0 0 auto;

  max-width: 100%;

  width: 100%;

  -ms-flex-pack: center!important;

    justify-content: center!important;

}

#footer li#sns {

	display:none;

}



#footer .link-img {

	display:none;

}

#footer .menu h2 {

  font-size: 100%;

}



#footer .menu a {

  font-size: 100%;

}

#footer .menu li {

  font-size: 80%;

}

.wp-pagenavi {

  margin: 3vw 0;

  text-align: center;

  font-family: 'Comfortaa', "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto, MotoyaLCedar, sans-serif;

}

.wp-pagenavi > span,

.wp-pagenavi > a {

  display: inline-block;

  line-height: 1.1;

  padding: 4px 9px 1px;

  border: solid 1px #123;

  border-radius: 3px;

  margin: 0 3px;

  color: #345;

  text-decoration: none;

  font-size: 105%;

  font-weight: 600;

}

.wp-pagenavi span.current,

.wp-pagenavi > a:hover {

  background-color: #567;

  color: #fff;

  border: solid 1px #123;

}

.nav-spacer {

	width: 1vw;

}



#point .fa, 

#point .far {

  margin-right: 0.5rem;

}

#search {

  z-index: 13456;

}



#footer-nav .sub {

  display: none !important;

}







.contents h1 {

	position: relative;

	display: inline-block;

	padding: 0 30%;

	text-align: center;

}

.contents h1:before, 

.contents h1:after {

	content: '';

	position: absolute;

	top: 50%;

	display: inline-block;

	width: 30%;

	height: 2px;

}

.contents h1:before {

	left:0;

	background: linear-gradient(-45deg, transparent, #222222 0%, #b5b3b3 50%, transparent);

}

.contents h1:after {

    right: 0;

    background: linear-gradient(-45deg, transparent, #222222 100%, #b5b3b3 50%, transparent);

}



@media (min-width: 768px){

  .tel-text,

  #btn-inquiry {

    display: block;

    text-decoration: none;

    color: #fff;

    font-size: 110%;

    line-height: 1;

    font-weight: 600;

  }

  #btn-inquiry {

    height: 3vw;

  }

 a.btn-effect,

  .btn-effect {

    position: relative;

    box-sizing: border-box;

    display: inline-block;

    margin: 0;

    border-radius: .25rem;

    text-align: center;

    text-decoration: none;

    color: #fff;

    white-space: nowrap;

    z-index: 0;

    transition: 0.5s ease-in-out;

    overflow: visible;

    border: none;

    padding: 0 1.5vw;

  }

  .btn-effect::after {

    box-sizing: border-box;

    position: absolute;

    width: 100%;

    height: 100%;

    content: "";

    border: 1px solid #fff;

    z-index: 2;

    margin: 0px;

    left: 0px;

    bottom: 0px;

    border-top-width: 1px;

    transition: border-top-width 0.1s 0.2s, height 0.2s 0.1s, width 0.2s 0s, margin 0.2s 0s;

  } 

  .btn-effect:hover::after {

    width: 68%;

    height: 0px;

    border-width: 0px 1px 1px;

    margin: 0px 17%;

    transition: border-top-width 0.1s 0s, height 0.2s 0.1s, width 0.2s 0.2s, margin 0.2s 0.2s;

  }

}



#f-contact {

  background-position: center center;

  background-size: cover;

  position: relative;

  color: #fff;

  text-shadow: 1px 1px 2px rgba(0,0,0,.6), -1px 1px 2px rgba(0,0,0,.6), 1px -1px 2px rgba(0,0,0,.6), -1px -1px 2px rgba(0,0,0,.6);

}

#f-contact::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,.6);

  z-index: 1;

}

#f-contact > div {

  position: relative;

  z-index: 123;

}

#f-contact .ttl-index,

#f-contact a {

  color: #fff;

}

#f-contact a.mail-link {

  border: solid 1px #fff;

}

#footer  {

  background-color: #222222;

  color: #ffffff;

}

#footer-nav .nav-link,

#footer a, 

.copy {

  color: #ffffff;

}

#footer a:hover {

  color: #9E9E9E;

}

#footer-nav a.nav-link {

  text-decoration: underline;

  font-weight: 400 !important;

  padding: .4vw 0;

  font-size: 90%;

}



#footer-sns {

  position: relative;

  z-index: 123;

}

#footer-sns .fa-brands {

	font-size: 2.5rem;

}





#rebuilding p {

	color: #838383;

	border: 1px solid #838383;

	display: inline-block;

	padding: .25rem;

}

.poiter-none {

  pointer-events: none;

}

@media (min-width: 768px){

  /*page-top*/

  #Pagetop {

    position:fixed;

    bottom: 5vw;

    right: 3vw;  

    cursor:pointer;

    z-index: 1234567;

    opacity: .9;

    border: solid .5vw #222222;

    border-radius: 50%;

  }



  #Pagetop p {

    font-size: 250%;

    text-align: center;

    line-height: 2.7vw;

    height: 3vw;

    width: 3vw;

    padding: 0;

    margin: 0;

    color: #222222;

  }

  #Pagetop:hover {

    opacity: .4 !important;

  }

  #footer .nav-link i {

    line-height: 2vw !important;

  }

}



@media (min-width: 1300px){

  body {

    font-size: 1.15rem;

  }

}

@media (max-width: 599.98px){

  #mv{ height: 30vw; max-height: 260px; }
  #mv h1{ top: 18vw; font-size: 200%; }

}

@media (max-width: 767px){

  body {

    font-size: 3vw;

    line-height: 1.8;

  }

  .tel-link {

    pointer-events: auto;

    text-decoration: underline;

  }

  .form-control {

    padding: .2vw;

  }

  #mv {

    height: 90vw !important;

    min-height: 0;

  }

  #mv-cover {

    width: 50vw;

  }

  #mv h1 {

    top: 55vw;

    font-size: 170%;

  }

  #header {

    background-color: transparent;

    height: 0;

    position: absolute;

  }

  .logo-area {

    width: 90vw;

    top: 2vw;

	margin: 0 auto;

  }



  #header h1 {

    font-size: 75%;

    padding-bottom: 5px;

    padding-left: 10px;

    opacity: .7;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

  #nav-area {

    width: 0;

  }

  #inquiry-area {

    position: fixed;

    width: 100%;

    bottom: 0;

    left: 0;

    font-size: 160%;

    color: #ffffff;

    background-color: rgba(0, 0, 0,.9);

    z-index: 123456;

    height: 14vw;

  }

  #inquiry-area > div {

    height: 100%;

  }

  #inquiry-area a,

  .navbar-toggle {

    color: #ffffff;

    text-decoration: none;

    position: relative;

    display: block;

    height: 100%;

    line-height: 1;

  }

  .bm-text {

    font-size: 40%;

    position: absolute;

    left: 0;

    width: 100%;

  }

  .tel-text {

    font-size: 100%;

  }

  .navbar-toggle {

    border: none;

    margin-top: 0;

    outline: none !important;

    color: #ffffff;

    background-color: transparent;

    text-align: center;

    display: inline-block;

    width: 100%;

    padding-top: .7vw;

  }

  .navbar-toggle .icon-bar {

    background-color: #ffffff;

    width: 7vw;

    height: .7vw;

    display: block;

    border-radius: 1px;

    margin-left: auto;

    margin-right: auto;

  }

  .navbar-toggle span {

    transition: all 0.5s;

    transform: rotate(0deg);

  }

  .navbar-toggle .top {

    transform: translateY(0px);

  }

  .navbar-toggle .bottom {

    transform: translateY(0px);

  }



  .navbar-toggle .icon-bar+.icon-bar {

      margin-top: 1.2vw;

  }

  .navbar-toggle.is-open .middle {

    background: rgba(0, 0, 0, 0);

  }

  .navbar-toggle.is-open .top {

    transform: rotate(-45deg) translateY(1.4vw) translateX(-1.3vw);

  }

  .navbar-toggle.is-open .bottom {

    transform: rotate(45deg) translateY(-1.4vw) translateX(-1.3vw);

  }

  #header .main-nav {

    display: none;

    width: 100%;

    position: fixed;

    left: 0;

    bottom: -14vw;

    white-space: nowrap;

    max-height: 100%;

    height: auto;

    z-index: 123456;

    padding: 3vw;

    opacity: 0;

    overflow: auto;

    background-color: rgba(0,0,0,.9);

  }

  

  #header .main-nav ul {

    margin: 0;

  }

  #header .main-nav li {

    margin: 1.5vw 0;

    padding: 0 2vw;

    border-right: 0;

  }

  /*#header .nav-link {

    padding: 3vw 0;

    text-align: center;

    width: 100%;

    font-size: 105%;

    border: solid 1px rgba(255,225,255,.5);

    border-width: 0 0 1px;

    height: auto;

    color: #fff;

  }*/

  #header li:last-child .nav-link {

    border-width: 0 0 1px;

  }

  /*.child_menu{

    display:none!important;

  }*/

  #header .sub {

    position: static;

  }

  #header .sub li {

    margin-bottom: 3vw;

  }

  #header .sub-link {

    width: 100%;

  }

  #header .global_menu a {

    padding: 5px 30px;

  }

  .wp-pagenavi {

    margin: 6vw 0;

  }

  

  #footer {

    padding-bottom: 16vw;

  }

  #footer-nav a.nav-link {

    padding: .8rem 2.5vw;

  }

  #Pagetop {

    background-color: rgba(255,255,255,.2);

    font-size: 80%;

  }

  #Pagetop p {

    color: #ffffff;

  }

}



@media (max-width: 575px){

  body {

    font-size: 3.7vw;

  }

#header-nav {

	width: 100%;

	margin: 0 0;

}

#mv {

	width: 100%;

	margin: 0 0;

}

  #mv h1 {

    top: 53vw;

    font-size: 170%;

  }

.contents h1:before, 

.contents h1:after {

	width: 20%;

}	

}


/* すべての子メニューをデフォルト非表示に（外枠ごと消す） */
#header .child_menu{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* どのメニューをhoverしても開いてしまう共通ルールを殺す */
#header .menu:hover .child_menu .w-100{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}



/* お問い合わせページ内だけに適用（安全にスコープ） */
#inquiry .req{
  display: inline-block;
  padding: 2px 6px;        /* 余白（お好みで調整） */
  background: #e60000;     /* 赤 */
  color: #fff;             /* 白文字 */
  font-size: 12px;         /* 文字サイズ */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
  margin-left: .5em;       /* ラベル文字との間隔 */
  border-radius: 0;        /* 角丸なし＝四角。丸めたいなら 4px 等に */
}



/*LINEお問い合わせ用*/
#inquiry .line-contact{border:1px solid #e5e5e5;background:#f7fff7;padding:16px;margin:0 0 20px;border-radius:8px}
#inquiry .line-title{font-size:18px;margin:0 0 8px}
#inquiry .line-lead{margin:0 0 12px;color:#333}
#inquiry .line-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
#inquiry .line-qr{width:160px;max-width:40vw;height:auto;border:1px solid #ddd;background:#fff}
#inquiry .line-actions{display:flex;flex-direction:column;gap:8px}
#inquiry .line-btn{display:inline-block;padding:12px 16px;background:#06c755;color:#fff;text-decoration:none;border-radius:6px;font-weight:700}
#inquiry .line-btn:hover{opacity:.9}
#inquiry .line-id{font-size:14px;color:#222}

/* フォームのカード枠（テンプレに依存しないセレクタ） */
.mw_wp_form .mail-contact{
  border: 1px solid #e5e5e5;
  background: #f7f9ff;
  padding: 16px;
  border-radius: 8px;
}

/* タイトル */
.mw_wp_form .mail-contact .mail-title{
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: 700;
}



/* SNSだけは hover/focus 時に“最優先で”開く */
@media (min-width: 768px){
  #header #sns:hover > .child_menu,
  #header #sns:focus-within > .child_menu,
  #header #sns > .child_menu:hover{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 中身のUL(.w-100)も確実に表示（横並び） */
  #header #sns:hover > .child_menu .w-100,
  #header #sns:focus-within > .child_menu .w-100,
  #header #sns > .child_menu:hover .w-100{
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    opacity: 1 !important;
    visibility: visible !important;
  }
}







/* 本文側に出てくるH1（重複タイトル）を非表示にする */
.page #main header .title { display:none !important; }












/*    タイトル真ん中！！！！！！！*/
/* ==== MVタイトルを常に中央（PC幅のみ） ==== */
@media (min-width: 768px){
  /* 親ボックスを中央寄せ用のフレックスに */
  #mv{
    display: flex;
    align-items: center;   /* 垂直中央 */
    justify-content: center; /* 水平中央（見出しが中央揃えなので保険） */
  }
  /* 子の h1 は相対配置に戻して上オフセットを無効化 */
  #mv h1{
    position: relative;  /* 既存: absolute を上書き */
    top: 0;              /* 既存: 16vw を打ち消し */
    left: 0;
    transform: none;
    width: 100%;
    margin: 0;
    /* 既存の z-index は relative でも問題なし。必要なら z-index: 1234567; を残してもOK */
  }
}

/* ヘッダー高さを受け取る変数。JSが未設定でも0pxで動く */
:root{ --header-h: 0px; }

/* MVタイトルを「(100% + header-h)/2」を基準に中央へ */
#mv{
  position: relative; /* 念のため */
}
#mv h1{
  position: absolute;
  left: 50%;
  top: calc((100% + var(--header-h, 0px)) / 2);
  transform: translate(-50%, -50%); /* 自身の高さの半分だけ上に戻す */
  width: 100%;
  margin: 0;
  text-align: center; /* 念のため */
}









/* ホーム（投稿一覧 or 静的フロント）の #mv をまとめて非表示 */
body.home #mv-wrap,
body.front-page #mv-wrap{
  display: none !important;
}

/* 万一の余白ケア（#mv に依存した余白があれば相殺） */
body.home #main,
body.front-page #main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/*ホームの画像に差し替え*/
/* フル幅でキレイに表示（横スクロールは出さない） */
body.home .home-hero-only{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.home .home-hero__img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover; /* 全面感を出したいなら。切り抜きを避けたいなら contain に */
}


/* ホームだけ、#greeting の頭にヘッダー分の余白を足す */
body.home #greeting{
  margin-top: 80px;   /* ←ヘッダーの実高さに合わせて調整（例 64/72/96px） */
}

/* 念のためヘッダーは常に前面に */
.site-header, #header, .navbar{
  position: sticky; /* 既に fixed の場合はそのままでOK */
  top: 0;
  z-index: 9999;
}






/*****  スライダー設定  *****/
/* === ホーム下部スライダー：3枚/2枚/1枚 表示にするオーバーライド === */

/* まず PC は 3枚表示 */
@media (min-width: 992px){
  /* ビューポート（見える枠）の高さを少し抑える（任意） */
  #slide-wrap,
  .bx-viewport{
    height: 22vw !important; /* 例：22vw。もっと低くしたければ 18〜20vw など */
  }

  /* 中央寄せ用の左ズレをやめる */
  .slider{ left: 0 !important; overflow: visible !important; }

  /* 1枚の幅＝全体の1/3。左右に少し余白 */
  .slider li{
    width: calc(100vw / 3 - 1.5vw) !important;
    padding: 0 .75vw !important;
  }

  /* ページャの位置を中央寄せに調整 */
  .bx-pager{
    width: 100vw !important;
    padding-left: 0 !important;
    margin-top: -2.5vw !important;
  }

  /* 矢印の位置も左右端へ */
  .bx-wrapper .bx-prev{
    left: 0.5vw !important;
    padding: 2.2vw 0.6vw 2.2vw 1vw !important;
  }
  .bx-wrapper .bx-next{
    right: 0.5vw !important;
    left: auto !important;
    padding: 2.2vw 1vw 2.2vw 0.6vw !important;
  }
}

/* タブレット：2枚表示 */
@media (min-width: 768px) and (max-width: 991.98px){
  #slide-wrap,
  .bx-viewport{
    height: 34vw !important; /* 2枚なら少し高めでもOK */
  }
  .slider{ left: 0 !important; }
  .slider li{
    width: calc(100vw / 2 - 1.5vw) !important;
    padding: 0 .75vw !important;
  }
  .bx-pager{
    width: 100vw !important;
    padding-left: 0 !important;
    margin-top: -3.5vw !important;
  }
  .bx-wrapper .bx-prev{ left: 0.8vw !important; }
  .bx-wrapper .bx-next{ right: 0.8vw !important; left:auto !important; }
}

/* スマホ：1枚表示（元の設定を軽く整える） */
@media (max-width: 767.98px){
  #slide-wrap,
  .bx-viewport{
    height: 60vw !important; /* 既存値を踏襲 */
  }
  .slider{ left: 0 !important; }
  .slider li{
    width: 85vw !important; /* 既存値を踏襲 */
    padding: 0 !important;
  }
  .bx-pager{
    width: 100vw !important;
    padding-left: 0 !important;
  }
}






/******ギャラリーのタイトル*******/

.slider-heading-wrap{
  text-align:center;
  margin-bottom: 12px;         /* 見出しとスライダーの間隔 */
}
.slider-heading{
  font-size: clamp(20px, 3.2vw, 28px);
  letter-spacing: .08em;
  font-weight: 700;
  margin: 0;
}
.slider-sub{
  font-size: clamp(13px, 1.6vw, 14px);
  opacity: .8;
  margin: 6px 0 0;
}




/* 1) ホーム全体を黒ベースに */
body.home{
  background:#363738;
  color:#e8ecf2; /* 既定の文字色も少し明るめに */
}

/* 2) テーマ側が白を塗っている器を透明化（ホームだけ） */
body.home #wrap,
body.home #content,
body.home #main,
body.home section,
body.home .wp-block-group,
body.home .wp-block-columns{
  background: transparent !important;
}

/* Gutenbergの has-○-background が残っていたら透明化 */
body.home .wp-block-group.has-background,
body.home [class*="has-"][class*="-background-color"]{
  background: transparent !important;
}

/* 3) スライダーまわり（白背景が残りがちな要素を透明化） */
body.home #slide-wrap,
body.home .slider,
body.home .bx-wrapper{
  background: transparent !important;
}

/* 4) テーマで .bg-white 等を使っていれば黒化/透明化（あれば効く） */
body.home .bg-white{ background:#000 !important; }
body.home .card{ background: transparent !important; }

/* 5) リンク色（お好みで） */
body.home a{ color:#cfe1ff; }                /* 通常 */
body.home a:hover{ color:#a6c4ff; }          /* ホバー */





/*  トップページの隙間埋め */
/* ▼ ヘッダー下のスキマをなくす：ホームの先頭余白を0に */
body.home #greeting{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 念のため：ホーム先頭ブロック全般の“上余白”も潰す */
body.home .wp-block-group:first-of-type,
body.home section:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* もしヒーロー画像に .home-hero-only を使っているなら、上余白ゼロを保証 */
body.home .home-hero-only{
  display:block;
  margin-top: 0 !important;
}







/* ホームのSNSアイコンは必ず1行に収める */
/* ホームのSNSアイコン：スクロールバー無しで1行表示（自動縮小） */
body.home #footer-sns{
  display: flex !important;
  flex-wrap: nowrap !important;          /* 基本は1行 */
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 2vw, 14px);            /* 余白を自動調整して詰める */
  margin: 12px 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
  overflow: hidden;                      /* 横スクロール禁止 */
  box-sizing: border-box;                /* はみ出し防止の保険 */
}

body.home #footer-sns > li{
  flex: 0 0 auto !important;             /* 余計に伸び縮みしない */
  margin: 0 !important;
}

body.home #footer-sns a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.home #footer-sns img{
  display: block;
  height: clamp(22px, 4.5vw, 28px);      /* 画面幅に応じて“少しだけ”縮める */
  width: auto;
}

	  
	  

/* 画像URLは about-car の検証ツールからコピペして差し替えてください */
body.home #f-contact{
  background-image: url("https://museum755557.com/wp-content/themes/theme/images/new-car.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 念のため高さ確保（必要なら） */
  min-height: 280px;
}

/* よくあるオーバーレイ疑惑（:before で黒帯を被せてるテーマがある）を無効化 */
body.home #f-contact::before{
  content: none !important;
}

/* もし別ルールで background を丸ごと上書きされるなら、最後の手段として一括指定 */
body.home #f-contact{
  background: url("https://museum755557.com/wp-content/themes/theme/images/new-car.jpg") center / cover no-repeat !important;
}