@charset "Shift_JIS";

/* Index
------------------------------------------*/

body{
	zoom:1;
}

@media all and (min-width:641px) { /* PC */

/* =================================================================

	Html

================================================================= */
html{
	overflow-y:scroll;
}
*:first-child+html body#top{
	position:relative;
}
.sp{
	display:none;
}
#wrapper{
	padding-top:0;
	position:relative;
}

/* =================================================================

	mainVisual

================================================================= */
#mainVisual{
	position: relative;
	background:#7eccf0;
	background-size: cover;
}
#mainVisual .hidePC{
	display:none;
}
#mainVisual h1{
	background:url(../images/top_img_main.jpg) center bottom no-repeat;
	height:560px;
}
#mainVisual p.ringo_bg{
	position: absolute;
	bottom: 0;
	background:url(../images/top_bg_ringo.png) center bottom repeat-x;
	width: 100%;
	height: 96px;
}
#mainVisual p.ringo_img{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	background:url(../images/top_img_ringo.png) center bottom no-repeat;
	width: 205px;
	height: 222px;
	margin: 0 auto;
}
#mainVisual p.balloon{
	font-size:85%;
	position:absolute;
	display:block;
	width:291px;
	top:279px;
	left:50%;
	margin-left:-442px;
	padding:15px 5px;
	z-index:3;
}
#mainVisual p.balloon span{
	color:#0000dc;
}
#mainVisual .text_img span{
	display:block;
	opacity:0;
	transition:opacity 1s linear, width 2s linear;
	overflow:hidden;
	position:absolute;
	top:3.48%;
	right: 60%;
	height:100%;
	width:0;
}
#mainVisual .text_img span img {
	position: absolute;
    right: 0;
}
#mainVisual .text_img.active span{
	opacity:1;
	width:40.79%;
}
#mainVisual .text_img img{
	min-width:398px;
}
/* =================================================================

	globalNavi

================================================================= */
div#globalNavi{
	position:relative;
}

/* =================================================================

	contents

================================================================= */

#contents{
	background:url(../images/top_bg_contents.jpg) center bottom no-repeat;
}

p.specialBnr.bnr01{
	width:916px;
	margin:0 auto 30px;
}
p.specialBnr.bnr02{
	width:916px;
	margin:0 auto 60px;
}
p.specialBnr.bnr03{
	width:916px;
	margin:0 auto 60px;
}
p.specialBnr a{
	display:block;
	width:916px;
	height:290px;
}
p.specialBnr span{
	display:none;
}
p.specialBnr.bnr01 a{
	background:url(../images/top_specialBnr04.jpg) no-repeat center top;
}
p.specialBnr.bnr01 a:hover{
	background:url(../images/top_specialBnr04_on.jpg) no-repeat center top;
}
p.specialBnr.bnr02 a{
	background:url(../images/top_specialBnr05.png) no-repeat center top;
}
p.specialBnr.bnr02 a:hover{
	background:url(../images/top_specialBnr05_on.png) no-repeat center top;
}

p.specialBnr.bnr03 a{
	background:url(../images/top_specialBnr03.jpg) no-repeat center top;
}
p.specialBnr.bnr03 a:hover{
	background:url(../images/top_specialBnr03_on.jpg) no-repeat center top;
}

/* =================================================================

	what's new

================================================================= */

div.top_newArea{
	position:relative;
	background:url(../images/top_bg_new03.gif) left bottom no-repeat;
	width:770px;
	margin:35px auto 65px;
	padding-bottom:5px;
}
div.top_newAreaInr{
	background:url(../images/top_bg_new01.gif) left top no-repeat;
	padding-top:5px;
}
div.top_newArea h2{
	position:absolute;
	width:101px;
	height:15px;
	padding:1em 0 0 35px;
}
div.top_newArea h2 span{
	background:url(../images/top_ttl_new.gif) left top no-repeat;
	display:block;
	width:101px;
	height:15px;
}

div.top_newArea dl{
	background:url(../images/top_bg_new02.gif) left top repeat-y;
	line-height:1.8em;
	padding-left:161px;
	padding-bottom:5px;
}
div.top_newArea dl.first{
	padding-top:10px;
	padding-bottom:0;
}
div.top_newArea dl dt{
	background:url(../images/top_ico_new.gif) left 0.7em no-repeat;
	width:10%;
	padding-left:13px;
	float:left;
	border-top:1px solid #d2eeff;
}
div.top_newArea dl dd{
	width:80%;
	float:left;
	border-top:1px solid #d2eeff;
}

div.top_newArea dl.first dt,
div.top_newArea dl.first dd{
	border-top:none;
}
div.top_newArea dl dd a{
	text-decoration:none;
}
div.top_newArea dl dd a:hover{
	color:#54c3eb;
}

/* =================================================================

	product

================================================================= */

ul#top_product{
	width:611px;
	margin:65px auto 60px;
}
ul#top_product li{
	float:left;
}
ul#top_product li a{
	display:block;
	width:100%;
	height:203px;
}
ul#top_product li span{
	display:none;
}
ul#top_product li.navi_01 a{
	background:url(../images/top_product_01.jpg) left bottom no-repeat;
	width:162px;
	margin-top:51px;
	margin-right:50px;
}
ul#top_product li.navi_02 a{
	background:url(../images/top_product_02.jpg) left bottom no-repeat;
	width:179px;
	margin-top:51px;
	margin-right:42px;
}
ul#top_product li.navi_03 a{
	background:url(../images/top_product_03.jpg) left bottom no-repeat;
	width:178px;
	height:297px;
}

ul#top_product li a:hover{
	background-position:right bottom;
}

/* =================================================================

	announcement

================================================================= */
.announcement {
	margin-top: 60px;
	padding: 0.5em 1.5em 1.5em;
	border: 2px solid #ff0066;
}
.announcement_text {
	margin-top: 1em;
	color: #ff0066;
}

/* =================================================================

	end

================================================================= */
}


/* =================================================================

	SP

================================================================= */

@media all and (max-width:640px) { /* SP */

/* =================================================================

	mainVisual

================================================================= */
#mainVisual{
	position:relative;
}
#mainVisual img,
.mainVisual_sp img{
	display:block;
	width:100%;
}
#mainVisual p.balloon{
	position:absolute;
	width:37%;
	bottom:0;
	left:11%;
}
#mainVisual p.balloon span.balloonInner{
	background:#d2f2ff;
	border-radius:5px;
	color:#0000dc;
	display:block;
	padding:5px;
	font-size:85%;
	text-align:left;
}
#mainVisual p.ringo_bg{
	position:absolute;
	width:100%;
	bottom:0;
}
#mainVisual p.ringo_img{
	position:absolute;
	width:31.25%;
	bottom:3.64%;
	right:12.65625%;
}
#mainVisual p.balloon span br{
	display:none;
}
#mainVisual .text_img span{
	display:block;
	opacity:0;
	transition:opacity 1s linear, width 2s linear;
	overflow:hidden;
	position:absolute;
	top:3.48%;
	right: 55%;
	height:70%;
	width:0;
}
#mainVisual .text_img span img {
	position: absolute;
  right: 0;
}
#mainVisual .text_img.active span{
	opacity:1;
	width:40.79%;
}
#mainVisual .text_img img{
	min-width:130px;
}

/* =================================================================

	contents

================================================================= */
#contents{
	background:url(../images/sp/top_bg_contents02.jpg) center bottom no-repeat;
	background-size:100%;
}
#contents .contentsInner img{
	height:auto;
}

p.specialBnr.bnr03{
	width:100%;
	margin:0 auto 7%;
}
p.specialBnr.bnr02{
	width:100%;
	margin:0 auto 7%;
}
p.specialBnr.bnr01{
	width:100%;
	margin:0 auto 45%;
}

/* =================================================================

	what's new

================================================================= */

div.top_newArea{
	width:94%;
	margin:5% 0 3%;
	padding:10px 2%;
	font-size:120%;
	border:6px solid #d2eeff;
	border-radius:5px;
	background-color:#fff;
}
div.top_newArea h2{
	margin-bottom:10px;
}
div.top_newArea dl{
	font-size:90%;
	padding:0 5%;
	line-height:1.8em;
}
div.top_newArea dl dt{
	background:url(../images/sp/top_ico_new.gif) left 0.6em no-repeat;
	padding-left:15px;
	width:15%;
	float:left;
	border-top:1px solid #d2eeff;
}
div.top_newArea dl dd{
	width:72%;
	padding-left:6%;
	float:left;
	border-top:1px solid #d2eeff;
}

div.top_newArea dl.first dt,
div.top_newArea dl.first dd{
	border-top:none;
}
div.top_newArea dl dd a{
	text-decoration:none;
}

/* =================================================================

	product

================================================================= */

ul#top_product{
	background:url(../images/sp/top_bg_contents01.png) center top no-repeat;
	background-size:100%;
	width:100%;
	margin:10% auto 0;
	padding-top:2%;
}
ul#top_product li{
	width:44%;
	display:block;
	margin:0 auto 30px;
}
ul#top_product li a{
	display:block;
}
ul#top_product li span{
	display:block;
}
ul#top_product li img{
	width:100%;
}

/* =================================================================

	announcement

================================================================= */
.announcement {
	margin-top: 5%;
	padding: 0 1em 1em;
	border: 2px solid #ff0066;
}
.announcement_text {
	margin-top: 1em;
	color: #ff0066;
}

/* =================================================================

	end

================================================================= */
}