/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/

/* Instagramだけにスタイルを適用 */
#avia-menu .menu-item-instagram .avia-font-icon {
  font-size: 20px;
  position: relative;
	line-height: 1;
	top: 2px;
}
.insta-label {
  margin-left: 5px
}

/* スマホ時表示 */
@media only screen and (max-width: 767px) {
  .insta-label {
    display: inline;
		top:10px;
    margin-left: 10px;
    
  }
}

/* フッターのバナー画像オーバーレイを常に全面に固定 */
#footer .image-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#footer a:hover .image-overlay {
  opacity: 1;
}


/*メールフォーム*/
label, .avia_ajax_form textarea, .avia_ajax_form input[type='text'], .avia_ajax_form select { color: #333333!important; }

#top .avia_ajax_form .error input[type='text'],
#top .avia_ajax_form .error .text_area {
border-width:2px!important;
}

.avia_ajax_form input[type=checkbox] {
  transform: scale(1.5);
}

/*ボタンアニメーション*/
.avia-button {
	color:#ffffff!important;
	background-color:transparent!important;
border: 1px solid #ffffff!important;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.avia-button:hover{
	color:#242424!important;
	background-color:#ffffff!important;
	letter-spacing: 0.25em;
}

/*CONTACTバナーボタン*/
.contact-bnr .avia-button {
	color:#ffffff!important;
	background-color:transparent!important;
border: 1px solid #ffffff!important;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.contact-bnr .avia-button:hover{
	color:#ffffff!important;
	background-color:transparent!important;
	letter-spacing: 0.25em;
}

/* ヒーロー本体 */
#mobile-hero-video{
  position:relative;
  width:100vw;
  height:100vh;   /* フォールバック */
  height:100svh;  /* Safari/iOS対応：下部アドレスバー手前まで */
  overflow:hidden;
  background:#000;
  z-index:0;
}

/* 動画 */
#mobile-hero-video .mhv-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}

/* オーバーレイ */
#mobile-hero-video .av-mobile-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6)
             url('https://hori-future.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png')
             repeat;
  z-index:1;
  pointer-events:none;
}

/* 通常ブラウザ用：完全中央 */
#mobile-hero-video .mhv-caption{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  color:#fff;
  width:min(90vw,36rem);
  padding:0 6vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

/* iOS Safari専用：少し下げる */
@supports (-webkit-touch-callout: none) {
  #mobile-hero-video .mhv-caption{
    transform:translate(-50%,-40%); /* ← 見え方に合わせて微調整 */
  }
}




/* タイトル・本文・ボタン */
#mobile-hero-video .avia-caption-title{
  font-size:2.6rem; margin-bottom:1rem;
}
@media(max-width:480px){
  #mobile-hero-video .avia-caption-title{ font-size:8vw; }
}
#mobile-hero-video .avia-caption-content{
  max-width:28em; margin:0 auto 1.5rem;
}
#mobile-hero-video .mhv-buttons{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}