@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
ヘッダ, フッタ, サイド
*/

@import url("https://use.typekit.net/cyd0kpf.css");

body {
	/*ゴシック*/
	font-family:"游ゴシック Medium","YuGothic Medium",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	
	/*明朝*/
	/*font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
	color:#3B3B3B;
	font-size:14px;
	line-height:1.5;
	letter-spacing: 0.1em;
	-webkit-text-size-adjust: 100%;
	}
	
/*テキストリンク*/
a {
	}
	
a:hover {
	}

#wrapper {
	overflow: hidden;
}
#container {
	padding:30px 4%;
	text-align: center;
	min-height:100vh;
	background:url("../img/bg@2x.png");
	background-size:cover;
	background-position: center top;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

@media(max-width:560px) {
	#container {padding:50px 4%;}
}

header {
	position: relative;
	width:100%;
}

h1 {
	font-size:71px;
	position: absolute;
	top:50%;
	width:100%;
	transform:translateY(-50%);
	font-family: faricy-new-web;
	font-weight: bold;
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1;
}
h1 a {
	margin: 0.7em auto 0;
	display: block;
	transition:opacity 0.3s linear;
	max-width:296px;
	width:45%;
}
h1 a:hover {opacity:0.6;}
#circle {
	position: relative;
	max-width:555px;
	margin:0 auto;
}

@media(max-width:910px) {
	h1 {font-size:60px;}
}
@media(max-width:560px) {
	h1 {font-size:7vw;}
}


#circle img:first-child {
  animation: rotate1 20s linear infinite;
}
#circle img:last-child {
	position: absolute;
	top:0;
	left:0;
  animation: rotate2 20s linear infinite;
}
 
@keyframes rotate1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotate2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.bottom {
	width:100%;
}

/*p.date {
	font-size:52px;
}
p.date span {display:inline-block;}

@media(max-width:910px) {
	p.date {font-size:40px;}
}
@media(max-width:560px) {
	p.date {font-size:9vw;}
}*/


.btnArea {
	display:flex;
	justify-content: center;
	max-width:1000px;
	margin:3em auto 0;
}
.btnArea > .block {
	vertical-align: top;
	width:72%;
	transition:width 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.btnArea > .block.active {width:100%;}
.btnArea > .block.goto {width:0;overflow: hidden;}

.btnArea p {
	font-size:18px;
}
.btnArea p span {display:inline-block;}
.btnArea a {
	font-size:15px;
	display:block;
	border:2px solid #fff;
	border-radius: 100px;
	max-width:230px;
	margin:2em auto 0;
	padding:1.2em 0;
	line-height: 1;
	text-decoration: none;
	color:#3B3B3B;
	background: #FFF500;
	transition:opacity 0.3s linear;
}
.btnArea a:hover {opacity:0.8;}

@media(max-width:910px) {
	.btnArea p {font-size:14px;}
}
@media(max-width:560px) {
	.btnArea {
		display:block;
		margin-top: 2em;
	}
	.btnArea > .block {width:100%;}
	.btnArea > .block:last-child {margin-top: 30px;}
	.btnArea p {font-size:14px;}
	.btnArea a {margin-top: 1em;}
}

.formArea {display:none;margin-top: 2em;}
.formArea form .flex {
	display:flex;
	justify-content: center;
}
.formArea input[type=email]{
	display: block;
	-webkit-appearance:none;
	border:2px solid #EBEBEB;
	border-radius:100px;
	font-size:14px;
	line-height: 1;
	padding:1.2em 1.5em;
	width:400px;
	transition:width 0.5s ease-out;
}
.formArea button {
	cursor: pointer;
	font-size:15px;
	display:block;
	border:2px solid #fff;
	border-radius: 100px;
	width:230px;
	margin: 0 0 0 1em;
	padding:1.2em 0;
	line-height: 1;
	text-decoration: none;
	color:#3B3B3B;
	background: #FFF500;
	transition:opacity 0.3s linear;
}
.formArea button:hover {opacity:0.8;}

.formArea .note {font-size: 12px;text-align: left;margin-top: 0.5em;}

.formArea .result {display:none;font-size: 18px;}
.formArea .result a {display:inline;margin:0;padding:0;background: none;border:none;border-radius: 0;width:auto;text-decoration: underline;font-size: inherit;}

@media(max-width:560px) {
	.formArea {
		margin-top: 1em;
	}
}