@charset "UTF-8";

/* ***********************************************************************
	バリアフリー
*********************************************************************** */
#barrierfree h3 { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
#barrierfree .districttown { font-size: 0; }
#barrierfree .districttown li { float: left; font-size: 12px; display: block; text-align: center; border: 1px solid; height: 38px; line-height: 38px; background-color: #fff; width: 111px; margin-right: 8px; margin-bottom: 30px; cursor: pointer; }
#barrierfree .districttown li:last-child { margin-right: 0; }
#barrierfree .districttown li:hover { background-color: #000; color: #fff; border: 1px solid #000; }
#barrierfree .barrierfreemap p { font-size: 14px; margin: 20px 0 25px; }
#barrierfree #mapcanvas { float: left; width: 50%; height: 280px; margin-bottom: 25px; }
#barrierfree .barrierfreemap #tab2, #barrierfree .barrierfreemap #tab3, #barrierfree .barrierfreemap #tab4, #barrierfree .barrierfreemap #tab5, #barrierfree .barrierfreemap #tab6, #barrierfree .barrierfreemap #tab7, #barrierfree .barrierfreemap #tab8 { display: none; }
#barrierfree .barrierfreeinfo { float: left; height: 260px; width: 440px; padding: 10px 20px; overflow: scroll; -webkit-overflow-scrolling: touch; margin-bottom: 25px; }
#barrierfree .barrierfreeinfo .individual { margin-bottom: 20px; }
#barrierfree .barrierfreeinfo .individual h2 { font-weight: bold; display: inline-block; margin: 0 10px 5px 0; }
#barrierfree .barrierfreeinfo .individual li:last-child { text-align: center; width: 120px; border: 1px solid; }
#barrierfree .barrierfreeinfo .individual li a { display: inline-block; width: 100%; background-color: #fff; }
#barrierfree .barrierfreeinfo .individual li a:hover { color: #fff; background-color: #000; }

/* ライトボックス */
.modal-overlay { z-index: 20; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.80); }
.modalview { position: absolute; z-index: 21; width: 960px; top: 30px; background-color: transparent; border: none; }
.modal-close { position: absolute; z-index: 22; width: 960px; height: 30px; }
.modal-close a { float: right; }
.modalview > div { position: relative; }
.modalview .innerhtml { position: absolute; width: 960px; background-color: #fff; top: 30px; overflow: scroll; }
.modalwrapper { margin: 30px; width: 900px; }
.modalwrapper .shopname { font-size: 18px; }
.modalwrapper table { font-size: 12px; margin-bottom: 10px; }
.modalwrapper .shopinfo, .modalwrapper .sketchphoto, .modalwrapper .movie { float: left; width: 510px; }
.modalwrapper .facility, .modalwrapper .sketchlist { float: right; width: 360px; }
.modalwrapper th { width: 80px; }
.modalwrapper .shopinfo { margin-bottom: 30px; }
.modalwrapper .movie { margin-top: 60px; }
.modalwrapper .sketchphoto img { width: 100%; height: auto; }
.modalwrapper .facility { margin-bottom: 40px; }
.modalwrapper .sketchlist p { font-size: 12px; margin: 0; }
.modalwrapper .sketchlist li { list-style: none; float: left; width: 120px; height: 120px; }
.modalwrapper .sketchlist img { width: 120px; height: 120px; }
.modalwrapper .movie iframe { width: 416px; height: 234px; }
@media screen and (max-width:640px) {
	#barrierfree #page_title { margin-bottom: 5px; }
	#barrierfree h3 { font-size: 32px; margin-bottom: 10px; }
	#barrierfree .districttown { margin-bottom: 20px; }
	#barrierfree .districttown li { font-size: 22px; height: 48px; line-height: 48px; width: 134px; margin-right: 10px; margin-bottom: 10px; }
	#barrierfree .districttown li:nth-child(4) { margin-right: 0; }
	#barrierfree .barrierfreemap p { font-size: 28px; margin: 30px 0; }
	#barrierfree #mapcanvas { float: none; width: 100%; }
	#barrierfree .barrierfreeinfo { float: none; height: 300px; width: 100%; margin-top: 15px; padding: 0; }
	#barrierfree .barrierfreeinfo .individual h2 { font-weight: bold; }
	#barrierfree .barrierfreeinfo .individual li { margin-top: 10px; font-size: 24px; }
	#barrierfree .barrierfreeinfo .individual li:last-child { width: 130px; margin-top: 0; }
	#barrierfree .inner { margin: 0 32px; }

	/* ライトボックス */
	.modalview { width: 590px; top: 90px; }
	.modal-close { width: 590px; top: 30px; height: 60px; }
	.modal-close img { width: 60px; height: 60px; }
	.modalview .modalwrapper { position: relative; margin: 40px 25px; width: 540px; }
	.modalview > div { position: relative; }
	.modalview .innerhtml { width: 590px; top: 90px; }
	.modalwrapper { margin: 40px 25px; width: 590px; }
	.modalwrapper .shopname { font-size: 32px; margin-top: 25px; }
	.modalwrapper table { font-size: 24px; margin-bottom: 10px; }
	.modalwrapper .shopinfo, .modalwrapper .facility, .modalwrapper .sketchphoto, .modalwrapper .sketchlist, .modalwrapper .movie { float: none; width: 100%; }
	.modalwrapper .shopinfo { margin-bottom: 0; }
	.modalwrapper .facility, .modalwrapper .sketchphoto, .modalwrapper .sketchlist { margin-bottom: 40px; }
	.modalwrapper .movie { margin: 0; }
	.modalwrapper th { width: 130px; }
	.modalwrapper .sketchlist p { font-size: 22px; }
	.modalwrapper .sketchlist li { width: 180px; height: 180px; }
	.modalwrapper .sketchlist img { width: 180px; height: 180px; }
	.modalwrapper .movie iframe { width: 540px; height: 303px; }
}

/* ***********************************************************************
G Free
*********************************************************************** */
#gfree { margin-bottom: 50px; }
#gfree h2 { font-size: 30px; font-weight: bold; margin: 30px 0 20px; }
#gfree h2 span { font-size: 14px; vertical-align: text-bottom; }
#gfree h3 { font-size: 16px; font-weight: bold; margin: 30px 0 15px; }
#gfree h3 span { font-size: 12px; vertical-align: baseline; }
#gfree h4 { font-size: 12px; font-weight: bold; margin: 35px 0 5px; }
#gfree hr { margin: 25px 0; }
#gfree > img, #gfree .glogo img { outline: solid 1px #000; }
#gfree .inner > div > a {text-decoration: underline;}
#gfree .explain { margin-bottom: 40px; }
#gfree .glogo { float: right; }
#gfree .text { width: 720px; float: left; }
#gfree .caption { font-size: 10px; text-align: right; margin-top: 5px; }
#gfree table { margin-bottom: 10px; }
#gfree th { width: 85px; }
#gfree .imgline { outline: solid 1px #000; }
#gfree .imgl { float: left; }
#gfree .imgr { float: right; }
#gfree .linkbox { position: relative; height: 180px; border: 1px solid #000; background-color: #FFF; margin-top: 5px; }
#gfree .linkbox > a > img { width: 390px; height: auto; float: left; }
#gfree .linkbox > div { float: left; padding: 50px 0 0 40px; }
#gfree .linkbox > div h5 { font-size: 28px; color: #A8C900; margin: 0; }
#gfree .linkbox > div p { font-size: 14px; margin-top: 5px; }
#gfree .linkbox .openmark { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px }
@media screen and (max-width:640px) {
	#gfree h2 { font-size: 60px; line-height: 55px; margin: 30px 0 0; }
	#gfree h2 span { font-size: 20px; vertical-align: bottom; }
	#gfree h3 { font-size: 32px; }
	#gfree h3 span { font-size: 22px; }
	#gfree h4 { font-size: 24px; }
	#gfree .inner { margin: 0 32px; }
	#gfree hr { display: none; }
	#gfree .glogo { float: none; margin: 15px 0; }
	#gfree .glogo img { display: block; margin: 0 auto; }
	#gfree .caption { font-size: 20px; text-align: left; margin-top: 5px; }
	#gfree th { width: 145px; }
	#gfree .text { width: 100%; float: none; }
	#gfree .imgl, #gfree .imgr { float: none; }
	#gfree .imgl:first-child { margin-bottom: 20px; }
	#gfree .imgl img, #gfree .imgr img { width: 100%; }
	#gfree .linkbox { height: auto; margin-top: 5px; }
	#gfree .linkbox > a > img { width: 100%; height: auto; float: none; }
	#gfree .linkbox > div { float: none; padding: 20px 32px }
	#gfree .linkbox > div h5 { font-size: 32px; }
	#gfree .linkbox > div p { font-size: 28px; margin-top: 0px; }
	#gfree .linkbox .openmark { width: 28px; height: 28px }
}

/* ***********************************************************************
観光案内所
*********************************************************************** */
#touristoffice { margin-bottom: 25px; line-height: 2em; }
#touristoffice .touristofficebox:first-child { margin-top: 0; }
#touristoffice .touristofficebox { margin-top: 60px; }
#touristoffice .touristofficebox .left { width: 460px; margin-right: 20px; }
#touristoffice .touristofficebox .right { width: 480px; }
#touristoffice .touristofficebox .print {margin-top: 25px;}
#touristoffice .touristofficebox .print p {display: inline-block; width: 50%; text-align: right; font-size: 10px; margin-top: 10px; line-height: 1.6;}
#touristoffice .touristofficebox img:nth-of-type(2) {margin-top: 25px;}
#touristoffice h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
#touristoffice h3 { font-size: 12px; font-weight: bold; margin-top: 40px; }
#touristoffice table { margin-top: 25px; }
#touristoffice table th { width: 100px; }
#touristoffice .notification { width: 338px; border: 1px solid #000; padding: 10px; margin-top: 40px; }
#gmap { margin-top: 40px; width: 480px; height: 252px; }
@media screen and (max-width:640px) {
	#touristoffice { margin: 25px 32px; }
	#touristoffice .touristofficebox { margin-top: 40px; }
	#touristoffice .touristofficebox .left, #touristoffice .touristofficebox .right { float: none; width: 100%; margin: 30px 0 0; }
	#touristoffice .touristofficebox .left img, #touristoffice .touristofficebox .right img { width: 100%; height: auto; }
	#touristoffice .touristofficebox .print {margin-top: 30px;}
	#touristoffice .touristofficebox .print p {font-size: 18px;}
	#touristoffice h2 { font-size: 32px; margin-bottom: 5px; }
	#touristoffice h3 { font-size: 24px; margin-top: 40px; }
	#touristoffice table { margin-top: 5px; }
	#touristoffice table th { width: 125px; }
	#touristoffice .notification { width: 554px; }
	#gmap { margin-top: 30px; width: 100%; height: 325px; }
}

/* ***********************************************************************
交通情報
*********************************************************************** */
#trafficinfo { margin-bottom: 25px; }
#trafficinfo h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
#trafficinfo p { font-size: 14px; }

/* 歩行者天国の時間 */
#trafficinfo .pedestrianmall > table { margin-top: 25px; }
#trafficinfo .pedestrianmall > table th { width: 70px; }

/* タクシー乗り場 */
#trafficinfo .taximap { margin-top: 50px; }
#trafficinfo .taximap > div { margin-top: 35px; }
#trafficinfo .taximap img { float: left; }
#trafficinfo .taximap table { float: right; width: 50%; }
#trafficinfo .taximap th { width: 30px; padding-left: 20px; }

/* 終電情報 */
#trafficinfo .lasttrain { margin-top: 50px; }
#trafficinfo .lasttrain div.tabbox { margin: 0px; padding: 0px; }
#trafficinfo .lasttrain .tabs td { cursor: pointer; width: 119px; padding: 3px 0; text-align: center; border: 1px solid; border-bottom: none; }
#trafficinfo .lasttrain .tabs .selected { background-color: #000; border: 1px solid #000; border-bottom: none; }
#trafficinfo .lasttrain div #tab { height: 150px; overflow: auto; clear: left; }
#trafficinfo .lasttrain .tabbox .tab td { width: 120px; font-size: 14px; }
#trafficinfo .lasttrain h4 { font-weight: bold; margin-top: 20px; font-size: 16px }

/* 地下鉄入り口 */
#trafficinfo .subway { margin-top: 50px; }
#trafficinfo #mapcanvas { float: left; width: 480px; height: 210px; }
#trafficinfo .subway .text { font-size: 14px; margin-bottom: 30px; }
#trafficinfo .subway div > img { float: left; }
#trafficinfo .subway table { float: right; width: 50%; line-height: 25px; }
#trafficinfo .subway th { width: 30px; padding-left: 20px; }
#trafficinfo .subway tr img { width: 16px; height: 16px; margin-right: 5px; }

/* 駅の電話番号 */
#trafficinfo .stationtell { margin-top: 50px; }
#trafficinfo .stationtell .text { font-size: 14px; }
#trafficinfo .stationtell h4 { font-weight: bold; margin-top: 20px; }

/* 駐車場情報 */
#trafficinfo .parking { margin-top: 50px; }
#trafficinfo .parking h3 { margin-top: 0; font-weight: bold; }
#trafficinfo .parking p { font-size: 10px; }
#trafficinfo .parking > a { text-decoration: underline; }

/* 銀座での自転車ルールに関して */
#trafficinfo .bicycle { position: relative; margin-top: 50px; }
#trafficinfo .bicycle .left { width: 700px; }
#trafficinfo .bicycle ol { margin-left: 20px; }
#trafficinfo .bicycle li { margin-bottom: 25px; }
#trafficinfo .bicycle table { margin-bottom: 20px; }
#trafficinfo .bicycle p { font-size: 12px; }
#trafficinfo .bicycle img { float: right; margin-right: 120px; }
@media screen and (max-width:640px) {
	#trafficinfo h2 { font-size: 32px; }

	/* 歩行者天国の時間 */
	#trafficinfo .pedestrianmall { margin: 25px 32px 0; }
	#trafficinfo .pedestrianmall > table th { width: 110px; }

	/* タクシー乗り場 */
	#trafficinfo .taximap { margin: 50px 32px 0; }
	#trafficinfo .taximap > div { margin-top: 10px; }
	#trafficinfo .taximap img { float: none; width: 100%; margin-bottom: 40px; }
	#trafficinfo .taximap table { float: none; width: 100%; font-size: 24px; }
	#trafficinfo .taximap th { width: 30px; padding-left: 20px; }

	/* 終電情報 */
	#trafficinfo .lasttrain h3 { margin: 0 15px 20px; }
	#trafficinfo .lasttrain { margin-top: 50px; }
	#trafficinfo .lasttrain .tabbox .tabs { margin: 0 32px; width: 576px; }
	#trafficinfo .lasttrain .tabs td { width: 25%; height: 40px; line-height: 40px; }
	#trafficinfo .lasttrain .tabbox .tab { margin: 0 32px; }
	#trafficinfo .lasttrain .tabbox .tab td { width: 210px; font-size: 24px; }
	#trafficinfo .lasttrain h4 { font-weight: bold; margin-top: 20px; font-size: 28px }

	/* 地下鉄入り口 */
	#trafficinfo .subway { margin: 30px 32px 0; }
	#trafficinfo #mapcanvas { float: none; width: 100%; }
	#trafficinfo .subway .text { font-size: 24px; margin-bottom: 30px; }
	#trafficinfo .subway div > img { float: none; }
	#trafficinfo .subway table { float: none; width: 100%; }
	#trafficinfo .subway th { width: 20px; padding-left: 0px; }
	#trafficinfo .subway tr { float: left; width: 50%; font-size: 24px; line-height: 50px; }
	#trafficinfo .subway tr img { width: 30px; height: 30px; margin: 10px 5px 10px 0; }

	/* 駅の電話番号 */
	#trafficinfo .stationtell { margin: 30px 32px 0; }
	#trafficinfo .stationtell .text { font-size: 24px; }
	#trafficinfo .stationtell h4 { font-weight: bold; margin-top: 10px; font-size: 24px; }
	#trafficinfo .stationtell a { font-size: 24px; }

	/* 駐車場情報 */
	#trafficinfo .parking { margin: 30px 32px 0; }
	#trafficinfo .parking h3 { margin-top: 0; font-weight: bold; font-size: 24px; }
	#trafficinfo .parking p { font-size: 20px; }
	#trafficinfo .parking > a { font-size: 20px; text-decoration: underline; }

	/* 銀座での自転車ルールに関して */
	#trafficinfo .bicycle { margin: 30px 32px 0; }
	#trafficinfo .bicycle .left { width: 100%; }
	#trafficinfo .bicycle li { margin: 0 0 32px 25px; }
	#trafficinfo .bicycle table { margin-bottom: 20px; }
	#trafficinfo .bicycle p { font-size: 20px; }
	#trafficinfo .bicycle img { display: none; }
}

/* ***********************************************************************
喫煙所
*********************************************************************** */
#smokingarea .smokingarea__intro { margin-bottom: 30px; }
#smokingarea .smokingarea__map { margin-bottom: 30px; }
#smokingarea .smokingarea__mapimg { float: left;border: 1px solid #000; }
#smokingarea .smokingarea__mapimg img { width: 478px; }
#smokingarea .smokingarea__maplink {
	float: right;
	display: block;
	outline: 1px solid #000;
	width: 450px;
	background: #fff url(../gif/pdf_link-2.gif) no-repeat 420px center;
	background-size: 17px 17px;
	padding: 9px 45px 9px 0;
	box-sizing: border-box;
}
#smokingarea .smokingarea__maplink p { margin: 0 0 0 15px; }
@media screen and (max-width:640px) {
	#smokingarea { margin: 25px 32px; }
	#smokingarea .smokingarea__mapimg { float: none; margin-bottom: 30px; }
	#smokingarea .smokingarea__mapimg img { width: 100%; }
	#smokingarea .smokingarea__maplink {
		float:none;
		width: 100%;
		background-position: 527px center;
		background-size: 34px;
	}
}