@charset "utf-8";
/*==============
 body
===============*/
body {
	width: 100%;
	background-color: #FFF;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #666666;
	background: url(../images/bg.jpg) no-repeat;
	background-size:cover;
	-moz-background-size: 100% auto;
	margin: 0;
	padding: 0;
}
article {
	padding: 0 1%;
}
.webf {
	/*font-family: 'Lobster', cursive;*/
	font-family: 'Julius Sans One', sans-serif;
}
.sphdn {
	display: none;
}
.tactr {
	text-align: center;
}

/*============================ header =============================*/
header {
	background: rgba(217,217,217,0.5);
	padding: 3%;
	color: #FAFAFA;
}
/*============================ contents =============================*/
#mainContents {
	margin: 7% auto 0;
	width: 90%;
	color: #FAFAFA;
}
#mainContents h1 {
	font-size: 175%;
	padding: 10% 0;
	text-align: center;
	border: 1px solid #FAFAFA;
	margin-bottom: 15%;
}
#mainContents p {
	margin: 5% auto;
	text-align: center;
	line-height: 1.8;
	font-size: 95%;
}
#mainContents p.fa-icon {
	font-size: 500%;
	margin: 0 auto 7%;
}
#mainContents p#contactButton {
	margin-top: 15%;
}
.ghostButton {
	display: inline-block;
	padding: 3% 0;
	border: solid 1px rgba(255,255,255,0.8);
	background: rgba(0,0,0,0.1);
	color: #FAFAFA;
	text-decoration: none;
	width: 100%;
}
.ghostButton:hover {
	color: #333;
	background: rgba(255,255,255,0.5);
	text-decoration: none;
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
  Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/


/* ============== タブレットレイアウト；768px～959px ============== */
@media only screen and (min-width: 768px) {
header {
	padding: 1.5%;
}
#mainContents h1 {
	font-size: 300%;
	padding: 7% 0;
	margin: 0 auto 15%;
	width: 70%;
}
#mainContents p {
	margin: 5% auto;
	line-height: 1.8;
}
#mainContents p.fa-icon {
	font-size: 700%;
	margin: 5% auto;
}
#mainContents p#contactButton {
	margin-top: 20%;
}
.ghostButton {
	padding: 5% 0;
	width: 40%;
}
}

/* ============== PC；960px～ ============== */
@media only screen and (min-width: 960px) {
/* header */
header {
 padding:1%;
}
#mainContents {
 margin:3% auto 0;
 width:70%;
}
#mainContents h1 {
 font-size:400%;
 padding:5% 0;
 margin:0 auto 7%;
 width:70%;
}
#mainContents p {
 margin:5% auto;
 line-height:1.8;
 font-size:150%;
}
#mainContents p.fa-icon {
 font-size:700%;
 margin:3% auto;
}
#mainContents p#contactButton {
 margin-top:7%;
}
.ghostButton {
 padding: 3% 0;
 width:50%;
}
}

/* ============== ワイドPC；1281px～ ============== */
@media only screen and (min-width: 1281px) {
header {
 padding:0.7%;
}
 #mainContents {
 margin:3% auto 0;
 width:50%;
}
}