@charset "utf-8";

/* タイトルアイコン */
.title-contact{
	display:block;
	width:100px;
	height:80px;
	margin:10px auto;
	background:url("../image/icon_star1.png") no-repeat center/contain;
	opacity:0.9;
}
.contact-text{
	text-align:center;
	margin:30px auto;
	line-height:1.8;
	font-size: 0.8rem;
	color:#2b2b2b;
	max-width:520px;
}

/* ボタン */
.contact-btn{
	display:inline-block;
	margin:30px auto;
	padding:6px 0;
	font-size: 11px;
	letter-spacing:0.14em;
	background:none;
	border:none;
	color:#133b56;
	cursor:pointer;
	font-family:'Shippori Mincho','Cinzel',serif;
	position:relative;
	transition:opacity .6s ease;
}

/* アンダーライン */
.contact-btn::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-4px;
	width:0;
	height:1px;
	background:#133b56;
	transition:width .6s ease;
}

/* hover */
.contact-btn:hover{
	opacity:0.6;
}
.contact-btn:hover::after{
	width:100%;
}

/* モーダル初期状態 */
.contact-modal{
	position:fixed;
	inset:0;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgba(19,59,86,0.55);
	z-index:5000;
	opacity:0;
	visibility:hidden;
	transition:opacity .6s ease;
}

/* 表示状態 */
.contact-modal.active{
	opacity:1;
	visibility:visible;
}

/* モーダル本体 */
.modal-content{
	position:relative;
	width:80%;
	max-width:820px;
	max-height:85vh;
	height:auto;
	overflow-y:auto;
	background:#fff;
	border-radius:6px;
	box-shadow:0 20px 60px rgba(0,0,0,0.25);
	transform:scale(.96);
	opacity:0;
	transition:transform 0.8s ease, opacity 0.8s ease;
	will-change:transform, opacity;
}

.modal-content iframe{
	width:100%;
	height:900px;
	border:none;
}

/* 表示時 */
.contact-modal.active .modal-content{
	transform:scale(1);
	opacity:1;
}
.form-header{
	text-align:center;
	padding:70px 20px 16px;
	background:#f5f3ee url("../image/logo_spella-1.png") no-repeat center 30px;
	background-size:120px auto;
}
.form-note{
	font-size:12px;
	text-align:center;
	letter-spacing:0.05em;
}

/* 閉じるボタン */
.modal-close{
	position:absolute;
	top:10px;
	right:15px;
	font-size:24px;
	cursor:pointer;
	color:#333;
}

/* スマホ用表示 */
@media(max-width: 769px){
	.contact-text{
		font-size: 10px;
	}
}