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

　      top.css

*****************************/

/*////////////////////編集エリア////////////////////*/
#main_img{
	position:relative;
	overflow: hidden;
}
.main_visual{
	position: relative;
	z-index: 2;
}
.visual1{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0%;
}
.visual2{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 100%;
}


#dot_navi{
	display: flex;
    width: 57px;
    margin: 0 auto;
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
	z-index: 3;
}
#dot_navi li{
	margin: 0 10px;
	background: url(../img/dot_over.png) no-repeat;
	background-size: 8px 8px;
}

.target_bg img{
	opacity: 0;
}

/*メニュー*/
#menu{
	margin-top: 20px;
}
/*-----------------------
body：画面全体の設定
------------------------*/
body {
	background:#fff;/*←背景色*/
}

/*-----------------------
ハッシュタグ
------------------------*/
#hash{
	font-size: 13px;/*←ハッシュタグの文字サイズ*/
	font-weight: bold;/*←ハッシュタグの文字の太さ*/
	border-top: solid 1px #bd9300;/*←ハッシュタグ上ボーダー色*/
	border-bottom: solid 1px #bd9300;/*←ハッシュタグ曽下ボーダー色*/
}
#hash a{
	color: #000;/*←ハッシュタグの文字色*/
	line-height: 40px;/*←ハッシュタグの高さ*/
}

/*-----------------------
footer
------------------------*/
#policy a{
	color: #000;/*←リンク文字色（プライバシー方針・利用規則）*/
	font-size:10px;/*←リンク文字サイズ（プライバシー方針・利用規則）*/
}
address{
	color:#000;/*←文字色（プライバシー方針・利用規則）*/
	font-size: 10px;/*←文字サイズ（プライバシー方針・利用規則）*/
}

#billing img{
	display:block;
	margin:0 auto;
}
#billing{
	width:100%;
	text-align:center;
	margin-top:15px;
}



/*////////////////////固定エリア////////////////////*/

body {
	position:relative;
	width:100%;
	height: 100%;
	overflow-x:hidden;
}
#container{
	text-align: center;
	margin: 0 10px;
}

/*-----------------------
SNSアイコン
------------------------*/
#sns{
	display: inline-block;
}
#sns ul{
	display: flex;
	margin: 27px 0;
}
#sns li{
	margin-right:20px;
}
#sns li:last-child{
	margin-right: 0;
}

/*-----------------------
shareアイコン
------------------------*/
#share{
	text-align: center;	
	height: 20px;
	margin: 20px 0;
}

#share ul{
	display: inline-block;
}
#share li{
	float:left;
	line-height:20px; 
	list-style:none;
}
/*twitter*/
.share1{
	width:75px;
	overflow:hidden;
	margin:0px 5px;
}
/*facebook*/
.share2{
	width:72px;
	height: 20px;
	overflow:hidden;
	margin:0px 5px;
}
/*Google+*/
.share3{
	width:32px;
	margin:0px 5px;
	overflow:hidden;
}

/*LINE*/
.share4{
	width:20px;
	margin:0px 5px;
	overflow:hidden;
}

/*-----------------------
footer
------------------------*/
/*WB・プライバシー方針・利用規約*/
#policy{
	display: inline-block;
}
#policy ul{
	display: flex;
}
#policy li{
	margin-right: 12px;
  line-height: 16px;
}
#policy li:last-child{
	margin-right: 0;
}
address{
	margin: 20px 0;
	font-style: normal;
}



.effect_anim{
	position:absolute;
	transform-origin:center center;
}
.effect_anim:nth-child(2){
    left: -15px;
    top: -2px;
    animation-name: st_effect2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 140px;
}
.effect_anim:nth-child(3){
    left: 240px;
    top: 40px;
    animation-name: st_effect2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 55px;
}
.effect_anim:nth-child(4){
    left: 20px;
    top: 313px;
    animation-name: st_effect2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 50px;
}
.effect_anim:nth-child(5){
    left: 176px;
    top: 355px;
    animation-name: st_effect2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 110px;
}

@keyframes st_effect2 {
	0% {transform:rotate(0deg) scale(0.8);}
	50% {transform:rotate(180deg) scale(1);}
	100% {transform:rotate(360deg) scale(0.8);}
}

.effect_anim img{
	position:relative;
	transform-origin: center center;
	transform:scale(0);
	opacity:0;
}
.anim_play{
	animation-name: st_effect;
	animation-duration: 1.5s;
	animation-timing-function:ease-in-out;
	animation-iteration-count: 1;
}


@keyframes st_effect {
	0% {transform:scale(0); opacity:0;}
	50% {transform:scale(1); opacity:1;}
	100% {transform:scale(0); opacity:0;}
}