/* ▼ モーダルナビゲーション（デフォルトでは非表示） */
.modal-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,51,62,0.9); /* 画像から色を抽出 */
    backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Safari用の設定 */
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* ↓JavaScriptで表示/非表示を切り替えるため、初期状態は隠しておく */
    transform: translateY(-100%);
    transition: transform 0.7s ease;
}
.modal-nav.is-active { transform: translateY(0); } /* JSでこのクラスを付与 */
/* header__hamburger */
.modal-nav__button {
    position: fixed; /* モーダル内に固定 */
    top: 53px;
    right: 20px;
    width: 40px;  /* クリックしやすいように領域を確保 */
    height: 40px; /* クリックしやすいように領域を確保 */
    cursor: pointer;
    z-index: 300; /* モーダル本体より手前に表示 */
    background: none; /* ボタンのデフォルトスタイルを消去 */
    border: none;
}
.modal-nav__button span {
    display: block; /* inline-blockから変更 */
    transition: all 0.4s ease-in-out; /* アニメーションを滑らかに */
    position: absolute;
    left: 0;
    height: 2px; /* 少し太くして見やすく */
    width: 100%;
    background-color: #fff; /* 背景が暗いので白に変更 */
    border-radius: 2px;
    top: 50%;
}
.modal-nav__button span:nth-of-type(1) {
    transform: translateY(-5px);
}
.modal-nav__button span:nth-of-type(2) {
     transform: translateY(5px);
}
/* activeクラスがついた時のスタイル（×） */
.modal-nav__button.active span:nth-of-type(1) {
    transform: translateY(0) rotate(45deg);
}

.modal-nav__button.active span:nth-of-type(2) {
    transform: translateY(0) rotate(-45deg);
}
/*背景の拡大*/
.bg{
    position: fixed;
	z-index:3;
	transform: scale(0);/*scaleをはじめは0に*/
	right:-100px;
    top:-30px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.bg.active{
	transform: scale(9);/*クラスが付与されたらscaleを拡大*/
}

.modal-nav__menu {
    text-align: center;
}

.modal-nav__menu ul li {
    margin-bottom: 3vh;
    font-size: 20px;
    color: #fff;
}
.modal-nav__menu .contact-button {
    margin-top: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.modal-nav__sns {
    margin: 10vh auto 3vh;
}

.modal-nav__sns img {
    width: 32px; /* アイコンサイズは適宜調整 */
}

/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}
@media (max-width: 745px) {
    .modal-nav__button {
    top: 23px;
    }
    
}
@media (max-width: 500px) {
   .text-wrap-modal {
    padding-left: 10px;
    font-size: 14px;
    }
    .information-modal-wrapper {
    padding-top: 100px;
    }
}