@charset "utf-8";

/*
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
*/

#contents_wrap {
	width: 100%;
	margin: 0 auto;
	padding-top: 10px;
	background: url(../img/top_border_pc.png) center top repeat-x;
}

#contents {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 82px 130px 82px; 
	font-family: "メイリオ", sans-serif;
	/*font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif;*/
	color: #000;
	font-weight: normal;
}

#contents h1,#contents h2,#contents h3,#contents p {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 100%;
}

ul,li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.sp_only {
	display: none;
}




#contents h1 {
	width: 541px;
	height: 108px;
	margin: 0 auto;
	background: url(../img/title_pc.png) left top no-repeat;
	background-size: 100% auto;
}

#main {
  width: 1000px;
}


/*** about ***/
#main #about {
	width: 900px;
    height: 195px;
    margin: -17px auto 0 auto;
    background: url(../img/about_pc.png) left top no-repeat;
    background-size: 100% auto;
}

	#main #about h2 {
		font-size: 24px;
		font-weight: bold;
		padding-top: 73px;
		text-align: center;
		letter-spacing: -0.3px;
	}

	#main #about p {
		font-size: 16px;
		font-weight: normal;
		margin-top: 15px;
		text-align: center;
		line-height: 150%;
	}



/*** vending_machine ***/
#main #vending_machine {
	margin: 18px auto 0 auto;
	width: 1000px;
}

	#main #vending_machine ul {
		width: 625px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	
	#main #vending_machine ul li {
		width: 225px;
	}	
	
		#main #vending_machine ul li#vending_machine_keio {
			float: left;
		}	
	
		#main #vending_machine ul li#vending_machine_seibu {
			float: right;
		}	
	
	#main #vending_machine ul li p.vending_machine_img {
				margin- bottom: 17px;
	}
	
		#main #vending_machine ul li p.vending_machine_img img {
			width: 225px;
			height: auto;
			vertical-align: bottom;
		}		
	
	#main #vending_machine ul li p.vending_machine_name {
		width: 225px;
		height: 42px;
		margin-top: 15px;
		line-height: 42px;
		border-radius: 21px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;					
	}

		#main #vending_machine ul li p#machine_keio {
			color: #ee3377;
			background-color: #fdeaf1;
			font-size: 20px;
		}

		#main #vending_machine ul li p#machine_seibu {
			color: #dd9900;
			background-color: #fceecc;
		   font-size: 20px;
		}
	

	
	#main #vending_machine #vending_machine_info {
		margin-top: 40px;
		text-align: center;
	}
	
		#main #vending_machine #vending_machine_info #info1 {
			font-size: 18px;
			line-height: 150%;
			font-weight: bold;	
		}
		
		#main #vending_machine #vending_machine_info #info2 {
			margin-top: 30px;
			font-size: 14px;
			line-height: 150%;	
			color: #939393;
		}


			
/*** station_list ***/
#main #station_list {
	width: 1000px;
	margin: 40px auto 0 auto;
}
		
	#main #station_list_head {
		width: 1000px;
		margin: 0 auto;
		padding-top: 32px;
		background-color: #eeeeee;
	}

	#main #station_list_head h2 {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}

	#main #station_list_head ul#tab {
		margin: 32px auto 0 auto;
		width: 880px;
		overflow: hidden;
	}

		#main #station_list_head ul#tab li {
			width: 400px;
			padding-top: 28px;
		}

			#main #station_list_head ul#tab li.inactive {
				background: url(../img/shadow.png) left bottom repeat-x;
 				background-color: #fff;
			}

			#main #station_list_head ul#tab li.active {
				background: none;
				background-color: #fff;
			}
				
				#main #station_list_head ul#tab li#tab_keio {
					float: left;
				}
				
				#main #station_list_head ul#tab li#tab_seibu {
					float: right;
				}

			#main #station_list_head ul#tab li h3 {
				width: 210px;
				margin: 0 auto;
				padding-bottom: 50px;
				font-size: 22px;
				font-weight: bold;
			}


			/* tab active*/
			#main #station_list_head ul#tab li.active h3 {
				color: #000;
			}
				
			#main #station_list_head ul#tab li .tab_border {
				width: 210px;
				height: 8px;
				margin: 0 auto;
			}
				
			#main #station_list_head ul#tab li.active#tab_keio h3 {
				background: url(../img/arrow_on_keio.png) top 42px center no-repeat;
				background-size: 27px auto;
				color: #000;
			}
						
				#main #station_list_head ul#tab li.active#tab_keio #keio_tab_border:after {
    				background-color: #ee3377;
   					border-radius: 4px;
   					content: "";
    				display: block;
   				    height: 8px;
				}
						
			#main #station_list_head ul#tab li.active#tab_seibu h3 {
				background: url(../img/arrow_on_seibu.png) top 42px center no-repeat;
				background-size: 27px auto;
				color: #000;
			}
						
				#main #station_list_head ul#tab li.active#tab_seibu #seibu_tab_border:after {
    				background-color: #eeaa00;
   					border-radius: 4px;
   					content: "";
    				display: block;
   				   height: 8px;
					}


			/* tab inactive*/
			#main #station_list_head ul#tab li.inactive h3 {
				color: #0088ff;
				background: url(../img/arrow_off.png) top 42px center no-repeat;
				background-size: 27px auto;
			}		
			
				#main #station_list_head ul#tab li.inactive .tab_border:after {
   				    height: 0;
				}			
			
					

			/* tab inactive and hover*/
			#main #station_list_head ul#tab li.inactive:hover h3 {
				color: #000;
			}
				
				#main #station_list_head ul#tab li.inactive:hover .tab_border {
					width: 210px;
					height: 8px;
					margin: 0 auto;
				}
				
			#main #station_list_head ul#tab li.inactive#tab_keio:hover h3 {
				background: url(../img/arrow_on_keio.png) top 42px center no-repeat;
				background-size: 27px auto;
			}
						
				#main #station_list_head ul#tab li.inactive#tab_keio:hover #keio_tab_border:after {
    				background-color: #ed3277;
   					border-radius: 4px;
   					content: "";
    				display: block;
   				    height: 8px;
				}
						
			#main #station_list_head ul#tab li.inactive#tab_seibu:hover h3 {
				background: url(../img/arrow_on_seibu.png) top 42px center no-repeat;
				background-size: 27px auto;
			}
						
				#main #station_list_head ul#tab li.inactive#tab_seibu:hover #seibu_tab_border:after {
    				background-color: #eeaa00;
   					border-radius: 4px;
   					content: "";
    				display: block;
   				    height: 8px;
				}


	#main #station_list ul.list {
		display: none;
	}
	
	#main #station_list ul#station_0 {
		display: block;
	}		
		
		
	#main #station_list ul.list {
		width: 1000px;
		margin: 70px auto 0 auto;
		overflow: hidden;
	}

		#main #station_list ul.list li {
			width: 220px;
			float: left;
			margin: 0 40px 57px 0;
			text-align: center;
			position: relative;
		}

		#main #station_list ul.list li:nth-child(4n) {
			margin-right: 0;
		}

        #main #station_list ul.list li p.wallpaper img {
			width: 220px;
			height: auto;
			vertical-align: bottom;
		}
		
        #main #station_list ul.list li p.station_name {
			width: 90%;
			margin: 20px auto 0 auto;
			font-size: 18px;
			font-weight: bold;
			line-height: 120%;		
		}
	
        #main #station_list ul.list li p.station_name span.station_name_small {
			font-size: 13px;
			font-weight: normal;
			display: block;
		}

        #main #station_list ul.list li p.small_title {
			width: 100px;
			margin: 20px auto 0 auto;
			font-size: 15px;
			color: #555;
			padding: 8px 20px;
			background-color: #eee;
			border-radius: 50px;			
		}
		
        #main #station_list ul.list li p.setting_date {
			width: 100%;
			margin: 20px auto 0 auto;
			font-size: 14px;
			color: #000;		
		}	
	

/*** profile ***/
#contents #profile {
	width: 1000px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
	background-color:  #f4f4f4;
}

	#contents #profile h3 {
		font-size: 18px;
	}

		#contents #profile h3:before {
			content: "〈 ";
    	}

		#contents #profile h3:after {
			content: " 〉";　
    	}

	#contents #profile #name {
		margin-top: 17px;
		font-size: 18px;
		font-weight: bold;
	}

	#contents #profile #biography {
		width: 800px;
		margin: 30px auto 0 auto;
		padding-top: 30px;
		background: url(../img/border_profile_pc.png) center top no-repeat;
		font-size: 15px;
		line-height: 140%;
	}

	#contents #profile #awards {
		margin-top: 36px;
		font-size: 15px;
		color: #555;
		line-height: 140%;
	}

		#contents #profile span.small {
			font-size: 50%;
    		vertical-align: top;
    		position: relative;
    		top: -0.3em;
		}
		#contents #profile span.pc_special {
			display: inline-block;
			margin-left: 0.5em;
		}