@charset "UTF-8";


/*cssのリセット*/
/*-------------------------------------------------------*/
body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div{ margin: 0; padding: 0; font-size: 100%; }
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6{ line-height: 0; }
a img{ border: none; }
img{ vertical-align: middle; max-width: 100%; height: auto; }
body,p,div{
	font-size: 16px;
	line-height: 26px;
	color: #666666;
	font-family: Lato, "メイリオ", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-family: "Helvetica neue", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif \9;
}
body:not(:target),
p:not(:target),
div:not(:target){ font-family: Lato, "メイリオ", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif \9; }
a{ transition: opacity 0.25s linear, color 0.25s linear, background-color 0.25s linear; }
a:hover{ opacity: 0.7; }
.txt-hide{ text-indent: 200%; overflow: hidden; white-space: nowrap; *text-indent: -9999px; }
.sp-show{ display: none; }
.txt-center{ text-align: center; }

@media screen and (max-width: 480px){
	body,p,div{
		font-size: 14px; line-height: 24px;
		font-family: Lato, Roboto, 'Noto Sans Japanese', sans-serif;
	}
	.pc-show{ display: none; }
	.sp-show{ display: block; }
	img.sp-show{ display: inline; }
}

#wrapper{ border-top: 5px solid #00cb00; min-width: 1000px; }
#header-content{ overflow: hidden; position: relative; padding: 10px; }
#header-content > .logo{ float: left; margin-top: 1px; width: 219px; }
#header-content > .navi{ float: right; }
#header-content > .navi > a{ display: block; background: url(../image/head-navi.gif) 0 0 no-repeat; width: 312px; height: 44px; }
#main-content > .hero{ background: url(../image/title.gif) center center no-repeat #00cb00; width: 100%; height: 218px; }
#main-content .friend-btn > a{ display: block; background: url(../image/friend-btn.png) 0 0 no-repeat; width: 448px; height: 66px; margin: 0 auto; }
#main-content .friend-btn > a:hover{ opacity: 1; background-position: 0 bottom; }
#main-content > .main{ padding-bottom: 65px; }
#main-content .txt-id01{ background: url(../image/t01.png) 0 0 no-repeat; margin: 70px auto 0; width: 426px; height: 25px; }
#main-content .txt-id02{ background: url(../image/t02.png) 0 0 no-repeat; margin: 24px auto 0; width: 650px; height: 25px; }
#main-content .intro-area{ background-color: #e3f8e0; width: 710px; padding: 30px 0 30px 220px; margin: 45px auto 0; border-radius: 10px; position: relative; }
#main-content .intro-area > .photo{ position: absolute; left: 50%; top: 50%; margin: -90px 0 0 -362px; width: 88px; }
#main-content .intro-area > .head{ background: url(../image/h01.png) 0 0 no-repeat; width: 392px; height: 33px; }
#main-content .intro-area > .txt{ margin-top: 12px; }
#main-content .limited{ margin-top: 30px; }
#main-content .txt-id03{ background: url(../image/t03.png) 0 0 no-repeat; margin: 40px auto 0; width: 509px; height: 31px; }
#main-content .feature-area{ margin-top: 80px; }
#main-content .feature-area > .head{ background: url(../image/h02.png) center 0 no-repeat; width: 367px; height: 36px; margin: 0 auto; border-bottom: 1px solid #00cb00; padding: 0 5px 12px; *text-indent: -9999px; }
#main-content .feature-area > .photo{ margin-top: 40px; }
#main-content .feature-area > .copy{ background: url(../image/t04.png) center center no-repeat; width: 314px; height: 30px; margin: -10px auto 0; border: 1px solid #333333; border-left: none; border-right: none; padding: 20px 15px; position: relative; *text-indent: -9999px; }
#main-content .feature-item{ overflow: hidden; width: 930px; margin: 30px auto 0; }
#main-content .feature-item > .item{ width: 290px; float: left; }
#main-content .feature-item > .item+.item{ margin-left: 30px; }
#main-content .feature-item > .item > .head{ background: 0 0 no-repeat; margin-top: 10px; }
#main-content .feature-item > .item01 > .head{ background-image: url(../image/h03.png); width: 102px; height: 24px; }
#main-content .feature-item > .item02 > .head{ background-image: url(../image/h04.png); width: 289px; height: 24px; }
#main-content .feature-item > .item03 > .head{ background-image: url(../image/h05.png); width: 286px; height: 54px; }
#main-content .feature-item > .item > .txt{ margin-top: 10px; }
#main-content .feature-area > .friend-btn{ margin-top: 40px; }
#main-content .howto-area{ background-color: #70b52c; padding: 85px 0 50px; }
#main-content .howto-area > .head{ background: url(../image/h06.png) 0 0 no-repeat; width: 295px; height: 35px; margin: 0 auto; }
#main-content .howto-area > .txt{ text-align: center; color: #ffffff; margin-top: 20px; }
#main-content .howto-area > .inner{ background-color: #ffffff; width: 840px; padding: 75px 45px 60px; margin: 0 auto; border-radius: 5px; margin-top: 35px; }
#main-content .howto-area > .inner > .section+.section{ margin-top: 80px; }
#main-content .howto-area > .inner > .section > .head{ font-size: 34px; line-height: 44px; font-weight: bold; color: #70b52c; }
#main-content .howto-area > .inner > .section > .head > .inner{ display: inline-block; border-bottom: 5px solid #70b52c; }
#main-content .howto-area > .inner > .section > .info{ text-align: center; margin-top: 30px; }
#main-content .howto-area > .inner > .section > .info > *{ display: inline-block; *display: inline; *zoom: 1; text-align: left; vertical-align: middle; }
#main-content .howto-area > .inner > .section > .info > *+*{ margin-left: 20px; }
#main-content .howto-area > .inner > .section > .info > .qr{ width: 120px; }
#main-content .howto-area > .inner > .section > .info > .account-area{ background-color: #f1f7eb; padding: 12px 20px; text-align: center; }
#main-content .howto-area > .inner > .section > .info > .account-area > .account{ font-size: 30px; line-height: 40px; font-weight: bold; color: #70b52c; }
#main-content .howto-area > .inner > .section > .info > .account-area > .caption{ font-size: 12px; line-height: 18px; }
#main-content .howto-area > .inner > .section > .info > .txt-body > .caption{ font-size: 12px; line-height: 18px; margin-top: 5px; }
#main-content .howto-area > .inner > .section > .device-area{ margin-top: 50px; }
#main-content .howto-area > .inner > .section > .device-area+.device-area{ margin-top: 40px; }
#main-content .howto-area > .inner > .section > .device-area > .head{ background-color: #f2f2f2; font-size: 20px; line-height: 30px; padding: 10px 10px 10px 35px; position: relative; color: #444444; }
#main-content .howto-area > .inner > .section > .device-area > .head:before{ content: ''; position: absolute; width: 14px; height: 14px; background-color: #70b52c; left: 13px; top: 50%; margin-top: -7px; }
#main-content .howto-area > .inner > .section > .device-area > .list-item{ margin-top: 30px; }
#main-content .howto-area > .inner > .section > .device-area > .list-item > .item{ display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 180px; }
#main-content .howto-area > .inner > .section > .device-area > .list-item > .item+.item{ padding-left: 40px; background: url(../image/icon_next.png) no-repeat; }
#main-content .howto-area > .inner > .section > .device-area > .list-item > .item > .photo > img{ max-width: none; }
#main-content .howto-area > .inner > .section > .device-area > .list-item > .item > .txt{ font-size: 12px; line-height: 18px; margin-top: 15px; }
#main-content .howto-area > .inner > .section > .iphone > .list-item > .item+.item{ background-position: 14px 148px; }
#main-content .howto-area > .inner > .section > .iphone > .list-item > .item > .photo{ height: 310px; }
#main-content .howto-area > .inner > .section01 > .iphone > .list-item > .item03 > .photo{ margin-left: -4px; }
#main-content .howto-area > .inner > .section > .android > .list-item > .item+.item{ background-position: 14px 134px; }
#main-content .howto-area > .inner > .section > .android > .list-item > .item > .photo{ height: 282px; }
#main-content .howto-area > .inner > .section > .android > .list-item > .item01 > .photo{ margin-left: -9px; }
#main-content .howto-area > .inner > .section01 > .android > .list-item > .item03 > .photo{ margin-left: -4px; }
#main-content .howto-area > .inner > .section > .friend-btn{ margin-top: 40px; }
#footer-content{ padding: 20px 0; border-top: 1px solid #eeeeee; }
#footer-content .copyright{ font-size: 10px; line-height: 20px; color: #aaaaaa; }








@media screen and (max-width: 480px){
	#wrapper{ min-width: 0; }

	#header-content > .navi > a.txt-hide,
	#main-content .friend-btn > a.txt-hide,
	#main-content .txt-id01.txt-hide,
	#main-content .txt-id02.txt-hide,
	#main-content .intro-area > .head.txt-hide,
	#main-content .txt-id03.txt-hide,
	#main-content .feature-area > .head.txt-hide,
	#main-content .feature-area > .copy.txt-hide,
	#main-content .feature-item > .item01 > .head.txt-hide,
	#main-content .feature-item > .item02 > .head.txt-hide,
	#main-content .feature-item > .item03 > .head.txt-hide,
	#main-content .howto-area > .head.txt-hide{ background-image: none; width: auto; height: auto; text-indent: 0; white-space: normal; }
	#header-content{ padding: 10px; }
	#header-content > .logo{ float: left; width: 200px; }
	#header-content > .navi{ float: right; line-height: 0; }
	#header-content > .navi > a{ display: inline-block; background-color: #00cb00; color: #ffffff; text-decoration: none; font-size: 14px; line-height: 20px; border-radius: 3px; padding: 5px 10px; }
	#header-content > .navi > a:hover{ opacity: 1; }
	#header-content > .navi > a:active{ background-color: #00b602; }
	#main-content > .hero{ background-image: url(../image/sp/title.gif); height: 184px; }
	#main-content > .main{ padding: 20px 15px 30px; }
	#main-content .friend-btn > a{ display: block; background-color: #00cb00; border-radius: 5px; font-size: 16px; line-height: 22px; color: #ffffff; text-decoration: none; text-align: center; padding: 10px 25px; border: 1px solid #00b602; position: relative; font-weight: bold; }
	#main-content .friend-btn > a:active{ background-color: #00b602; }
	#main-content .friend-btn > a::before,
	#main-content .friend-btn > a::after{ content: ''; position: absolute; left: 12px; top: 50%; margin-top: -6px; border: solid transparent; border-width: 6px; }
	#main-content .friend-btn > a::before{ border-left-color: #ffffff;}
	#main-content .friend-btn > a::after{ border-left-color: #00cb00; margin-left: -2px; transition: border-color 0.5s linear; }
	#main-content .friend-btn > a:active::after{ border-left-color: #00b602; }
	#main-content .txt-id01,
	#main-content .txt-id02{ margin-top: 0; }
	#main-content .intro-area{ padding: 20px; width: auto; margin-top: 20px; }
	#main-content .intro-area > .photo{ position: static; margin: 0 auto; width: 60px; }
	#main-content .intro-area > .head{ font-size: 22px; line-height: 30px; color: #00cb00; margin-top: 15px; }
	#main-content .intro-area > .txt{ margin-top: 10px; }
	#main-content .intro-area > .txt br{ display: none; }
	#main-content .limited{ margin-top: 10px; }
	#main-content .txt-id03{ margin-top: 20px; font-size: 18px; line-height: 28px; font-weight: bold; color: #333333; text-align: center; }
	#main-content .txt-id03 > .marker{ border-bottom: 4px solid #fff500; }
	#main-content .feature-area{ margin-top: 40px; }
	#main-content .feature-area > .head{ font-size: 20px; line-height: 28px; color: #00cb00; padding: 0; text-align: center; border-bottom: none; }
	#main-content .feature-area > .head > .inner{ display: inline-block; border-bottom: 1px solid #00cb00; padding-bottom: 3px; }
	#main-content .feature-area > .photo{ margin-top: 15px; }
	#main-content .feature-area > .copy{ padding: 0; text-align: center; border: none; margin-top: 0; }
	#main-content .feature-area > .copy > .inner{ display: inline-block; border: 1px solid #333333; border-left: none; border-right: none; font-weight: bold; font-size: 18px; line-height: 22px; color: #333333; padding: 7px 15px; }
	#main-content .feature-item{ width: auto; margin-top: 20px; }
	#main-content .feature-item > .item{ width: auto; float: none; }
	#main-content .feature-item > .item+.item{ margin-left: 0; margin-top: 20px; padding-top: 20px; border-top: 1px dotted #cccccc; }
	#main-content .feature-item > .item > .head{ font-size: 20px; line-height: 28px; color: #00cb00; }
	#main-content .feature-item > .item > .txt{ margin-top: 5px; }
	#main-content .feature-area > .friend-btn{ margin-top: 30px; }
	#main-content .howto-area{ padding: 40px 15px 30px; }
	#main-content .howto-area > .head{ font-size: 20px; line-height: 24px; color: #ffffff; text-align: center; }
	#main-content .howto-area > .txt{ text-align: left; margin-top: 10px; }

	#main-content .howto-area > .inner{ width: auto; padding: 30px 15px; margin-top: 20px; }
	#main-content .howto-area > .inner > .section+.section{ margin-top: 40px; }
	#main-content .howto-area > .inner > .section > .head{ font-size: 20px; line-height: 24px; }
	#main-content .howto-area > .inner > .section > .head > .inner{ border-bottom-width: 3px; }
	#main-content .howto-area > .inner > .section > .info{ margin-top: 20px; }
	#main-content .howto-area > .inner > .section > .info > *{ display: inline-block; *display: inline; *zoom: 1; text-align: left; vertical-align: middle; }
	#main-content .howto-area > .inner > .section > .info > *+*{ margin-left: 0; margin-top: 15px; }
	#main-content .howto-area > .inner > .section > .info br{ display: none; }
	#main-content .howto-area > .inner > .section > .info > .account-area{ padding: 12px 15px; }
	#main-content .howto-area > .inner > .section > .info > .account-area > .account{ font-size: 24px; line-height: 34px; font-weight: bold; color: #00cb00; }
	#main-content .howto-area > .inner > .section > .info > .account-area > .caption{ font-size: 10px; line-height: 16px; }
	#main-content .howto-area > .inner > .section > .info > .txt-body > .caption{ font-size: 10px; line-height: 16px; margin-top: 5px; }
	#main-content .howto-area > .inner > .section > .device-area{ margin-top: 20px; }
	#main-content .howto-area > .inner > .section > .device-area+.device-area{ margin-top: 30px; }
	#main-content .howto-area > .inner > .section > .device-area > .head{ font-size: 16px; line-height: 26px; padding: 6px 10px 6px 25px; }
	#main-content .howto-area > .inner > .section > .device-area > .head::before{ width: 10px; height: 10px; left: 10px; margin-top: -5px; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item{ margin-top: 20px; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item > .item{ display: block; width: 100%; overflow: hidden; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item > .item+.item{ padding-left: 0; margin-top: 15px; padding-top: 25px; background: url(../image/sp/icon_next.png) center 0 no-repeat!important; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item > .item > .photo{ float: left; width: 80px; padding-right: 10px; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item > .item > .photo > img{ max-width: 100%; }
	#main-content .howto-area > .inner > .section > .device-area > .list-item > .item > .txt{ overflow: hidden; margin-top: 0; }
	#main-content .howto-area > .inner > .section > .iphone > .list-item > .item > .photo{ height: auto; }
	#main-content .howto-area > .inner > .section > .iphone > .list-item > .item01 > .photo{ width: 87px; }
	#main-content .howto-area > .inner > .section01 > .iphone > .list-item > .item03 > .photo{ margin-left: 0; }
	#main-content .howto-area > .inner > .section > .android > .list-item > .item > .photo{ height: auto; }
	#main-content .howto-area > .inner > .section > .android > .list-item > .item01 > .photo{ margin-left: 0; width: 93px; }
	#main-content .howto-area > .inner > .section01 > .android > .list-item > .item03 > .photo{ margin-left: 0; }
	#main-content .howto-area > .inner > .section > .friend-btn{ margin-top: 30px; }
}


@media screen and (-webkit-min-device-pixel-ratio: 1.5),screen and (min-resolution: 1.5dppx){
	#main-content > .hero{ background-image: url(../image/title@2x.gif); background-size: auto 100%; }
	#main-content .txt-id01{ background-image: url(../image/t01@2x.png); background-size: contain; }
	#main-content .txt-id02{ background-image: url(../image/t02@2x.png); background-size: contain; }
	#main-content .intro-area > .head{ background-image: url(../image/h01@2x.png); background-size: contain; }
	#main-content .txt-id03{ background-image: url(../image/t03@2x.png); background-size: contain; }
	#main-content .feature-area > .head{ background-image: url(../image/h02@2x.png); background-size: 367px 36px;  }
	#main-content .feature-area > .copy{ background-image: url(../image/t04@2x.png); background-size: 314px 30px;  }
	#main-content .feature-item > .item01 > .head{ background-image: url(../image/h03@2x.png); background-size: contain; }
	#main-content .feature-item > .item02 > .head{ background-image: url(../image/h04@2x.png); background-size: contain; }
	#main-content .feature-item > .item03 > .head{ background-image: url(../image/h05@2x.png); background-size: contain; }
	#main-content .friend-btn > a{ background-image: url(../image/friend-btn@2x.png); background-size: 100% auto; }
	#main-content .howto-area > .head{ background-image: url(../image/h06@2x.png); background-size: contain; }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px),screen and (min-resolution: 1.5dppx) and (max-width: 480px){
	#header-content .navi > a{ background-image: url(../image/head-navi@2x.gif); background-size: contain; }
	#main-content > .hero{ background-image: url(../image/sp/title@2x.gif); }
}