@charset "utf-8";
/* CSS Document */

/*マーカーアニメーション*/
 
.marker-animation.active{
    background-position: 0px -100% ;	
	color: #1D2734;
}

.marker-animation{
    background-image: -webkit-linear-gradient(top, transparent 50%, rgb(255,255,255) 50%);
    background-image: -moz-linear-gradient(top, transparent 50%, rgb(255,255,255) 50%);
    background-image: -ms-linear-gradient(top, transparent 50%, rgb(255,255,255) 50%);
    background-image: -o-linear-gradient(top, transparent 50%, rgb(255,255,255) 50%);
    background-image: linear-gradient(top, transparent 50%, rgb(255,255,255) 50%);
    background-repeat: repeat-y;
    background-size: 200% 200%;
	padding: 20px 6px;
    background-position: 0 .0em;
    font-weight: 300;
}


.animation2{
	padding: 20px 7px 10px 5px !important;
}
.animation3{
	padding: 7px 10px !important;
}

/*黒塗りつぶし速さ*/
.marker_05 {
	transition-duration :1s ;
  	transition-delay :0.5s;
}
.marker_1 {
	transition-duration :1s ;
  	transition-delay :1s;
}
.marker_15 {
	transition-duration :1s ;
  	transition-delay :1.5s;
}

.marker_2 {
	transition-duration :1s ;
  	transition-delay :2s;
}
.marker_25 {
	transition-duration :1s ;
  	transition-delay :2.5s;
}
.marker_3 {
	transition-duration :1s ;
  	transition-delay :3s;
}
.marker_35 {
	transition-duration :1s ;
  	transition-delay :3.5s;
}
.marker_4 {
	transition-duration :1s ;
  	transition-delay :4s;
}

.marker-animation2.active2{
	background-position : right -100%;
	color: #fff;
}
 
.marker-animation2 {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-repeat: repeat-y;
    background-size: 200% 3em;
	padding: 6px 2px;
    background-position: 0 .0em;
}


.marker-animation3.active3{
	background-position: -100% 0em;
	color: #fff;
}
.marker-animation3 {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(29,39,52) 50%);
    background-repeat:repeat;
    background-size: 200% 5em;
	padding: 6px 12px;
    background-position: 0 .8em;
}

.marker-animation4.active4{
	background-position: 0px -100% ;
	color: #fff;
}
.marker-animation4 {
    background-image: -webkit-linear-gradient(top, transparent 50%, rgb(202, 73, 65) 50%);
    background-image: -moz-linear-gradient(top, transparent 50%, rgb(202, 73, 65) 50%);
    background-image: -ms-linear-gradient(top, transparent 50%, rgb(202, 73, 65) 50%);
    background-image: -o-linear-gradient(top, transparent 50%, rgb(202, 73, 65) 50%);
    background-image: linear-gradient(top, transparent 50%, rgb(202, 73, 65) 50%);
    background-repeat: repeat-y;
    background-size: 200% 200%;
	padding: 20px 6px;
    background-position: 0 .0em;
    font-weight: 300;
}


/*VOICE　吹き出し*/
	
.coment_box button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}
.tippy-tooltip.tomato-theme {
	background-color: #fff;
	color: #000;
	text-align: left;
}

.tippy-tooltip.tomato-theme[data-animatefill] {
  background-color: transparent;
}

.tippy-tooltip.tomato-theme .tippy-backdrop {
  background-color: #fff;
}
.tippy-tooltip.tomato-theme[x-placement^='top'] .tippy-arrow {
  border-top-color:  #fff;
}
.tippy-tooltip.tomato-theme[x-placement^='bottom'] .tippy-arrow {
  border-bottom-color:  #fff;
}
.tippy-tooltip.tomato-theme[x-placement^='left'] .tippy-arrow {
  border-left-color:  #fff;
}
.tippy-tooltip.tomato-theme[x-placement^='right'] .tippy-arrow {
  border-right-color:  #fff;
}
.tippy-tooltip.tomato-theme .tippy-roundarrow {
  fill: tomato;
}

/* ふわふわさせたいものに fuwafuwaクラスを付与 */
.fuwafuwa {
	-webkit-animation-name:fuwafuwa; 
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwa*/
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

/*メニューリンクの色*/
.fushimi_link a:link{
color: #000;
}
.fushimi_link a:visited{
color: #000;
}

.fushimi_link a :hover{
color: #ce5f49;
}

.fushimi_link2 a :link{
color: #fff;
}
.fushimi_link2 a :visited{
color:#fff;
}
.fushimi_link2 a :hover{
color:#ca4941;
}

.arashiyulink a:link ,.arashiyulink2 a:link {
color: #000;
}
.arashiyulink a:visited,.arashiyulink2 a:visited{
color: #000;
}
.arashiyulink a :hover{
color: #95b173;
}
.arashiyulink2 a :hover{
color: #7c8c64;
}

.arashiyulink3 a:link {
color: #000;
}
.arashiyulink3 a:visited{
color: #000;
}
.arashiyulink3 :hover{
opacity: 0.75 ;
}