@charset "UTF-8";
/*
	サンプルデザイン用CSS
	
*/

/* ==================================================
	カスタマイズサンプル
 * ================================================== */

/* ========== 001　Googleマップ（googlemap） ========== */

/* ----- グレースケール50% ----- */
.googlemap-gray50 {
	filter: grayscale(.5);
}
/* ----- グレースケール100% ----- */
.googlemap-gray100 {
	filter: grayscale(1);
}
/* ----- セピア25% ----- */
.googlemap-sepia25 {
	filter: sepia(.25);
}
/* ----- 階調反転 ----- */
.googlemap-invert100 {
	filter: invert(100%);
}
/* ----- 色循環90% ----- */
.googlemap-hue90 {
	filter: hue-rotate(90deg);
}
/* ----- 色循環180% ----- */
.googlemap-hue180 {
	filter: hue-rotate(180deg);
}
/* ----- 色循環270% ----- */
.googlemap-hue270 {
	filter: hue-rotate(270deg);
}
/* ----- 階調反転 & 色循環180% ----- */
.googlemap-invert-hue180 {
	filter: invert(100%) hue-rotate(180deg);
}
/* ----- ブレンド「青」 ----- */
.googlemap-overlay-bl{
	/*display: inline-block;*/
	background: #0099ff;
}
.googlemap-overlay-bl iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
	/*opacity: 0.3;*/
	/*vertical-align: bottom;*/
}
/* ----- ブレンド「赤」 ----- */
.googlemap-overlay-rd{
	background: #ff7777;
}
.googlemap-overlay-rd iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
}
/* ----- ブレンド「緑」 ----- */
.googlemap-overlay-gr{
	background: #32cb32;
}
.googlemap-overlay-gr iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
}
	
	
/* ========== スクロールダウンアニメーション（scrolldown-animation） ========== */

/* ----- 文字下にスクロールライン ----- */
.scroll {
  position: relative;	
}
.scrolldown-box {
	/*position: relative;*/
	height: 200px;
	padding: 1rem;
	background-color: #f7f7f7;
}

.scrolldown01-text {
	color: red;
	font-size: 14px;
	text-align: center;
	transform: rotate(90deg);
}
.scrolldown01-line {
	position: relative;
	top: 20px; /*文字との間隔調整*/
	width: 100%;
	height: 100px;
	overflow: hidden;
}
.scrolldown01-line:before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 40px;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto; /*中央に配置*/
}
@keyframes scrollbar {
  0% {
    height: 0;
    top: 0;
  }
  20% {
    height: 100%;
  }
  100% {
    top: 100%;
  }
}