@charset "utf-8";

/*@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/

@import url(sp_artist_profile.css);

.pc_only {
	display: none;
}

body {
	margin: 0;
	padding: 0;
}

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


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

#contents {
	width: 100%;
	margin: 0 auto 27% auto;
	/*padding: 20px 82px 130px 82px;*/
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif;
	color: #000;
	background: url(../img/top_border.png) center top no-repeat;
	font-weight: 400;
}


#contents h1,#contents h2,#contents h3,#contents p {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

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


#contents h1 {
	width: 76.27%;
	padding-top: 7.6%;
	margin: 0 auto;
}

	#contents h1 img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}


#main {
  width: 100%;
  margin: 0;
}


/*** about ***/
#main #about {
	width: 100%;
    padding-bottom: 56%;
    background: url(../img/about_sp.png) left top no-repeat;
    background-size: 100% auto;
	position: relative;
}

	#main #about h2 {
		position: absolute;
		width: 100%;
		top: 21.0%;
		font-size: 34px;
		font-weight: 700;
		text-align: center;
		line-height: 140%;
	}

	#main #about p {
		position: absolute;
		width: 100%;
		top: 50.4%;
		font-size: 28px;
		font-weight: 400;
		line-height: 135%;
		text-align: center;
		letter-spacing: -0.5px;
	}



/*** vending_machine ***/
#main #vending_machine {
	margin-top: 2.7%;
	width: 100%;
}

	#main #vending_machine ul {
		width: 80%;
		margin: 0 auto;
		overflow: hidden;
	}
	
	
	#main #vending_machine ul li {
		width: 43.8%;
	}	
	
		#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: 15.2%;
	}
	
		#main #vending_machine ul li p.vending_machine_img img {
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}		
	
	#main #vending_machine ul li p.vending_machine_name {
		width: 91.6%;
		padding: 7.6% 0;
		border-radius: 40px;
		text-align: center;
		font-size: 32px;
		font-weight: 500;					
	}

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

		#main #vending_machine ul li p#machine_seibu {
			color: #dd9900;
			background-color: #fceecc;
		}
	
	
	#main #vending_machine #vending_machine_info {
		width: 89.3%;
		margin: 0 auto;
		margin-top: 6.6%;
		text-align: center;
	}
	
		#main #vending_machine #vending_machine_info #info1 {
			font-size: 32px;
			line-height: 150%;
			font-weight: 400;	
			padding-bottom: 7.3%;
			letter-spacing: -0.1px;
		}
		
		#main #vending_machine #vending_machine_info #info2 {
			font-size: 28px;
			line-height: 150%;	
			color: #555;
			padding: 5.2% 0;
			border: 1px solid #c8c8c8;
			letter-spacing: -0.1px;
		}

			
/*** station_list ***/
#main #station_list {
	width: 100%;
	margin-top: 8%;
}
		
	#main #station_list_head {
		width: 100%;
		padding-top: 7.5%;
		background-color: #eeeeee;
	}

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

	#main #station_list_head ul#tab {
		margin: 7.5% auto 0 auto;
		width: 89.4%;
		overflow: hidden;
	}

		#main #station_list_head ul#tab li {
			width: 47%;
			padding-top: 5.3%;
		}

			#main #station_list_head ul#tab li.inactive {
				background: url(../img/shadow_sp.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: 58%;
				margin: 0 auto;
				text-align: center;
				padding-bottom: 20.9%;
				font-size: 32px;
				font-weight: 700;
				line-height: 120%;
			}

			/* tab active*/
			#main #station_list_head ul#tab li.active h3 {
				color: #000;
			}
				
			#main #station_list_head ul#tab li .tab_border {
				width: 58%;
				height: 8px;
				margin: 0 auto;
			}
				
			#main #station_list_head ul#tab li.active#tab_keio h3 {
				background: url(../img/arrow_on_keio.png) top 80% center no-repeat;
				background-size: 16.1% 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 80% center no-repeat;
				background-size: 16.1% 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 80% center no-repeat;
				background-size: 16.1% auto;
			}		
			
				#main #station_list_head ul#tab li.inactive .tab_border:after {
   				    height: 0;
				}			


@media screen and (max-width: 600px) {
	#main #station_list_head ul#tab li .tab_border,
    #main #station_list_head ul#tab li.active#tab_keio #keio_tab_border:after,
	#main #station_list_head ul#tab li.active#tab_seibu #seibu_tab_border:after {height: 7px;}
}
@media screen and (max-width: 500px) {
	#main #station_list_head ul#tab li .tab_border,
    #main #station_list_head ul#tab li.active#tab_keio #keio_tab_border:after,
	#main #station_list_head ul#tab li.active#tab_seibu #seibu_tab_border:after {height: 6px;}
}
@media screen and (max-width: 450px) {
	#main #station_list_head ul#tab li .tab_border,
    #main #station_list_head ul#tab li.active#tab_keio #keio_tab_border:after,
	#main #station_list_head ul#tab li.active#tab_seibu #seibu_tab_border:after {height: 5px;}
}
@media screen and (max-width: 400px) {
	#main #station_list_head ul#tab li .tab_border,
    #main #station_list_head ul#tab li.active#tab_keio #keio_tab_border:after,
	#main #station_list_head ul#tab li.active#tab_seibu #seibu_tab_border:after {height: 4px;}
}					



/*
				#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 #seibu_tab_border:after {
    				background-color: #eeaa00;
   					border-radius: 4px;
   					content: "";
    				display: block;
   				   height: 8px;
					}
*/































					
			/* 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: 89.4%;
		margin: 6.26% auto 0 auto;
		overflow: hidden;
	}

		#main #station_list ul.list li {
			width: 47%;
			float: left;
			margin: 0 6% 6.7% 0;
			text-align: center;
			position: relative;
		}

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

        #main #station_list ul.list li p.wallpaper img {
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}
		
        #main #station_list ul.list li p.station_name {
			width: 90%;
			margin: 9.5% auto 0 auto;
			font-size: 32px;
			font-weight: 500;
			line-height: 120%;		
		}

        #main #station_list ul.list li p.station_name span.station_name_small {
			font-size: 29px;
			font-weight: 400;	
		}
		
        #main #station_list ul.list li p.small_title {
			width: 36%;
			margin: 9.5% auto 0 auto;
			font-size: 26px;
			color: #555;
			padding: 3.8% 9.5%;
			background-color: #eee;
			border-radius: 50px;			
		}
		
        #main #station_list ul.list li p.setting_date {
			width: 96%;
			margin: 9.5% auto 0 auto;
			font-size: 26px;
			color: #000;
			line-height: 130%;
		}	











html { font-size: 29px; }
@media screen and (max-width: 700px) { html { font-size: 27px; } }
@media screen and (max-width: 650px) { html { font-size: 26px; } }
@media screen and (max-width: 625px) { html { font-size: 25px; } }
@media screen and (max-width: 610px) { html { font-size: 24px; } }
@media screen and (max-width: 575px) { html { font-size: 23px; } }
@media screen and (max-width: 560px) { html { font-size: 22px; } }
@media screen and (max-width: 535px) { html { font-size: 21px; } }
@media screen and (max-width: 510px) { html { font-size: 20px; } }
@media screen and (max-width: 480px) { html { font-size: 19px; } }
@media screen and (max-width: 460px) { html { font-size: 18px; } }
@media screen and (max-width: 430px) { html { font-size: 17px; } }
@media screen and (max-width: 410px) { html { font-size: 16px; } }
@media screen and (max-width: 390px) { html { font-size: 15px; } }
@media screen and (max-width: 370px) { html { font-size: 14px; } }
@media screen and (max-width: 350px) { html { font-size: 13px; } }
@media screen and (max-width: 340px) { html { font-size: 12px; } }

	#main #about h2 {font-size: 1.17rem;} /*34px*/
	#main #about p {font-size: 0.96rem;} /*28px*/
	#main #vending_machine ul li p.vending_machine_name {font-size: 1.1rem;} /*32px*/
	#main #vending_machine #vending_machine_info #info1 {font-size: 1.03rem;} /*32px→30px*/	
	#main #vending_machine #vending_machine_info #info2 {font-size: 0.89rem;} /*28px→26px*/
	#main #station_list_head h2 {font-size: 1.24rem;} /*36px*/
	#main #station_list_head ul#tab li h3 {font-size: 1.1rem;} /*32px*/
    #main #station_list ul.list li p.station_name {font-size: 1.1rem;} /*32px*/	
    #main #station_list ul.list li p.station_name span.station_name_small {font-size: 0.82rem;} /*24px*/	
    #main #station_list ul.list li p.small_title {font-size: 0.896rem;} /*26px*/	
    #main #station_list ul.list li p.setting_date {font-size: 0.896rem;} /*26px*/


#contents #profile h3 {font-size: 1.1rem;} /*32px*/
#contents #profile #name {font-size: 1.1rem;} /*32px*/
#contents #profile #biography {font-size: 0.96rem;} /*28px*/
#contents #profile #awards {font-size: 0.82rem;} /*24px*/
#contents #profile span.small {font-size: 50%;}

#contents #profile {
    padding: 6.4% 5%;
}