@charset "utf-8";

/*高級ワインオンラインショップの新規会員登録キャンペーンを想定したLPのCSSです。*/

body {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	background-color: #222222;
	color:#A2A2A2;
}
header {
/*ロゴSiesta en el Patioの設定です。*/	
}

header h1 {
	font-size: 1.6rem; /*font-size:28px;*/
	font-family: "源ノ角ゴシック Regular","源ノ角ゴシック","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: lighter;
	margin: 0 auto;
	padding: 0.5% 15% 0.5% 28%;	
	background-color: #290B2B;
	color:#9F7623;
	text-shadow: 3px 3px 6px #070707,3px 3px 6px #070707,3px 3px 6px #070707;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 500px){/*RWD 文字を小さくします。*/
	header h1 {
		font-size: 1.4rem;
		padding: 0.5% 0% 0.5% 0%;
		text-align: center;
	}
}

/*ヘッダーのワイン樽の画像の設定です。*/
header div.headimg{
	max-width: 1280px;
	margin: 0 auto 0;
}
img.kv_pc{
	max-width:844px;
	max-height:500px;
	object-fit: cover;
	object-position: top;
}
p.rightyose{
	text-align: right;
}
/*メインタイトル「特別な出会いの設定です。」*/
.deai{
	font-weight: bold;
	font-size: 2.6rem;	/*font-size: 35px;*/
	margin: -180px auto 110px 24%;
	text-shadow:0px 0px 30px #FC8F00;
	letter-spacing: 0.5em;
}
/*アニメーション☆ふわっと「特別の出会い」が現れる。*/
.deai{
	animation-name:deai-key;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes deai-key{
	from{
		opacity: 0;
		transform: translateX(-100px);		
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

@media screen and (max-width: 670px){/*RWD 文字を小さくします。文字の位置を調整します。*/
	.deai {
		margin: -30% auto 20% 0;
		text-align: center;
		font-size: 2.2rem;
	}
}
@media screen and (max-width: 500px){/*RWD 文字を小さくします。*/
	.deai {
		font-size: 1.8rem;
	}
}

h2.camp_title{
	font-size: 2.5rem;
	color:#807219;
	font-weight:normal;
	background-color: #290B2B;
	text-align: center;
	letter-spacing: 0.2em;
	line-height: 1.8em;
	text-shadow: 3px 3px 6px #070707;
	display: block;
	padding: 0 0 0 8%;
}
@media screen and (max-width: 670px){/*RWD 文字を小さくします。。*/
	h2.camp_title {
		font-size: 1.8rem;
		
	}
}
@media screen and (max-width: 500px){/*RWD 文字を小さくします。。*/
	h2.camp_title {
		font-size: 1.3rem;
		letter-spacing: 0em;
	}
}


/*ここからはメニューボタンの設定になります。*/

/* RWD ハンバーガーメニューを設定します。*/
/* メニューの共通設定 */
nav.menu-wrapper #menu-btn-check {
    display: none;						/* チェックボックスは非表示 */
}
/* PCメニューの設定 */
nav.menu-wrapper {
	max-width: 960px;					/* メニュー最大幅 */
	margin: 30px auto 20px;
}
nav.menu-wrapper .menu-content ul {
	display: flex;
    list-style: none;
}
nav.menu-wrapper .menu-content ul li {
	width: 25%;
	padding: 5px 0;						/* メニューの上下の隙間 */
	/*border-right: 1px #ccc solid;*/		/* メニュー間の区切り線 */
}

@media screen and (max-width: 900px){/*RWD リストを２段に設定します。*/
	nav.menu-wrapper .menu-content ul {
		flex-wrap: wrap;
	}
	nav.menu-wrapper .menu-content ul li {
		width: 50%;
		margin-bottom: 0px;
	}
}

nav.menu-wrapper .menu-content ul li a {
	text-decoration: none;					/* メニューの文字色 */
	display: block;
	margin: 0 2% 0 2%;
	padding: 5px 0;
	font-size: 1.35rem;
	font-weight:500;
	text-align: center;
	background-color: #3B3424;
	border-radius: 10px;
	color: #828282;
	font-family: "源ノ角ゴシック Regular","源ノ角ゴシック","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}

@media screen and (max-width: 500px){/*RWD 文字を小さくします。。*/
	nav.menu-wrapper .menu-content ul li a {
		font-size: 0.9rem;
	}
}

nav.menu-wrapper .menu-content ul li a span {
	font-size: 90%;						/* メニュー（2段目）の文字サイズ */
	font-weight: normal;				/* メニュー（2段目）を通常文字 */
}
@media (hover: hover) and (pointer: fine) {
	nav.menu-wrapper .menu-content ul li a:hover {
		color: #000000;
		background-color: #A65CAF;					/* オンマウス時の色 */
	}
}

/* スマホメニューの設定 */
@media screen and (max-width: 350px) {
	nav.menu-wrapper .menu-btn {
	    position: fixed;				/* ボタン領域を右上に作成 */
	    top: 3px;						/* ボタンの縦位置 */
	    right: 5px;					/* ボタンの横位置 */
	    display: flex;
	    height: 35px;
	    width: 35px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background-color: rgba(0,0,0,0.3);
		cursor: pointer;
		border-radius: 5px;
	}
	nav.menu-wrapper .menu-btn span,		/* ボタンの3本線 */
	nav.menu-wrapper .menu-btn span:before,
	nav.menu-wrapper .menu-btn span:after {
	    content: '';
	    display: block;
	    height: 2.5px;
	    width: 25px;
	    border-radius: 3px;
	    background-color: #aaa;				/* 3本線の色 */
	    position: absolute;
		opacity: 1;
	}
	nav.menu-wrapper .menu-btn span:before {
	    bottom: 7px;						/* 上の線は上方向に10px移動 */
	}
	nav.menu-wrapper .menu-btn span:after {
	    top: 7px;							/* 下の線は下方向に10px移動 */
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span {
											/* ボタンクリック時：真ん中の線は非表示 */
	    background-color: rgba(255, 255, 255, 0);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::before {
											/* ボタンクリック時：上の線を斜め（／） */
	    bottom: 0;
	    transform: rotate(45deg);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::after {
											/* ボタンクリック時：下の線を斜め（＼） */
	    top: 0;
	    transform: rotate(-45deg);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-content {
											/* ボタンクリック時：メニュー領域を表示 */
	    left: calc(100% - 220px);			/* メニュー領域の引き出し位置（0にすると左端まで） */
	}
	nav.menu-wrapper .menu-content {		/* メニューのコンテンツ領域 */
		width: 100%;
		height: auto;						/* autoにするとコンテンツ領域分までに */
	    position: fixed;
	    top: 0;
	    left: 100%;
		overflow: auto;
	    z-index: 80;
	    padding: 0 10px;					/* メニュー領域の左右の隙間 */
	    background-color: rgba(0,0,0,0.7);	/* メニュー領域の背景色 */
	    transition: all 0.5s;				/* メニュー領域の引き出しスピード */
	}
	nav.menu-wrapper .menu-content ul {	/* メニューの領域を作成 */
		display: block;
		width: 200px;						/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
	    padding-top: 40px;					/* ボタン領域分を下に下げる */
	    list-style: none;
	}
	nav.menu-wrapper .menu-content ul li {
											/* メニューの項目領域 */
		width: 100%;
		border-right: none;
	    border-top: solid 1px #aaa;			/* メニュー項目間の線色 */
		opacity: 0.7;
	}
	nav.menu-wrapper .menu-content ul li:first-child {
		border-left: none;
	}
	nav.menu-wrapper .menu-content ul li a {
											/* メニューの項目領域（リンク実体） */
		display: block;
	    font-size: 16px;
	    text-decoration: none;
	    color: #fff;						/* メニュー項目の文字色 */
		font-weight: lighter;
	    padding: 5px 0px;
	    text-align: center;	               /* メニュー項目の表示位置 */
	}
	nav.menu-wrapper .menu-content ul li a span {
		font-size: 90%;
		font-weight: normal;
	}
	nav.menu-wrapper .menu-content ul li a:hover {
		opacity: 0.6;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */

/*ここからはmainの設定になります。*/
main {
	max-width: 960px;
	margin: 0 auto;
	padding: 0px 0;
	color: #D3D2D2;
}
/*ここからはsectionの設定になります。*/
main section.section1,.section2,.section3{
	padding: 5% 5% 2.6% 5%;
	display: flex;
	position: relative;
	margin-bottom: 55px;
}
/*section2だけ写真と画像を入れ替える設定です。*/
.section2{
	flex-direction: row-reverse;
}
@media screen and (max-width: 865px){/*RWD TEXTを縦に配置する設定です。*/
	main section.section1,.section2,.section3{
		flex-direction:column;
		padding-top: 8%;
		padding-bottom: 8%;
	}
}
	
/*sectionの画像の設定になります。*/
.secimg1,.secimg2,.secimg3 {	
	max-width: 330px;
	height: 100%;
	margin-left: 3%;
	display: inline-flex;
	vertical-align:middle;
	opacity: 0.6;
	box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
/*section2だけ画像を右寄せに設定しています。*/
.secimg2 {	
	margin-right:2%;
}
@media screen and (max-width: 865px){/*RWD TEXTを縦に配置する設定です。*/
	.secimg1,.secimg3{
		margin-left: 20%;
	}
	.secimg2{
		margin:0 20% 0 auto;
	}
}
@media screen and (max-width: 550px){/*RWD TEXTを縦に配置する設定です。*/
	.secimg1,.secimg3{
		margin-left: 10%;
	}
	.secimg2{
		margin:0 auto 0 10%;
	}
}	

/*ギリシャ数字の飾りの設定になります。*/
.secimg1::after {
	content: "Ⅰ";
	padding: 20% 0 0 17%;
	color: #222222;
	text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
	font-size: 34px;
}
.secimg2::before {
	content: "Ⅱ";
	margin-left: -30%;
	padding: 20% 20% 0 0;
	color: #222222;
	text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
	font-size: 34px;
}
.secimg3::after {
	content: "Ⅲ";
	padding: 20% 0 0 17%;
	color: #222222;
	text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
	font-size: 34px;
}
@media screen and (max-width: 550px){/*RWD ギリシャ数字の位置を変更します。*/
	.secimg1::after,.secimg3::after {
		padding: 20% 0 0 0;
		margin: 0;
		font-size: 15px;
	}
	.secimg2::before{
		padding: 20% 0 0 0;
		margin-left: -15px;
		font-size: 15px;
	}
	
}
/*sectionのtextの設定です。*/
.text1,.text2,.text3 {
	width:42%;
	display: block;
	font-size: 1.15rem;
	letter-spacing: 0.2em;
	font-weight:200;
	margin: 0 0 0 auto;
}
@media screen and (max-width: 500px){/*RWD 文字を小さくします。。*/
	.text1,.text2,.text3 {
		font-size: 0.9rem;
	}
}

/*section2のtextだけ左寄せに設定しています。*/
.text2{
	margin: 0 auto 0 0%;
	width: 44%;
	padding-left: 3%;
}
@media screen and (max-width: 865px){/*RWD 縦に並んだTEXTに幅を広げる設定です。*/
	.text1,.text2,.text3{
		width:80%;
		margin: 30px auto 0;
	}
}
	
/*sectionのborderにつける飾りの設定です。*/
section::before {
	background: transparent;
	padding: 0px;
	margin : 0px 0px auto auto;
	width: 60px;
	height: 30px;
	content: "";
	background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px),
	linear-gradient(to bottom, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	background-size: 20px 1px, 1.5px 20px;
	background-position:right top,right top;
	background-repeat: repeat-x ,repeat-y;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

/*アニメーション☆sectionにマウスを置くと、飾りのうねります。*/
section:hover::before {
	animation-name: kira-key;
	animation-fill-mode: forwards;
	animation-duration: 7s;
	transition-timing-function: linear;
}

@keyframes kira-key{
	0%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	2%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
	
	3%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
	}
	
	4%{
		background-image:
		linear-gradient(to left , #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
	
	6%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	7%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
	
	8%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
}
	
	9%{
		background-image:
		linear-gradient(to left, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
	
	10%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	12%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
	
	15%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
	}
	
	17%{
		background-image:
		linear-gradient(to left, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	
	}
	
	20%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	22%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
			
	27%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
	}
	
	30%{
		background-image:
		linear-gradient(to left, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
			
	35%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	40%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
			
	50%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
	}
	
	60%{
		background-image:
		linear-gradient(to left, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
			
	100%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
}


/*sectionのafterにつける飾りの設定です。*/
section::after {
	background: transparent;
	padding: 0px;	
	margin : auto auto 0 0;
	width: 60px;
	height: 30px;
	content: "";
	background-image: linear-gradient(to right, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px),
	linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	background-size: 20px 1.5px, 1px 20px;
	background-position:left bottom,left bottom;
	background-repeat: repeat-x ,repeat-y;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

/*アニメーション☆sectionにマウスを置くと、飾りのうねります。
liner-gradientの方向が間違っていますが、何とか動いています。*/
section:hover::after {
	animation-name: kira-key;
	animation-fill-mode: forwards;
	animation-duration: 5s;
	transition-timing-function: linear;
}

/*secton1の中にあるリストの設定と、強調文字「３０％ＯＦＦ」の色とフォントサイズを設定しています。*/
.text1 ul li{
	font-size: 0.88rem;
	padding-left:0%;
	margin-left:5%;
	letter-spacing: 0.1em;
	line-height: 2.3em;
}
.text1 ul li span.bigred{
	color: #FE6C6C;
	font-size: 2.1rem;
	line-height: 0em;
	letter-spacing: -0.03em;
	padding: 0;
}
.text1 ul li span.red{
	color: #FE6C6C;
	font-size: 1.1rem;
	letter-spacing: 0em;
}
.text1 ul li span.big{
	font-size: 1.5rem;
	letter-spacing: -0.05em;
}

/*新規会員登録ボタンの設定します。*/
.regist {
	width:94%;
	margin: -8% auto 9%;
	padding-top: 8%;
}
.regist ul {
	display: flex;
	list-style: none;
	width: 62.8%;
	margin: 40px auto;
	justify-content: space-between;
}
@media screen and (max-width: 600px){/*RWD 文字を小さくします。。*/
	.regist ul {
		width: 100%;
		justify-content: center;
	}
}

.regist ul li {
	width: 181px;
}
.regist ul li a {
	display: block;
	margin: 0 2% 0 2%;
	padding: 12px 0;
	font-size: 1.5rem;
	text-align: center;
	background-color: #7C7054;
	border-radius: 10px;
	color: #000000;
	font-weight:bold;
	line-height: 1em;
	text-shadow: 2px 2px 4px rgba(50,50,50,0.7);
	box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
@media screen and (max-width: 550px){/*RWD 文字を小さくします。。*/
	.regist ul li a  {
		font-size: 1.4rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	.regist ul li a:hover {
		color: #C0C0C0;
		background-color: #703777;
		/*opacity: 1;*/
	}
	/*新規会員登録のtextの設定です。*/
	.regist p{
		font-size: 1.15rem;
		letter-spacing: 0.2em;
		text-align: left;
	}
	.regist p a{
		letter-spacing: 0em;
		color:#6688dd;
		text-decoration: underline #6688dd;
	}
	.regist p a:hover{
		color:#999999;
		text-decoration: underline #999999;
	}
}

@media screen and (max-width: 500px){/*RWD 文字を小さくします。。*/
	.regist p {
		font-size: 0.9rem;
	}
}
/*ご確認事項のtextの設定です。*/
.attention{
	width: 87%;
	margin: 0 auto 30px;
	background-color: #7C7054;
	border-radius: 10px;
	padding: 2% 3% 4% 5%;
	color:#000000;
	font-size: 1.15rem;
	box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
.attention li{
	list-style-type:"◆ ";
}
@media screen and (max-width: 500px){/*RWD 文字を小さくします。。*/
	.attention li{
		font-size: 0.9rem;
		margin-left: 3%;
	}
}
/*フッターの設定です。*/
footer {
	padding:0;
	text-align: center;
	background-color: #5B564E;
	height: 135px;
	line-height:135px;
}
footer small {
	font-size: 14px;
}

/*ここは「Topに戻る」の設定です。*/
/*html {
    scroll-behavior: smooth;
}*/
#page-top {
    height: 31px;
    width: 31px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: rgba(0,0,0,0.7);
    /*border: solid 2px #000;*/
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
	opacity: 0.7;
}

.pagetop__arrow {
    height: 15px;
    width: 15px;
    border-top: 3px solid #C0BEBE;
    border-right: 3px solid #C0BEBE;
    transform: scaleY(170%) translateY(30%)  rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
#page-top:hover {
		background-color:#7D6733;
	}
#page-top:hover .pagetop__arrow {
        border-color: #CF16E6;
	}
}

#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}

@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}