@charset "UTF-8";
/*----------------- reset css-----------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*  HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
	
/*----------------- //reset css-----------------*/

body {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
	font-weight:bold;
	-webkit-text-size-adjust: 100%;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.wrapper{
	max-width:100%;
	margin:0 auto;
	background:#ffdb6f;
	text-align:center;
}


.inner{
	width:100%;
	margin: 0 auto;
	background: url(../img/top_bg.png) repeat-x;
	background-size: 100%;
	}
	


/*---top---*/


#top{
    max-width: 960px;
    display: inline-block;
    position: relative;
    margin: 1% 0 0;
    z-index: 5;
    text-align: left;
    }/*スマホ*/
	@media screen and (max-width: 780px){
	#top{
	margin: 10px 0 10px;
	}
}


#top .top_innner{
	width: 38%;
    float: right;
    margin: 0px 18% 0 0;
    position: relative;
    display: inline-block;
    z-index: 1;
    text-align: right;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	#top .top_innner{
    width: 70%;
    margin: 20px 10px 0 auto;
    z-index: 1;
	}
}


#top img.sb{
	width: 43%;
	margin: 0px -10px -9px 0;
	}


#top img.logo{
	width: 89%;
	}
	

#top .korasho{
    width: 65%;
    position: absolute;
    clear: both;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	#top .korasho{
     width: 80%;
		}
	}

#top .korasho img{
	position: relative;
    right: -10%;
    top: 1vw;
    float: left;
    width: 68%;
	
	}/*スマホ*/
	@media screen and (max-width: 780px){
	#top .korasho img{
		right: 12%;
		top: 20px;
		width: 76%;
		}
	}


/*------content------*/


#content{
	position: relative;
	z-index: 10;
	clear: both;
	width:100%
	}
	
/*--アニメーション---*/	
	
.anime {
	opacity : 0.0;
	transform : translate(0px, 50px);
	transition : all 500ms;
	}
	
.anime.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
	}



/*---tomodachi---*/

.tomodachi{
	display:none;
	
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.tomodachi{
	margin: 5% auto;
	display:block;
	}
	
	.tomodachi a{
	position: relative;
	z-index: 0;
	text-align: center;
	display: block;
	width: 85%;
	margin: 0 auto;
		}
		
	.tomodachi .line_btn img{
		width:100%;
		}
	}
	
/*---過去ハインコンテンツ---*/

.blog{
	background: rgba(255, 255, 255, 0.5);
	display:block;
	width: 100%;
	margin: 0 auto;
	clear: both;
    color: #fff;
    font-size: 40px;	
	-webkit-transition: all .3s;
	transition: all .3s;
	text-decoration: none;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.blog{
		display: none;
		}
	}

.bg{
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    display: inline-block;
	}
	

.bg1{
    width: 70%;
    float: left;
    display: block;
    }

.bg2{
    width: 30%;
    display: block;
    float: right;
	}
.bg2 img{
	width: 20px;
}	
	
.blog:hover {
    color: #000;
   	background: rgba(255, 255, 255, 1);
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.blog,.blog p{
		display: none;
		}
	}


/*---navi---*/

.navi{
	width: 100%;
	position: relative;
	text-align: center;
	z-index: 99;
	background:#47cfff;
	}/*�X�}�z*/
	@media screen and (max-width: 780px){
	.navi{
	margin: 10vw 0 0 0;
	background: #FFF;
		}
	}
	
/*---line--*/

.line_icon1{
	display:none;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.line_icon1{
	width: 30%;
	position: absolute;
	top: -20vw;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 20;
	display:block;
		}
	}

.line_icon2{
    width: 25%;
    z-index: 20;
    display: block;
    margin: -10% auto 0;
    z-index: 20;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.line_icon2{
	display:none;
	}
}


/*----line article----*/
.navi_article{
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	}/*スマホ*/
	@media screen and (max-width: 780px){	
	.navi_article{
	background: #FFF;
	padding: 10% 0 0 0;
		}
	}
	
.second{
	padding:0;
	}
	
/*----QR article----*/

.qr_article{
	max-width: 960px;
	margin: 1% auto 0;
	overflow: hidden;
	}@media screen and (max-width: 780px){	
	.qr_article{
	display: none;
		}	
	}


.qr{
	width: 25%;
    display: inline-block;
    margin: 8% 0% 5% 5%;
    z-index: 20;
    float: left;
	}
.qr img{
width:100%;
}
.qr_ver{
    width: 62%;
    margin: 8% 5% 5% 0;
    background: #fff;
    float: right;
    border-radius: 15px;
}
.qr_t{
    padding: 0 0 5% 0;
    font-size: 28px;
}

/*スマホ*/
	@media screen and (max-width: 780px){
		.qr_article,.qr,.qr_ver,.qr_t{
		display:none;

		}
	}


	



.circle{	
	display:none;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.circle{
	width: 100%;
	height: 20vw;
	background: #ffffff;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
    border-radius: 50%/48%;
    position: absolute;
    top: -9vw;
	right: 0;
	left: 0;
	z-index: 1;
	display:block;
		}
	}


 
.line_t{
    width: 80%;
    margin: 3% auto;
    display: block;
	}/*スマホ*/
	@media screen and (max-width: 780px){
	.line_t{
	width: 90%;
	margin: 5%;
		}
	}
	
.line_t2{
	display: none;
	}@media screen and (max-width: 780px){
	.line_t2{
    	width: 80%;
		margin: 3% auto;
		display: block;
		}
	}


/*-----hou to----*/
.houto_article{
	max-width: 980px;
    margin: 0 auto;
	width: 100%;
    position: relative;
    z-index: 10;
}

.id_title{
	width: 90%;
	}@media screen and (max-width: 780px){
	.id_title{
	width: 100%;
		}
	}
	
/*---ID検索で友達追加する方法----*/

.houto{

    width: 70%;
    display: inline-block;
    background: #ffef7d;
    border-radius: 3%;
    padding: 3% 10%;
    margin: 5% auto;
    position: relative;
    z-index;5:
	}	
	@media screen and (max-width: 780px){
.houto{
	width: 85%;
	border-radius: 5%;
	padding: 5%;
    margin: 5% auto;

	}	
}


.navi .text{
	font-size: 28px;
	text-indent: 0.6em;
	line-height: 1.5;
	text-align: justify;
	width: 85%;
	margin: 0 auto;
	}	
@media screen and (max-width: 780px){
.navi .text{
	width: 100%;
    font-size:4.001vw;
	line-height: 1.7;
	margin: 5% auto 0;
	}
}

.text p span{
    padding: 0 10px 0;
    color: #38cf38;
    font-size: 175%;
	}

.houto_map{
	width:90%;
	margin: 5% auto;
}@media screen and (max-width: 780px){
	.houto_map{
		width:100%;
		}
	}

.houto_map img{
	width:100%;
	
	}




/*----シェアボタン----*/	
	
.shere{
	width: 60%;
	padding: 5% 0 0;
	display: inline-block;
	}	
	
.shere_p{
	font-weight: bold;
	margin: 5% auto 15%;
	color: #fff;
	font-size: 2.8vw;
}	/*スマホ*/
	@media screen and (max-width: 780px){
		.shere_p{
			color: #262f26;
		}
	}
	

.shere_bottom{
	width: 33%;
	float: left;
	
	}
.shere_bottom a{
	width: 70%;
	display: inline-block;
	}
.shere_bottom img{
	width:100%;
	}


.voice{
	width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
	}

.voice img{
	width:100%;
	}