/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
 COMMON                   
 
                                                                                     
 * -------------------------------------------------------------------------------------*/  

/*======================================
	1-1.Universal selector
=======================================*/

* {
	margin: 0; 
	padding: 0;
	line-height: 1.0;
	color: #333;
	font-weight: normal;
	font-style: normal;
	font-family: Lato, "游ゴシック", YuGothic, "Yu Gothic", "Custom Yu Gothic", sans-serif;
}

::selection {
 	background: #ddd1e7; 
	color: #000; 
	}
::-moz-selection {
	background: #ddd1e7; 
	color: #000;
	}

/*======================================
	1-2.Structure Module
=======================================*/
html {
  width:100%; 
    }

body {
    width:100%; 
  	min-width: 1000px;

	background: #ddd1e7  url(../images/bg_index.gif) center top no-repeat;
	
}

section {
	padding: 0;
	margin: 0;
		
}

/*======================================
	1-3.Text Module
=======================================*/

p,
address {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 0;
}


/*======================================
	1-4. Hypertext Module
=======================================*/

a {
	outline: none;
}

a:link {
	color: #f00;
	text-decoration: none;
}



a:hover {
	color: #f00;
	text-decoration: underline;
}


/*======================================
	1-5. List Module
=======================================*/

ul {
	list-style-type: none;
}

li {
	list-style-type: none;
}

ol {
	list-style-type: none;
}

dt {
	color: #222;
	
}



/*======================================
	1-6. Forms Module
=======================================*/

form {
	margin: 0;
	padding: 0;
}

fieldset {
	padding: 0;
	border: 1px solid #CDCDCD;
}

legend {
	margin-left: 1em;
	padding: 5px 10px;
	font-size: 108%;
	color:#797979;
	font-weight:bolder;
}

label {
	font-size: 108%;
	margin-left: 2px;
	margin-right: 16px;
}
	
/*======================================
	1-10. Image Module
=======================================*/

img {
	border: none;
	vertical-align: top;
}
	
p img {
	border: none;
	vertical-align: top;
}




/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
INDEX                 
 
                                                                                     
 * -------------------------------------------------------------------------------------*/                                                                                   
    
#wrapper {
	margin: 0 auto;
    position: relative;
}
	
	#fixedMenu {
		position: fixed;
		top:0;
		bottom:0;
		right:15px;
		display: table;
		z-index: 20;
	}
	
			#fixedMenu li a {
				display: block;
				margin-bottom: 10px;
				height:30px;
				width:30px;
				background: transparent url(../images/w-btn.png)  5px 5px  no-repeat;	
			}
			
			#fixedMenu li.active a {
				display: block;
				margin-bottom: 10px;
				height:30px;
				width:30px;
				background: transparent url(../images/b-btn.png)  0px 0px no-repeat;	
			}
			



header {
	margin: 0 auto;
	padding-bottom: 40px;
	width:1000px;
}

#headerInner {
	padding-top: 142px;
}	

	#logo {
		margin: 0 auto;
		margin-top: 6px;
		margin-bottom: 44px;
		width: 100%;
		text-align: center;
		
	}
	
	#illust813 {
		margin: 0 auto;
		margin-bottom: 24px;
		width: 100%;
		text-align: center;

	}
	
	#leadBox {
		margin: 0 auto;
		margin-bottom: 24px;
		width: 100%;
		text-align: center;
	
	}
	
		#leadBox dt {
			margin-bottom: 7px;
		}	
	
	
	
	
	
	#navigation {
			display: table;
			table-layout: fixed;
			width: 90%;
			margin:0 auto;
	}
	
		#navigation dl {
			display: table-cell;
			height:200px;
			text-align: center;	
			position: relative;
		}
		
	
		
		#navigation dt {
			margin-bottom: 7px;
			height: 161px;
			
			text-align: center;	
			position: absolute;
			top:0;
			left:0;
			right:0;
		}	
		
		#navigation dt img  {
			display:inline-block;
		}
			#nav-musicshare dt img {
				padding-top: 20px;	
				width: 250px;
			}
			#nav-happybirthday dt img {
				padding-top: 20px;
				width: 250px;
			}
			#nav-luckynumber dt img {
				padding-top: 20px;
				width: 250px;
			}
		
		#navigation dd {
			text-align: center;	
			position: absolute;
			top:170px;
			left:0;
			right:0;
			display:none;
		}



/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
MUSIC SHARE                 
 
                                                                                     
 * -------------------------------------------------------------------------------------*/     

.sec-musicshare {
	background:  #7be5fd url(../images/lineBg.png) center -700px no-repeat;	
}

.contents.musicshare {
	padding: 60px 0;
	background: transparent url(../images/bg-top.png) left top repeat-x;	
	
}

.contents-inner {
	margin: 0 auto;
	width: 1000px;	
}

.contents.musicshare .titleBox {
	margin-bottom: 10px;
		position: relative;
		height: 320px;
}

.musicshare .title {
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	text-align: center;
	z-index: 10;
}


.musicshare .onair {
	position: absolute;
	left: 0;
	right: 0;
	top: 230px;
	text-align: center;
	z-index: 12;
}

.musicshare .cloud_A {
	position: absolute;
	left: 610px;
	top: 58px;
	z-index: 11;
}

.musicshare .cloud_D {
	position: absolute;
	left: 290px;
	top: 193px;
	z-index: 9;
}

.musicshare .cloud_C {
	position: absolute;
	left: 117px;
	top: 156px;
	z-index: 8;
}


#L-musicshare {
	margin-bottom: 40px;
}

	#L-musicshare dt {
		font-size: 1.6em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius:3px;
		line-height: 1.2;
	}
	
	#L-musicshare dd {
		font-size: 1.4em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #231815;
	}

#R-musicshare {
	margin-bottom: 40px;
	float:right;
	width: 406px;
}

#btn-musicshare {
	clear: both;
	margin: 0 auto;
	text-align: center;	
}

	#btn-musicshare dt {
		margin-bottom: 20px;	
	}



/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
HAPPY BIRTHDAY J-me                 
 
                                                                                     
 * -------------------------------------------------------------------------------------*/     


.sec-happybirthday {
	background:  #fe7a6d url(../images/lineBg.png) center -700px no-repeat;	
}

.contents.happybirthday {
	padding: 80px 0;
	background: transparent url(../images/bg-musicshare.png) left top repeat-x;	
	
}


.contents.happybirthday .titleBox {
	margin-bottom: 20px;
		position: relative;
		height: 300px;
}

.happybirthday .title {
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	text-align: center;
	z-index: 10;
}


.happybirthday .onair {
	position: absolute;
	left: 0;
	right: 0;
	top: 290px;
	text-align: center;
	z-index: 12;
}

.happybirthday .cloud_D {
	position: absolute;
	left: 170px;
	top: 120px;
	z-index: 11;
}

.happybirthday .cloud_C {
	position: absolute;
	left: 460px;
	top: 193px;
	z-index: 9;
}

.happybirthday .cloud_B {
	position: absolute;
	left: 580px;
	top: 30px;
	z-index: 8;
}


#L-happybirthday {
	margin-bottom: 40px;
	display:inline-block;
	width:408px;
	position: relative;
	vertical-align:top;
}

	#L-happybirthday img {
		border-radius:10px;
	}
	#L-happybirthday div {
		position: absolute;
		z-index:8;
		left: 130px;
		top: 308px;
	}
	
	
	#L-happybirthday ul {
		position: absolute;
		z-index:3;
		left: 16px;
		top: 16px;
	}
	
		#L-happybirthday li img{
		width: 376px;
		
		overflow:hidden;
	}
	
	#L-happybirthday p {
		position: absolute;
		z-index:5;	
		left: 16px;
		bottom: 8px;
		
		
	}
	


#R-happybirthday {
	padding: 0 20px;
	margin-bottom: 40px;
	display:inline-block;
	width: 540px;
}



	#R-happybirthday dt {
		font-size: 1.6em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius: 3px;
		line-height: 1.2;
	}
	
	#R-happybirthday dd {
		margin-bottom: 20px;
		font-size: 1.4em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #111;
	}

	#R-happybirthday p{
		color:#111;
		margin-bottom: 20px;
		line-height: 1.2;
	}


/*-MODAL *//*-------------------------------------------*/

#photos ul {
	
	
}

#photos li {
	
	padding: 1px 0;;
	overflow:hidden;
	display: inline-block;
	
	}
	
	#photos li a {
		display: block;	
		overflow: hidden;
		background: #fff;
		width:107px;
		height: 80px;

	}

		#photos li img {
			max-width: 100%;
			-moz-transition: -moz-transform 0.3s linear;
			-webkit-transition: -webkit-transform 0.3s linear;
			-o-transition: -o-transform 0.3s linear;
			-ms-transition: -ms-transform 0.3s linear;
			transition: transform 0.3s linear;
		}
		
		#photos li img:hover {
			-webkit-transform: scale(1.15);
			-moz-transform: scale(1.15);
			-o-transform: scale(1.15);
			-ms-transform: scale(1.15);
			transform: scale(1.15);
		}


/*---------------------------------------------------------------------*/


#present {
	clear: both;
	position: relative;
	width: 1000px;
	height: 300px;
	background: transparent  url(../images/present-bg.png) center top no-repeat;
	
}
	
	#present dt {
		position: absolute;
		z-index:3;
		right: 12px;
		bottom: 12px;
	}
	
	#present #pocari {
		position: absolute;
		z-index:3;
		left: 55px;
		top: 65px;
	}
	
	#present #inhabitant {
		position: absolute;
		z-index:3;
		left: 55px;
		top: 185px;
	}
	
	

/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
LUCKY NUMBER                 
 
                                                                                     
 * -------------------------------------------------------------------------------------*/     

.sec-luckynumber {
	background:  #fdde6c url(../images/lineBg.png) center -700px no-repeat;	
}

.contents.luckynumber {
	padding: 80px 0 50px 0;
	background: transparent url(../images/bg-happybirthday.png) left top repeat-x;	
	
}





.contents.luckynumber .titleBox {
	margin-bottom: 40px;
		position: relative;
		height: 300px;
}

.luckynumber .title {
	position: absolute;
	left: 0;
	right: 0;
	top: 15px;
	text-align: center;
	z-index: 10;
}


.luckynumber .onair {
	position: absolute;
	left: 0;
	right: 0;
	top: 320px;
	text-align: center;
	z-index: 12;
}

.luckynumber .cloud_A {
	position: absolute;
	left: 570px;
	top: 190px;
	z-index: 6;
}

.luckynumber .cloud_D {
	position: absolute;
	left: 230px;
	top: 250px;
	z-index: 5;
}

.luckynumber .cloud_C {
	position: absolute;
	left:180px;
	top: 60px;
	z-index: 9;
}

.luckynumber .cloud_B {
	position: absolute;
	left: 643px;
	top: 230px;
	z-index: 8;
}


#cnt-luckynumber {
	overflow: hidden;	
}

#L-luckynumber {
	margin-bottom: 40px;
}

	#L-luckynumber dt {
		font-size: 1.6em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius: 3px;
		line-height: 1.2;
	}
	
	#L-luckynumber dd {
		margin-bottom: 20px;
		font-size: 1.4em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #231815;
	}


	#R-happybirthday dt {
		font-size: 1.6em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius: 3px;
		line-height: 1.2;
	}
	
	#R-happybirthday dd {
		margin-bottom: 20px;
		font-size: 1.4em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #111;
	}







#R-luckynumber {
	margin-bottom: 40px;
	float:right;
	width: 408px;
}


.renew_service {
	width:70%;
	margin:60px auto;
	padding:30px;
	text-align:center;
}

.renew_service p{
	font-size:1.4em;
	color:#111;
	background-color:#fbf17f;
	padding:25px 40px;
	text-align:center;
	display: inline-block;
	border-radius:16px;
	font-weight:bold;
}



@media screen and (max-width: 769px) {
	article {
	    box-sizing: border-box;
	}
	
	body {
		min-width: auto;
		background-size: contain;
		background-size: 220% auto;
	}

	header {
	    margin: 0 auto;
	    padding-bottom: 60px;
	    width: 100%;
	}

	#logo {
	    margin: 6px auto 10px;
	    width: 100%;
	    text-align: center;
	}

	h2 img{
		width:100%;
	}

	section img{
		width:70%;
	}

	#logo img{
		width:60%;
	}

	#leadBox {
		margin-top:20px;
	}

	#leadBox img {
		width:80%;
	}

	#illust813{
		margin-bottom:0;
	}

	#headerInner {
	    padding-top: 80px;
	}

	#illust813 img{
		width:90%;
	}

	#cnt-musicshare,
	#cnt-happybirthday,
	#cnt-luckynumber {
		width:96%;
		margin:0 auto;
	}


	.contents.musicshare {
	    padding: 40px 0 0;
	}


	.sec-musicshare h2 img {
		width:50%;
	}

	.sec-musicshare dd img {
		width:90%;
	}

	.contents-inner {
	    margin: 0 auto;
	    width: 100%;
	}

	nav {
		width:100%;
	}

	#navigation {
		width:98%;
		margin:0 auto;
		text-align:center;
	}

	#navigation dt {
		height:auto;
	}

	#navigation dd {
		display:none;
	}

	#navigation dl {
		margin: 0 2px;
		width: calc(90% / 3) !important;
		height:auto;
		display: inline-block;
		vertical-align:top;
	}

	#navigation dl img{
		width:100%;
		padding:0;
	}

	.contents.musicshare .titleBox {
		height: 180px;
	}

	.contents.happybirthday {
		padding:80px 0 0;
	}

	.contents.happybirthday .titleBox,
	.contents.luckynumber .titleBox {
		height: 200px;
	}

	#nav-musicshare dt img {
		padding-top: 0;	
	}

	#L-happybirthday {
	    width: 100%;
			text-align:center;
	}

	#R-happybirthday {
	    width: 100%;
			padding:0;
	}


	#L-musicshare dt {
		font-size: 1.2em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius:3px;
		line-height: 1.2;
	}
	
	#L-musicshare dd {
		font-size: 1.0em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #231815;
	}

	#btn-musicshare {
		padding:0 0 30px 0;
	}

	#R-happybirthday dt {
		font-size: 1.2em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius: 3px;
		line-height: 1.2;
	}
	
	#R-happybirthday dd {
		margin-bottom: 20px;
		font-size: 1.0em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #111;
	}

	#L-luckynumber dt {
		font-size: 1.2em;
		background-color:#000;
		padding:10px;
		margin-bottom: 15px;
		color:#ffff00;
		font-weight:bold;
		border-radius: 3px;
		line-height: 1.2;
	}
	
	#L-luckynumber dd {
		margin-bottom: 20px;
		font-size: 1.0em;
		line-height:1.5;
		letter-spacing: 0.1em;
		color: #231815;
	}

	.renew_service {
		width:90%;
		margin:60px auto 100px;
		padding:10px;
		text-align:center;
	}

	.renew_service p{
		font-size:1.2em;
		color:#111;
		background-color:#fbf17f;
		padding:25px 40px;
		text-align:center;
		display: inline-block;
		border-radius:10px;
		font-weight:bold;
		line-height: 1.4;
	}

}



/*---------------------------------------------------------------------------------------                                                                                        
 * 
 
FOOTER                
 
                                                                                     
 * -------------------------------------------------------------------------------------*/     


footer {

	height: 143px;
	background: #61ff8c url(../images/footer-bg.png) center top no-repeat;	
}

#footer-inner {
	margin: 0 auto;
	width: 1000px;	
	overflow: hidden;
}

	#backtohome {
		padding-top: 20px;
		float: left;
		width: 	117px;
	}
	
	#footer-inner ul {
		padding-top: 104px;
		float: right;
		display: table;
	}
	
	#footer-inner ul li {
		padding-left: 8px;
		display: table-cell;
		vertical-align:middle;
	}