@charset "utf-8";
/* CSS Document */

/*================================
	reset, base
=================================*/
*{
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 12px;
	margin: 0;
	padding: 0;
}

h1{
	font-family: 'Fredericka the Great', cursive;
	font-size: 6rem;
	color: #666;
}
h2{
	font-size: 3.5rem;
	color: #666;
	text-align: center;
	width: 100%;
	margin: 1rem;
}
h3{
	font-size: 2rem;
	color: #666;
}
p{
	font-size: 1rem;
	color: #666;
}

@media screen and (min-width: 768px){
	*{font-size: 14px;}
	h1{font-size: 10rem;}
}
@media screen and (min-width: 1080px){
	*{font-size: 16px;}
}

/*================================
	loader
=================================*/
/*中央に配置*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
	z-index: 9999;
}
/*ローダーのアニメーション*/
.heart { /* path にclass 設定 */
	stroke:rgba(255,100,240,1);				/* 線の色情報 */
	fill:#fcf;								/* 塗りの色情報 */
	fill-opacity:0;
	stroke-dasharray:850;					/* 線の長さと間隔 */
	stroke-dashoffset:850;					/* 線のアニメーション移動距離 */
	stroke-width:1;
	animation:heart 5s 0s ease-in-out 1;
	animation-fill-mode:forwards;			/* アニメーション後の状態を維持 */
}

@keyframes heart{
	0%{
		stroke-dashoffset: 850;
		stroke-opacity:1;
	}
	80%{
		stroke-dashoffset: 0;
		fill-opacity:0;
		stroke-opacity:1;
	}
	100%{
		fill-opacity:1;
		stroke-dashoffset: 0; /* ここにstroke 設定入れないと80%~100% にかけて非表示になる  fill="none" stroke="#FF00FF"*/
		stroke-opacity:.3;
	}
}


/*================================
	pagetopボタン
=================================*/

#page_top {
	position: fixed;
	z-index: 99;
	width: 5rem;
	height: 5rem;
	bottom: 3rem;
	right: 2rem;
	background: #f99;
	border-radius: 50%;
	cursor: pointer;
	opacity: .8;
}
#page_top p{
    color: #fff;
    text-decoration: none;
	font-size: 3.5rem;
	line-height: 5rem;
	text-align: center;
}
#page_top i{
    color: #fff;
    text-decoration: none;
	font-size: 3.5rem;
	line-height: 5rem;
	text-align: center;

}

#page_top:hover {
	opacity: 1;
}

@media screen and (min-width: 768px){
	#page_top{
		width: 6rem;
		height: 6rem;
	}
	#page_top p{
		font-size: 4rem;
		line-height: 6rem;
	}
	#page_top i{
		font-size: 4rem;
		line-height: 6rem;
	}
}




/*================================
	footer
=================================*/
#footer{
	background: #ccc;
}
#footer p{
	text-align: center;
	font-size: 1rem;
	height: 3rem;
	line-height: 3rem;
}


/*================================
	Contactモーダル本体の設定
=================================*/


/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
	z-index: 999999;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 800px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}

@media screen and (min-width: 768px){
	#about .modal-open{
		height: 6rem;
	}
	#about .modal-open p{
		line-height: 6rem;
		font-size: 3.5rem;
	}
		#about .modal-open i{
		font-size: 4rem;
	}
}


/*================================
	Contactモーダル内の設定
=================================*/
#form-area{
	width: 90%;
	margin: 0 auto;
}
#form-area p{margin-top: 8px ;}

#form-area input,
#form-area textarea{
	width: 100%;
}

#form-area textarea{height: auto;}

#form-area .entryBtn{
	margin:20px auto;
	width:12rem;
	height:3rem;
	background:#fff;
	box-sizing:border-box;
	overflow:hidden;
}

#form-area .entryBtn input{
	width: 100%;
	height: 100%;
	line-height: 3rem;
	text-align: center;
	background: #f99;
	border: 2px solid #f66;

}
#form-area .entryBtn input:hover{
	color: #fff;
	background: #f55;
	border: 2px solid #fff;
	cursor: pointer;
}