@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*****************************
 スクロールサイン
******************************/

/* スクロールダウン全体の場所 */
.scrolldown {
	/* 線の位置は適宜調整 */
	position: absolute;
	left: 0;
	bottom: -200px;
}

/* Scrollテキストの描写 */
.scrolldown span {
	/* 描画位置 */
	position: absolute;
	left: 10px;
	bottom: 65px;
	/* テキストの形状 */
	color: #eee;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	/* 縦書き設定 */
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown::before {
	content: "";
	/* 描画位置 */
	position: absolute;
	bottom: 0;
	left: -4px;
	/* 丸の形状 */
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #eee;
	/* 丸の動き 1.6秒かけて透過し、永遠にループ */
	animation:
		circlemove 1.6s ease-in-out infinite,
		circlemovehide 1.6s ease-out infinite;
}

/* 下からの距離が変化して丸の全体が上から下に動く */
@keyframes circlemove {
	0%{bottom:115px;}
	100%{bottom:-5px;}
}

/* 上から下にかけて丸が透過→不透明→透過する */
@keyframes circlemovehide {
	0%{opacity:0;}
	50%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
}

/* 線の描写 */
.scrolldown::after {
	content: "";
	/* 描画位置 */
	position: absolute;
	bottom: 0;
	left: 0;
	/* 線の形状 */
	width: 2px;
	height: 120px;
	background: #eee;
}


/*****************************
コンタクトフォーム
******************************/