@charset "utf-8";

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Thin.ttf') format("opentype");
	font-style: normal;
	font-weight: 100;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Light.ttf') format("opentype");
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Regular.ttf') format("opentype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Medium.ttf') format("opentype");
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Bold.ttf') format("opentype");
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../font/MPLUSRounded1c-Black.ttf') format("opentype");
	font-style: normal;
	font-weight: 900;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url('../font/NotoSansJP-Medium.otf') format("opentype");
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url('../font/NotoSansJP-Bold.otf') format("opentype");
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: 'Noto Sans KR';
	src: url('../kr/font/NotoSansKR-Regular.otf') format("opentype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Noto Sans KR';
	src: url('../font/NotoSansKR-Medium.otf') format("opentype");
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'Noto Sans KR';
	src: url('../kr/font/NotoSansKR-Bold.otf') format("opentype");
	font-style: normal;
	font-weight: 700;
}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}

tr, th, td {
	border: 0;
}

li {
	list-style: none;
}

body {
	background: #fff;
	font-family: "M PLUS Rounded 1c","ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",'M PLUS Rounded 1c';
	font-weight: 400;
	text-align: center;
	color: #000;
	overflow: auto;
}

a img {
	border: 0;
}

.clearfix:after {
	content: ".";
	visibility: hidden;
	clear: both;
	display: block;
	height: 0;
}

.clearfix {
	zoom: 1;
	margin-bottom: 0;
}

@media only screen and (min-width:768px) {
	body {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		font-size: 18px;
		line-height: 1;
	}
	
	a {
		color: #32b753;
		text-decoration: none;
		-webkit-transition: color .4s ease-in-out;
		transition: color .4s ease-in-out;
	}
	
	a:link {
		color: #32b753;
	}
	
	a:visited {
		color: #32b753;
	}
	
	a:hover {
		color: #91cb8f;
	}
	
	a img {
		opacity: 1;
		-webkit-transition: opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
	}
	
	a:hover img {
		opacity: 0.7;
	}
	
	a.anchor {
		display: block;
		padding-top: 85px;
		margin-top: -85px;
	}
	
	a.anchor-pp {
		display: block;
		padding-top: 85px;
		margin-top: -85px;
		padding-top: 170px;
		margin-top: -170px;
	}
	
	img {
		width: 100%;
	}
	
	.sp {
		display: none;
	}
	
	div.wrapper {
		position: relative;
		margin: 0 auto;
		width: 100%;
	}
	
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-image: url(../img/bg_star_g_pc.png);
		background-size: 377px;
		background-repeat: repeat;
		width: 100%;
		z-index: 10;
	}
	
	div.header-outer {
		background-image: url(../img/bg_star_g_pc.png);
		background-size: 377px;
		background-repeat: repeat;
		padding-top: 10px;
	}
	
	div.header-wrapper {
		width: 100%;
		height: 85px;
	}
	
	#header {
		position: relative;
		box-sizing: content-box;
		margin: 0 auto;
		padding: 0 50px;
		max-width: 1125px;
		height: 85px;
	}
	
	#header ul.lang-btn {
		position: absolute;
		top: 53px;
		right: 50px;
	}
	
	#header ul.lang-btn li a {
		display: block;
		background-color: #427d41;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		padding: 0.5em 0.8em;
		font-family: "Noto Sans KR","SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 1;
		color: #fff;
		transition: background-color 0.5s ease;
	}
	
	#header ul.lang-btn li a:hover {
		color: #fff;
		background-color: #4b8d4a;
	}
	
	#header div#nav-icn {
		display: none;
	}

	#header div.header-sp-out {
		display: none;
	}

	#header div.header-sp-in {
		display: flex;
/*
		align-items: center;
*/
		justify-content: space-between;
		padding-top: 8px;
		width: 100%;
		height: auto !important;
	}

	#header div.kerorofc-logo {
		padding-top: 10px;
		width: 20%;
		max-width: 208px;
	}
	
	#header div.kerorofc-logo a {
		display: block;
		background-image: url(../img/header_logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		padding-top: 42px;
		font-size: 0;
		line-height: 0;
	}
	
	#header ul.nav {
		display: flex;
/*
		align-items: center;
*/
		justify-content: space-between;
		width: 80%;
	}
	
	#header ul.nav li a,
	#header ul.nav li span.cs {
		display: inline-block;
		padding: 6px 0;
		width: 100%;
		text-align: center;
		font-weight: 700;
		font-size: 15px;
		line-height: 1.2;
		color: #fff;
		transform: rotate(0.05deg);
	}
	
	#header ul.nav li span.cs {
		color: #6fc46d;
	}
	
	#header ul.nav li.top { display: none; }
	#header ul.nav li.appdl-1 { margin: 0 0.9%; width: 19.1%; }
	#header ul.nav li.service { margin: 0 0.9%; width: 13.3%; }
	#header ul.nav li.news { margin: 0 0.9%; width: 6%; }
	#header ul.nav li.store { margin: 0 0.9%; width: 25.5%; }
	#header ul.nav li.twitter { display: none; }
	#header ul.nav li.qa { display: none; }
	#header ul.nav li.lang { display: none; }
	#header ul.nav li.appstore { margin: 0 0.4%; width: 17.6%; max-width: 140px; }
	#header ul.nav li.googleplay { margin: 0 0 0 0.4%; width: 17.6%; max-width: 140px; }
	
	#header ul.nav li.appdl-1,
	#header ul.nav li.service,
	#header ul.nav li.news,
	#header ul.nav li.store { 
		padding-top: 20px;
	}
	
	#header ul.nav li.appstore a,
	#header ul.nav li.googleplay a {
		background-color: #fff;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		padding: 0;
		font-size: 0;
		line-height: 0;
	}
	
	#header ul.nav li.appstore a img,
	#header ul.nav li.googleplay a img {
		opacity: 1;
		-webkit-transition: opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
	}
	
	#header ul.nav li.appstore a:hover img,
	#header ul.nav li.googleplay a:hover img {
		opacity: 0.7;
	}
	
	
	.main {
		position: relative;
		width: 100%;
		padding-top: 5px;
		background-image: url(../img/bg_star_g_pc.png);
		background-size: 377px;
		background-repeat: repeat;
		background-position: 0 -95px;
	}
	
	#slider {
		position: relative;
		margin: 0 auto;
		overflow: hidden;
		width: 100%;
		height: 416px;
	}
	
	#slider .slider-inner {
		position: relative;
		margin: 0 auto;
		width: 640px;
		height: auto;
		overflow: visible;
	}
	
	#slider ul.slider-track {
		position: relative;
		top: 0;
		left: -262.5%;
		right: -262.5%;
		bottom: 0;
		display: block;
		margin: auto;
		width: 4000px;
		height: 360px;
	}
	
	.slick-list {
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
	}
	
	.slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.slick-slide {
		float: left;
		height: 100%;
		min-height: 1px;
		background-color: #fff;
		font-size: 0;
		line-height: 0;
	}
	
	.slick-slide a:focus {
		outline: 0;
	}
	
	.slick-slide a {
		display: block;
		font-size: 0;
		line-height: 0;
		transition: opacity 0.5s ease;
	}
	
	.slick-slide a:hover {
		opacity: .7;
	}
	
	#slider ul.slider-track li {
		margin: 0 10px;
	}
	
	#slider ul.slider-track li:focus {
		outline: 0;
	}
	
	#slider ul.slider-track img {
		width: 100%;
		height: auto;
	}
	
	#slider button:focus {
		outline: 0;
	}
	
	#slider ul.slider-dots {
		margin: 0 auto;
		padding-top: 15px;
		width: 1080px;
		height: 50px;
		text-align: center;
	}
	
	#slider ul.slider-dots li {
		display: inline-block;
		margin: 0 10px;
		width: 10px;
		height: 10px;
	}
	
	#slider ul.slider-dots li button {
		border: 0;
		background-color: transparent;
		padding: 0;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
	}
	
	#slider ul.slider-dots li button:before {
		position: relative;
		top: 0;
		left: 0;
		content: '';
		display: block;
		margin: 15px 0;
		background-color: #ccc;
		width: 10px;
		height: 10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	#slider ul.slider-dots li.slick-active button:before {
		background-color: #000;
	}
	
	div.content {
		width: 100%;
	}
	
	div.appdl-1 {
		background-image: url(../img/bg_star_w_b_pc.png);
		background-size: 377px;
		background-repeat: repeat;
	}
	
	div.service {
		background-image: url(../img/bg_star_g_pc.png);
		background-size: 377px;
		background-repeat: repeat;
	}
	
	div.appdl-2,
	div.footer {
		background-image: url(../img/bg_star_w_b_pc.png);
		background-size: 377px;
		background-repeat: repeat;
	}
	
	div.news {
		background-image: url(../img/bg_star_g_pc.png);
		background-size: 377px;
		background-repeat: repeat;
	}
	
	div.content-inner {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0 50px;
		width: 100%;
		max-width: 1170px;
	}
	
	div.now-dl {
		width: 549px;
		text-align: center;
	}
	
	div.now-dl h2 {
		margin: 0 auto;
		width: 423px;
	}
	
	div.now-dl h2 img {
		width: 100%;
	}
	
	div.now-dl p.txt-1 {
		margin-top: 6px;
		font-weight: 900;
		font-size: 34px;
		line-height: 1.3;
	}
	
	div.now-dl p.txt-2 {
		margin-top: 10px;
		font-weight: 500;
		transform: rotate(0.05deg);
		font-size: 18px;
		line-height: 1.3;
	}
	
	div.now-dl p.txt-3 {
		font-weight: 400;
		transform: rotate(0.05deg);
		font-size: 14px;
		line-height: 1.3;
		
	}
	
	div.now-dl ul.dl-icn {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}
	
	div.now-dl ul.dl-icn li {
		margin-left: 10px;
		width: 203px;
		font-size: 0;
		line-height: 0;
	}
	
	div.now-dl ul.dl-icn li:first-of-type {
		margin-left: 0;
	}
	
	div.now-dl ul.dl-icn li a {
		display: block;
		background-repeat: no-repeat;
		padding: 58px 0 0 0;
		font-size: 0;
		line-height: 0;
		opacity: 1;
		-webkit-transition: opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
	}
	
	div.now-dl ul.dl-icn li a:hover {
		opacity: 0.7;
	}
	
	div.now-dl ul.dl-icn li.appstore a {
		background-image: url(../img/appstore_icn.png);
		background-size: 100%;
	}
	
	div.now-dl ul.dl-icn li.googleplay a {
		background-image: url(../img/googleplay_icn.png);
		background-size: 100%;
	}
	
	div.price {
		position: relative;
		background-color: #f8d94a;
		background-image: url(../img/dl_price.png);
		background-size: 241px;
		background-repeat: no-repeat;
		background-position: 18px 13px;
		-webkit-border-radius: 13px;
		-moz-border-radius: 13px;
		border-radius: 13px;
		width: 530px;
		height: 90px;
	}
	
	div.price div.month {
		position: absolute;
		top: 55px;
		left: 20px;
	}
	
	div.price div.year {
		position: absolute;
		top: 55px;
		left: 150px;
	}
	
	div.price div.month,
	div.price div.year {
		font-weight: 500;
		transform: rotate(0.05deg);
		font-size: 18px;
		line-height: 1.4;
	}
	
	div.price div.month span.tax,
	div.price div.year span.tax {
		font-size: 12px;
	}
	
	div.price div.det {
		position: absolute;
		top: 20px;
		left: 270px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		transform: rotate(0.05deg);
		font-size: 16px;
		line-height: 1.2;
	}
	
	div.price div.det span {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #000;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		width: 64px;
		height: 45px;
	}
	
	div.price div.det span:nth-of-type(1) {
		margin-right: 0.2em;
	}
	
	div.price div.det span:nth-of-type(2) {
		margin-left: 0.2em;
	}
	
	div.price div.good {
		position: absolute;
		top: -20px;
		left: 433px;
		background-image: url(../img/dl_price_good.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 113px;
		height: 108px;
		font-size: 0;
		line-height: 0;
	}
	
	div.appdl-1 div.content-inner {
		position: relative;
	}
	
	div.appdl-1 div.content-inner div.pic {
		max-width: 970px;
		width: 100%;
	}
	
	div.service div.content-inner {
		padding-bottom: 23px;
	}
	
	div.service h2 {
		padding: 36px 0 23px 0;
		font-weight: 700;
		font-size: 30px;
		line-height: 1.2;
		color: #fff;
	}
	
	div.service div.service-det {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		box-sizing: border-box;
		margin: 0 auto 32px auto;
		border: 10px solid #f8d94a;
		-webkit-border-radius: 48px;
		-moz-border-radius: 48px;
		border-radius: 48px;
		background-color: #fff;
		padding: 20px 25px 20px 25px;
		width: 100%;
		max-width: 970px;
		min-height: 215px;
		text-align: left;
	}
	
	div.service div.service-det-01 { min-height: 225px; }
	div.service div.service-det-02 { min-height: 230px; }
	div.service div.service-det-03 { min-height: 230px; }
	div.service div.service-det-04 { min-height: 215px; }
	div.service div.service-det-05 { min-height: 215px; }
	
	div.service div.service-det div.img {
		position: absolute;
	}
	
	div.service div.service-det-01 div.img { top: 18px; right: 30px; width: 310px; }
	div.service div.service-det-02 div.img { top: 12px; right: 52px; width: 272px; }
	div.service div.service-det-03 div.img { top: 10px; right: 41px; width: 264px; }
	div.service div.service-det-04 div.img { top: 7px; right: 53px; width: 298px; }
	div.service div.service-det-05 div.img { top: 10px; right: 48px; width: 275px; }
	
	div.service div.service-det-stream div.img {
		top: 6px;
		left: 12px;
		width: 298px;
	}
	
	div.service div.service-det div.img img {
		width: 100%;
	}
	
	div.service div.service-det dl {
		box-sizing: border-box;
		width: 100%;
		padding: 0 300px 0 0;
	}
	
	div.service div.service-det dl dt {
		margin: -38px 0 0 0;
		box-sizing: border-box;
		background-repeat: no-repeat;
		padding: 45px 0 0 112px;
		width: 100%;
		min-height: 91px;
		font-weight: 900;
		font-size: 24px;
		line-height: 1.2;
	}
	
	div.service div.service-det-03 dl dt,
	div.service div.service-det-05 dl dt {
		padding-top: 35px;
	}
	
	div.service div.service-det-01 dl dt { background-image: url(../img/service02_num01_icn.png); background-size: 108px; }
	div.service div.service-det-02 dl dt { background-image: url(../img/service02_num02_icn.png); background-size: 108px; }
	div.service div.service-det-03 dl dt { background-image: url(../img/service02_num03_icn.png); background-size: 108px; }
	div.service div.service-det-04 dl dt { background-image: url(../img/service02_num04_icn.png); background-size: 108px; }
	div.service div.service-det-05 dl dt { background-image: url(../img/service02_num05_icn.png); background-size: 108px; }
	
	div.service div.service-det dl dd.txt {
		margin-top: 15px;
		padding-left: 25px;
		max-width: 560px;
		font-weight: 500;
		transform: rotate(0.05deg);
		font-size: 18px;
		line-height: 1.4;
	}
	
	div.service div.service-det-04 dl dd.txt {
		margin-top: 25px;
	}
	
	div.service div.service-det dl dd.txt span.notice {
		display: inline-block;
		margin-top: 0.5em;
		font-weight: 400;
		font-size: 12px;
		transform: rotate(0.05deg);
	}
	
	div.appdl-2 div.content-inner {
		padding: 44px 0 60px 0;
	}
	
	div.appdl-2 div.now-dl {
		margin: 0 auto;
	}
	
	div.appdl-2 div.price {
		margin: 24px auto 0 auto;
	}
	
	div.news div.content-inner {
		padding: 0 0 50px 0;
		width: 100%;
		max-width: 970px;
	}
	
	div.news h2 {
		padding: 36px 0 23px 0;
		font-weight: 700;
		font-size: 30px;
		line-height: 1.2;
		color: #fff;
	}
	
	div.news h2 img.news-h-icn {
		display: inline-block;
		position: relative;
		top: 12px; left: 0;
		margin-right: 10px;
		width: 53px;
	}
	
	div.news h2 span.by {
		display: inline-block;
		margin-left: 1em;
		font-weight: 400;
		font-size: 15px;
		transform: rotate(0.05deg);
	}
	
	div.news #topics {
		font-family: "Noto Sans JP", "Noto Sans KR", "Yu Gothic Medium","SF Pro KR", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
	}
	
	div.news #topics .title-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #e6f3e6;
		padding: 30px 35px;
		text-align: left;
	}
	
	div.news #topics .title-area .title {
		width: 82%;
		font-weight: 700;
		font-size: 18px;
		line-height: 1.2;
	}
	
	div.news #topics .title-area .time {
		width: 15%;
		text-align: right;
		font-weight: 500;
		font-size: 15px;
	}
	
	div.news #topics .detail-area {
		background: #fff;
		text-align: left;
	}
	
	div.news #topics .detail-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 30px;
		overflow: hidden;
	}
	
	div.news #topics .detail-area .image {
		display: block;
		margin: 0 0 15px 0;
		max-width: 180px;
		width: 20%;
		font-size: 0; line-height: 0;
	}
	
	div.news #topics .detail-area .sentence {
		max-width: 750px;
		width: 77%;
		font-weight: 500;
		font-size: 18px;
		line-height: 1.6;
	}
	
	div.news #topics .detail-area .sentence a.topic {
		display: inline-block;
		margin-left: 1em;
	}
	
	.topic-detail {
		text-align: left;
		max-width: 970px;
		margin: 100px auto;
		padding: 0;
		position: relative;
		border-radius: 0;
		background: #fff;
		font-family: "Noto Sans JP", "Noto Sans KR", "Yu Gothic Medium","SF Pro KR", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
	}
	
	.topic-detail .title-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #e6f3e6;
		padding: 20px 30px;
		text-align: left;
	}
	
	.topic-detail .title-area .title {
		width: 80%;
		font-weight: 700;
		font-size: 18px;
		line-height: 1.2;
	}
	
	.topic-detail .title-area .time {
		width: 18%;
		text-align: right;
		font-weight: 500;
		font-size: 15px;
	}
	
	.topic-detail .detail-area {
		padding: 60px 0;
	}
	
	.topic-detail .detail-area .image{
		margin: 0 auto 60px auto;
		text-align: center;
	}
	.topic-detail .detail-area .image img{
		width: 66%;
		max-width: 640px;
	}
	.topic-detail .detail-area .sentence{
		width: 66%;
		max-width: 640px;
		margin: 0 auto;
		font-weight: 500;
		font-size: 18px;
		line-height: 1.6;
	}
	.topic-detail .close{
		position: absolute;
		top: -45px;
		right: 0;
		width: 29px;
	}

	div.footer div.content-inner {
		position: relative;
		padding-top: 25px;
		padding-bottom: 25px;
		width: 100%;
	}
	
	div.footer div.bnr {
		margin: 10px auto 0 auto;
		width: 529px;
	}
	
	div.footer div.bnr-store a img {
		width: 100%;
	}
	
	div.footer ul.sns {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 50px auto 75px auto;
		width: 80%;
		max-width: 600px;
	}
	
	div.footer ul.sns li {
		margin: 0 65px 20px 0;
	}
	
	div.footer ul.sns li:last-of-type {
		margin-right: 0;
	}
	
	div.footer ul.sns li a {
		display: block;
		padding-left: 60px;
		background: url(../img/sns_x.png) no-repeat;
		background-size: 50px;
		min-height: 50px;
		text-align: left;
		font-weight: 700;
		font-size: 18px;
		transform: rotate(0.05deg);
		line-height: 1.2;
		color: #000;
		-webkit-transition: opacity .4s ease-in-out;
		transition: opacity .4s ease-in-out;
	}
	
	div.footer ul.sns li a span {
		display: block;
		font-weight: 500;
	}
	
	div.footer ul.sns li a:hover {
		opacity: 0.6;
	}
	
	div.footer ul.link {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 40px;
	}
	
	div.footer ul.link li {
		border-left: 2px solid #32b753;
		padding: 2px 2em;
		font-weight: 700;
		transform: rotate(0.05deg);
		font-size: 14px;
		line-height: 1;
		text-align: center;
	}
	
	div.footer ul.link li:first-of-type {
		border-left: 0;
	}
	
	div.footer div.jasrac div.icn {
		margin: 0 auto 10px auto;
		width: 55px;
	}
	
	div.footer div.jasrac div.icn img {
		width: 100%;
	}
	
	div.footer div.jasrac div.txt {
		font-weight: 300;
		transform: rotate(0.05deg);
		font-size: 12px;
		line-height: 1.8;
	}
	
	div.footer div.copyright {
		margin-top: 35px;
		font-weight: 300;
		transform: rotate(0.05deg);
		font-size: 12px;
		line-height: 1.8;
	}
	
	#gotop {
		position: fixed;
		right: 50px;
		bottom: -200px;
		font-size: 0;
		line-height: 0;
		width: 87px;
		height: 83px;
	}
	
	#gotop a::before {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 25px;
		height: 25px;
		margin: auto;
		color: #fff;
		content: '';
	}

	#gotop a img {
		transition: .5s ;
		transform: rotateX( 0deg ) ;
	}
	
	#gotop a:hover img {
		transform: rotateX( 360deg ) ;
		opacity: 1;
	}
	
}

@media (min-width: 768px) and (max-width: 1185px) {
}

@media (min-width: 768px) and (max-width: 1000px) {
	div.pp div.pp-content div.b-2 {
		background-size: 40%;
	}
	
	div.pp div.pp-content dl.outline:nth-of-type(1),
	div.pp div.pp-content dl.outline:nth-of-type(2) li:nth-of-type(1) {
		width: 50%;
	}
	
}

@media only screen and (max-width:767px) {
	body {
		font-size: 3vw;
		line-height: 1;
		-webkit-text-size-adjust: 100%;
	}
	
	a {
		color: #32b753;
		text-decoration: none;
	}
	
	a:link {
		color: #32b753;
	}

	a:visited {
		color: #32b753;
	}

	a.anchor,
	a.anchor-pp {
		display: block;
		padding-top: 14.7vw;
		margin-top: -14.7vw;
	}
	
	img {
		width: 100%;
	}
	
	.pc {
		display: none;
	}
	
	div.wrapper {
		margin: 0 auto;
		width: 100%;
	}
	
	#header {
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../img/bg_star_g_sp.png);
		background-size: 66.76vw;
		background-repeat: repeat;
		width: 100%;
		z-index: 10;
	}
	
	#header div.header-sp-out {
		height: 14.9vw;
	}

	#header div.header-sp-out div.kerorofc-logo {
		margin: 0 0 0 2.8vw;
		padding-top: 3.6vw;
		width: 40.2vw;
	}
	
	#header div.kerorofc-logo a {
		display: block;
		background-image: url(../img/header_logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		padding-top: 8vw;
		font-size: 0;
		line-height: 0;
	}
	
	#header > ul.lang-btn {
		display: none;
	}
	
	#header div.header-sp-out ul.lang-btn {
		position: absolute;
		top: 5.5vw;
		left: 48vw;
	}
	
	#header div.header-sp-out ul.lang-btn li a {
		display: block;
		background-color: #427d41;
		-webkit-border-radius: 1.2vw;
		-moz-border-radius: 1.2vw;
		border-radius: 1.2vw;
		padding: 0.5em 0.8em;
		font-family: "Noto Sans KR","SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
		font-weight: 400;
		font-size: 2.6vw;
		line-height: 1;
		color: #fff;
		transition: background-color 0.5s ease;
	}
	
	#header #nav-icn {
		position: absolute;
		top: 5.5vw;
		right: 6vw;
		font-size: 0;
		width: 5.3vw;
		height: 4vw;
		z-index: 10;
	}
	
	#header #nav-icn .nav-icn-top,
	#header #nav-icn .nav-icn-mdl,
	#header #nav-icn .nav-icn-btm {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	
	#header #nav-icn .nav-icn-top span,
	#header #nav-icn .nav-icn-mdl span,
	#header #nav-icn .nav-icn-btm span {
		position: absolute;
		left: 0;
		background: #fff;
		width: 100%;
		height: 0.53vw;
		height: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#header #nav-icn .nav-icn-top span {
		top: 0;
	}
	
	#header #nav-icn .nav-icn-mdl span {
		top: 43%;
	}
	
	#header #nav-icn .nav-icn-btm span {
		top: 86%;
	}
	
	.nav-icn-top-on {
		transform-origin: left top;
		transform: rotate(45deg);
		transition : all .4s ease;
		top: 0 !important;
		left: 0.4vw !important;
	}
	
	.nav-icn-top-off {
		transform-origin: left top;
		transform: rotate(0);
		transition : all .4s ease;
	}
	
	.nav-icn-mdl-on {
		opacity: 0;
		transition : all .4s ease;
	}
	
	.nav-icn-mdl-off {
		opacity: 1;
		transition : all .4s ease;
	}
	
	.nav-icn-btm-on {
		transform-origin: right bottom;
		transform: rotate(135deg);
		transition : all .4s ease;
		top: -0.2vw !important;
		right: 100% !important;
	}
	
	.nav-icn-btm-off {
		transform-origin: right bottom;
		transform: rotate(0);
		transition : all .4s ease;
	}
	
	#header div.header-sp-in-o {
		overflow-y: scroll;
	}
	
	#header div.header-sp-in-c {
		overflow-y: hidden;
	}
	
	#header div.header-sp-in {
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		background-image: url(../img/bg_star_g_sp.png);
		background-size: 66.76vw;
		background-repeat: repeat;
		width: 100vw;
		height: 0;
		/* display: none; */
	}
	
	#header div.header-sp-in div.kerorofc-logo {
		margin: 0 auto;
		padding-top: 22.6vw;
		width: 58.7vw;
	}
	
	#header div.header-sp-in div.kerorofc-logo a {
		background-image: url(../img/header_logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		padding-top: 11.8vw;
		font-size: 0;
		line-height: 0;
	}
	
	#header div.header-sp-in ul.nav {
		margin-top: 12vw;
	}
	
	#header div.header-sp-in ul.nav li.lang {
		margin-top: 12vw;
	}
	
	#header div.header-sp-in ul.nav li a,
	#header div.header-sp-in ul.nav li span.cs {
		display: block;
		padding: 3.5vw 0;
		width: 100%;
		font-size: 5vw;
		font-weight: 700;
		line-height: 1.2;
		color: #fff;
	}
	
	#header div.header-sp-in ul.nav li.lang a {
		font-family: "Noto Sans KR","SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
		font-weight: 700;
	}
	
	#header div.header-sp-in ul.nav li span.cs {
		color: #6fc46d;
	}
	
	#header ul.nav li.appstore { display: none; }
	#header ul.nav li.googleplay { display: none; }
	
	.main {
		position: relative;
		padding-top: 14.9vw;
		background-image: url(../img/bg_star_g_sp.png);
		background-size: 66.76vw;
		background-position: 0 -14.9vw;
		background-repeat: repeat;
	}
	
	#slider {
		position: relative;
		margin: 0 auto;
		overflow: hidden;
		width: 94.5vw;
		height: 62.2vw;
	}
	
	#slider .slider-inner {
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: auto;
		overflow: visible;
	}
	
	#slider ul.slider-track {
		position: relative;
		width: 100%;
		height: 52vw;
		display: block;
	}
	
	.slick-list {
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
	}
	
	.slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.slick-slide {
		float: left;
		height: 100%;
		min-height: 1px;
	}
	
	.slick-slide a:focus {
		outline: 0;
	}
	
	.slick-slide img {
		display: block;
	}
	
	#slider ul.slider-track li {
		margin: 0 1vw;
		width: 100%;
	}
	
	#slider ul.slider-track li:focus {
		outline: 0;
	}
	
	#slider ul.slider-track img {
		width: 100%;
		height: auto;
		
	}
	
	#slider button:focus {
		outline: 0;
	}
	
	#slider ul.slider-dots {
		margin: 0 auto;
		padding-top: 3vw;
		width: 94.5vw;
		height: 12vw;
		text-align: center;
	}
	
	#slider ul.slider-dots li {
		display: inline-block;
		margin: 0 0.9vw;
		width: 1.8vw;
		height: 1.8vw;
	}
	
	#slider ul.slider-dots li button {
		border: 0;
		background-color: transparent;
		padding: 0;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
	}
	
	#slider ul.slider-dots li button:before {
		position: relative;
		top: 0;
		left: 0;
		content: '';
		display: block;
		margin: 2vw 0;
		background-color: #ccc;
		width: 1.8vw;
		height: 1.8vw;
		-webkit-border-radius: 0.9vw;
		-moz-border-radius: 0.9vw;
		border-radius: 0.9vw;
	}
	
	#slider ul.slider-dots li.slick-active button:before {
		background-color: #000;
	}
	
	div.content {
		width: 100%;
	}
	
	div.appdl-1 {
		background-image: url(../img/bg_star_w_b_sp.png);
		background-size: 67vw;
		background-repeat: repeat;
	}
	
	div.service {
		background-image: url(../img/bg_star_g_sp.png);
		background-size: 67vw;
		background-repeat: repeat;
	}
	
	div.appdl-2,
	div.footer {
		background-image: url(../img/bg_star_w_b_sp.png);
		background-size: 67vw;
		background-repeat: repeat;
	}
	
	div.news {
		background-image: url(../img/bg_star_g_sp.png);
		background-size: 67vw;
		background-repeat: repeat;
	}
	
	div.content-inner {
		box-sizing: border-box;
		margin: 0 auto;
		width: 90.7vw;
	}
	
	div.now-dl {
		width: 100%;
		text-align: center;
	}
	
	div.now-dl h2 {
		margin: 0 auto;
		width: 69.4vw;
	}
	
	div.now-dl h2 img {
		width: 100%;
	}
	
	div.now-dl p.txt-1 {
		margin-top: 2.8vw;
		font-weight: 900;
		font-size: 7vw;
		line-height: 1.3;
	}
	
	div.now-dl p.txt-2 {
		margin-top: 1vw;
		font-weight: 700;
		font-size: 3.8vw;
		line-height: 1.3;
	}
	
	div.now-dl p.txt-3 {
		font-weight: 500;
		font-size: 2.6vw;
		line-height: 1.3;
		
	}
	
	div.now-dl ul.dl-icn {
		display: flex;
		justify-content: center;
		margin-top: 2.8vw;
	}
	
	div.now-dl ul.dl-icn li {
		margin-left: 2.1vw;
		width: 42.3vw;
		font-size: 0;
		line-height: 0;
	}
	
	div.now-dl ul.dl-icn li:first-of-type {
		margin-left: 0;
	}
	
	div.now-dl ul.dl-icn li a {
		display: block;
		background-repeat: no-repeat;
		padding: 12.1vw 0 0 0;
		font-size: 0;
		line-height: 0;
	}
	
	div.now-dl ul.dl-icn li.appstore a {
		background-image: url(../img/appstore_icn.png);
		background-size: 100%;
	}
	
	div.now-dl ul.dl-icn li.googleplay a {
		background-image: url(../img/googleplay_icn.png);
		background-size: 100%;
	}
	
	div.price {
		position: relative;
		background-color: #f8d94a;
		background-image: url(../img/dl_price.png);
		background-size: 41.2vw;
		background-repeat: no-repeat;
		background-position: 4vw 2.3vw;
		-webkit-border-radius: 3vw;
		-moz-border-radius: 3vw;
		border-radius: 3vw;
		width: 100%;
		height: 15.6vw;
	}
	
	div.price div.month {
		position: absolute;
		top: 9.4vw;
		left: 4vw;
	}
	
	div.price div.year {
		position: absolute;
		top: 9.4vw;
		left: 27vw;
	}
	
	div.price div.month,
	div.price div.year {
		font-weight: 500;
		font-size: 3vw;
		line-height: 1.4;
	}
	
	div.price div.month span.tax,
	div.price div.year span.tax {
		font-size: 2.2vw;
	}
	
	div.price div.det {
		position: absolute;
		top: 4.2vw;
		left: 47vw;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 2.8vw;
		line-height: 1.1;
	}
	
	div.price div.det span {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #000;
		-webkit-border-radius: 1.7vw;
		-moz-border-radius: 1.7vw;
		border-radius: 1.7vw;
		width: 10.7vw;
		height: 7.6vw;
	}
	
	div.price div.det span:nth-of-type(1) {
		margin-right: 0.2em;
	}
	
	div.price div.det span:nth-of-type(2) {
		margin-left: 0.2em;
	}
	
	div.price div.good {
		position: absolute;
		top: -4.2vw;
		left: 74.9vw;
		background-image: url(../img/dl_price_good.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 19.3vw;
		height: 18.5vw;
		font-size: 0;
		line-height: 0;
	}
	
	div.appdl-1 div.content-inner {
		position: relative;
	}
	
	div.appdl-1 div.content-inner div.pic {
		width: 100%;
	}
	
	div.service div.content-inner {
		padding-bottom: 23px;
	}
	
	div.service div.content-inner {
		padding-bottom: 4.5vw;
	}
	
	div.service h2 {
		padding: 4.5vw 0 3.6vw 0;
		font-weight: 700;
		font-size: 5vw;
		line-height: 1.2;
		color: #fff;
	}
	
	div.service div.service-det {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin: 0 auto 5.7vw auto;
		border: 1.8vw solid #f8d94a;
		-webkit-border-radius: 8.7vw;
		-moz-border-radius: 8.7vw;
		border-radius: 8.7vw;
		background-color: #fff;
		padding: 2vw 1vw 3vw 1vw;
		width: 100%;
		text-align: left;
	}
	
	div.service div.service-det div.img {
		padding-top: 5vw;
	}
	
	div.service div.service-det-01 div.img { padding-bottom: 1.7vw; width: 68vw; }
	div.service div.service-det-02 div.img { padding-bottom: 1.3vw; width: 50.2vw; }
	div.service div.service-det-03 div.img { padding-bottom: 1.4vw; width: 50.9vw; }
	div.service div.service-det-04 div.img { padding-bottom: 0.4vw; width: 58.5vw; }
	div.service div.service-det-05 div.img { padding-bottom: 1.9vw; width: 55vw; }
	
	div.service div.service-det div.img img {
		width: 100%;
	}
	
	div.service div.service-det dl {
		width: 100%;
	}
	
	div.service div.service-det dl dt {
		margin: 0;
		box-sizing: border-box;
		background-repeat: no-repeat;
		padding: 6vw 0 0 22vw;
		width: 100%;
		min-height: 16.1vw;
		font-weight: 900;
		font-size: 5vw;
		line-height: 1.2;
	}
	
	div.service div.service-det-01 dl dt,
	div.service div.service-det-03 dl dt,
	div.service div.service-det-04 dl dt,
	div.service div.service-det-05 dl dt {
		padding-top: 3vw;
	}
	
	div.service div.service-det-01 dl dt { background-image: url(../img/service02_num01_icn.png); background-size: 19.1vw; }
	div.service div.service-det-02 dl dt { background-image: url(../img/service02_num02_icn.png); background-size: 19.1vw; }
	div.service div.service-det-03 dl dt { background-image: url(../img/service02_num03_icn.png); background-size: 19.1vw; }
	div.service div.service-det-04 dl dt { background-image: url(../img/service02_num04_icn.png); background-size: 19.1vw; }
	div.service div.service-det-05 dl dt { background-image: url(../img/service02_num05_icn.png); background-size: 19.1vw; }
	
	div.service div.service-det dl dd.txt {
		margin: 3vw 0 0 0;
		box-sizing: border-box;
		padding: 0 3.8vw;
		width: 100%;
		font-weight: 500;
		font-size: 4.2vw;
		line-height: 1.4;
	}
	
	div.service div.service-det dl dd.txt span.notice {
		display: inline-block;
		margin-top: 0.5em;
		padding-left: 1em;
		text-indent: -1em;
		font-weight: 400;
		font-size: 3.2vw;
	}
	
	div.appdl-2 div.content-inner {
		padding: 8.6vw 0 11.2vw 0;
	}
	
	div.appdl-2 div.now-dl {
		margin: 0 auto;
	}
	
	div.appdl-2 div.price {
		margin: 4.9vw auto 0 auto;
	}
	
	div.news div.content-inner {
		padding: 0 0 8.9vw 0;
		width: 93.7vw;
	}
	
	div.news h2 {
		padding: 4.5vw 0 3.6vw 0;
		font-weight: 700;
		font-size: 5vw;
		line-height: 1.2;
		color: #fff;
	}
	
	div.news h2 img.news-h-icn {
		display: inline-block;
		position: relative;
		top: 2vw; left: 0;
		margin-right: 2vw;
		width: 9.3vw;
	}
	
	div.news h2 span.by {
		display: inline-block;
		margin-top: 0.8em;
		font-weight: 400;
		font-size: 3.2vw;
	}
	
	div.news #topics {
		font-family: "Noto Sans JP", "Noto Sans KR", "Yu Gothic Medium","SF Pro KR", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
	}
	
	div.news #topics .title-area {
		display: flex;
		flex-direction: column;
		background: #e6f3e6;
		padding: 4.3vw 5.3vw;
		text-align: left;
	}
	
	div.news #topics .title-area .title {
		width: 100%;
		font-weight: 700;
		font-size: 4.3vw;
		line-height: 1.2;
	}
	
	div.news #topics .title-area .time {
		margin-top: 3vw;
		width: 100%;
		text-align: left;
		font-weight: 500;
		font-size: 3.2vw;
	}
	
	div.news #topics .detail-area {
		display: flex;
		flex-direction: column;
		padding: 4.4vw 8.9vw 5vw 8.9vw;
		background: #fff;
		text-align: left;
		overflow: hidden;
	}
	
	div.news #topics .detail-area .image {
		display: block;
		margin: 0 auto 5.3vw auto;
		width: 56.4vw;
		font-size: 0; line-height: 0;
	}
	
	div.news #topics .detail-area .sentence {
		width: 100%;
		font-weight: 500;
		font-size: 3.9vw;
		line-height: 1.6;
	}
	
	div.news #topics .detail-area .sentence a.topic {
		display: inline-block;
		margin-left: 1em;
	}
	
	.topic-detail {
		text-align: left;
		width: 93.7vw;
		margin: 14.6vw auto 12.4vw auto;
		padding: 0;
		position: relative;
		border-radius: 0;
		background: #fff;
		font-family: "Noto Sans JP", "Noto Sans KR", "Yu Gothic Medium","SF Pro KR", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
	}
	
	.topic-detail .title-area {
		display: flex;
		flex-direction: column;
		background: #e6f3e6;
		padding: 4vw 5.3vw;
		text-align: left;
	}
	
	.topic-detail .title-area .title {
		width: 100%;
		font-weight: 700;
		font-size: 4.3vw;
		line-height: 1.2;
	}
	
	.topic-detail .title-area .time {
		margin-top: 3vw;
		width: 100%;
		text-align: left;
		font-weight: 500;
		font-size: 3.2vw;
	}
	
	.topic-detail .detail-area {
		padding: 8.9vw 0 11.6vw 0;
	}
	
	.topic-detail .detail-area .image{
		margin: 0 auto 8vw auto;
		text-align: center;
	}
	.topic-detail .detail-area .image img{
		width: 85.3vw;
	}
	.topic-detail .detail-area .sentence{
		width: 85.3vw;
		margin: 0 auto;
		font-weight: 500;
		font-size: 4.3vw;
		line-height: 1.6;
	}
	.topic-detail .close{
		position: absolute;
		top: -8.4vw;
		right: 0;
		width: 6.2vw;
	}

	div.footer div.content-inner {
		position: relative;
		padding-top: 9.8vw;
		padding-bottom: 20vw;
	}
	
	div.footer div.bnr {
		margin: 0 auto;
		width: 73vw;
	}
	
	div.footer div.bnr-store a img {
		width: 100%;
	}
	
	div.footer ul.sns {
		display: flex;
		flex-direction: column;
		margin: 8.4vw auto 12.8vw auto;
		width: 80%;
	}
	
	div.footer ul.sns li {
		margin-top: 6.7vw;
	}
	
	div.footer ul.sns li:first-of-type {
		margin-top: 0;
	}
	
	div.footer ul.sns li a {
		display: block;
		padding-left: 14vw;
		background: url(../img/sns_x.png) no-repeat;
		background-size: 10.7vw;
		min-height: 10.7vw;
		text-align: left;
		font-weight: 700;
		font-size: 4.3vw;
		line-height: 1.2;
		color: #000;
	}
	
	div.footer ul.sns li a span {
		display: block;
		font-weight: 500;
	}
	
	div.footer ul.link {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 5vw;
	}
	
	div.footer ul.link li {
		margin-bottom: 3vw;
		border-left: 2px solid #32b753;
		padding: 0.2em 0.8em;
		font-weight: 700;
		font-size: 3.2vw;
		line-height: 1;
		text-align: center;
	}
	
	div.footer ul.link li:nth-of-type(1),
	div.footer ul.link li:nth-of-type(4) {
		border-left: 0;
	}
	
	div.footer div.jasrac div.icn {
		margin: 0 auto 2.7vw auto;
		width: 12.4vw;
	}
	
	div.footer div.jasrac div.icn img {
		width: 100%;
	}
	
	div.footer div.jasrac div.txt {
		font-weight: 300;
		font-size: 2.8vw;
		line-height: 1.8;
	}
	
	div.footer div.copyright {
		margin-top: 8vw;
		margin-bottom: 6.2vw;
		font-weight: 300;
		font-size: 2.8vw;
		line-height: 1.8;
	}
	
	#gotop {
		position: fixed;
		right: 4.4vw;
		bottom: -200px;
		font-size: 0;
		line-height: 0;
		width: 19.6vw;
		height: 18.8vw;
	}
	
	#gotop a::before {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 25px;
		height: 25px;
		margin: auto;
		color: #fff;
		content: '';
	}

}