@charset "utf-8";

/* --------------
 reset
-------------- */
input[type="submit"],label {
	cursor: pointer;
}

/* --------------
 base
-------------- */
.ifsp {display: none;}

/* --------------
 modules css
-------------- */
/* ---------- font size */
.fs16 { font-size:123.1%;}
.fs17 { font-size:131%;}
.fs18 { font-size:138.5%;}
.fs19 { font-size:146.5%;}
.fs20 { font-size:153.9%;}
.fs21 { font-size:161.6%;}
.fs22 { font-size:167%;}
.fs23 { font-size:174%;}
.fs24 { font-size:182%;}
.fs25 { font-size:192.3%;}
.fs26 { font-size:197%;}
.fs30 { font-size:227.3%;}

/* ---------- float */
.fll { float: left;}
.flr { float: right;}

/* ---------- width */
.wd5 {width: 5% !important;}
.wd10 {width: 10% !important;}
.wd15 {width: 15% !important;}
.wd20 {width: 20% !important;}
.wd25 {width: 25% !important;}
.wd30 {width: 30% !important;}
.wd35 {width: 35% !important;}
.wd40 {width: 40% !important;}
.wd45 {width: 45% !important;}
.wd49 {width: 49% !important;}
.wd50 {width: 50% !important;}
.wd55 {width: 55% !important;}
.wd60 {width: 60% !important;}
.wd65 {width: 65% !important;}
.wd70 {width: 70% !important;}
.wd75 {width: 75% !important;}
.wd80 {width: 80% !important;}
.wd85 {width: 85% !important;}
.wd90 {width: 90% !important;}
.wd95 {width: 95% !important;}
.wd100 {width: 100% !important;}

.wd100px {width: 100px;}
.wd300px {width: 300px;}
.wd500px {width: 500px;}

/* ---------- margin,padding */
.mb25 {	margin-bottom: 25px !important;}
.mb30 {	margin-bottom: 30px !important;}
.mb35 {	margin-bottom: 35px !important;}
.mb40 {	margin-bottom: 40px !important;}
.mb45 {	margin-bottom: 45px !important;}
.mb50 {	margin-bottom: 50px !important;}
.mb55 {	margin-bottom: 55px !important;}
.mb60 {	margin-bottom: 60px !important;}
.mb70 {	margin-bottom: 70px !important;}
.mb80 {	margin-bottom: 80px !important;}
.mb90 {	margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}

.ml25 {	margin-left: 25px !important;}
.ml30 {	margin-left: 30px !important;}

.mr25 {	margin-right: 25px !important;}
.mr30 {	margin-right: 30px !important;}

.mt25 {	margin-top: 25px !important;}
.mt30 {	margin-top: 30px !important;}
.mt35 {	margin-top: 35px !important;}
.mt40 {	margin-top: 40px !important;}
.mt45 {	margin-top: 45px !important;}
.mt50 {	margin-top: 50px !important;}
.mt55 {	margin-top: 55px !important;}
.mt60 {	margin-top: 60px !important;}
.mt70 {	margin-top: 70px !important;}
.mt80 {	margin-top: 80px !important;}
.mt90 {	margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}

.pb25 {	padding-bottom: 25px !important;}
.pb30 {	padding-bottom: 30px !important;}

.pt25 {	padding-top: 25px !important;}
.pt30 {	padding-top: 30px !important;}

/* ----- images */
.imgL {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* ----- base width */
#header, #visual, #mainNav, #footer {
	width: 100%;
	min-width: 1100px;
}

#siteHeader, #mainNav ul, #container, #footerNav, .in {
	width: 1100px;
	margin: 0 auto;
}

/* --------------
 common
-------------- */

/* =header
-------------------------------------------------------------- **/

/* =siteHeader
---------------------------------------------------- */


/* =globalNav
---------------------------------------------------- */
.newLayout #globalNav {
  position: relative;
}
/* ---------- mainNav */
#mainNav li a,
#mainNav li:not(#mainNavSearch) span {
	padding: 10px 32px 6px !important;
	font-size: 16px;
}
#mainNav li span {
  display: inline-block;
}
#mainNav li:not(#mainNavSearch) span:hover {
  background: #369;
}
#mainNav li#mainNavSearch span {
	padding: 9px 29px 8px !important;
}

.newLayout #mainNav {
  border-bottom: 6px solid #afafaf;
}
.mainNavTtl {
  position: relative;
}
.mainNavTtl:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 10px;
}
.navToggleWrap:hover > .mainNavInWrap,
.navToggleWrap .mainNavInWrap:hover {
  display: block;
  background: #fff;
  border-bottom: 6px solid #afafaf;
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 99;
}
#mainNav .navToggleWrap .mainNavIn a {
  color: #000 !important;
  font-size: 1.1em;
  padding: 10px 1em 6px !important;
}
.navToggleWrap .mainNavIn li a:hover {
  background: rgba(0,0,0,.2) !important;
}
.navToggleWrap .mainNavIn li {
  border-right: 1px dotted #ccc;
}

#mainNavSearch form {
  background: #fff;
  border-radius: 25px;
  padding: 2px 10px;
}
#mainNavSearch {
  float: right !important;
}
#mainNavSearch input[type="text"] {
  width: 150px;
  padding-left: 5px;
  border: none;
  box-sizing: border-box;
}
#mainNavSearch button[type="submit"] {
  background: none;
  color: #036;
  border: none;
}

/* #mainNav li:first-child a {
	padding-left: 8px;
}
#mainNav li:last-child a {
	padding-right: 8px;
} */

/* ---------- relatedNav */
#relatedNav {
	float: left;
	width: 65%;
	text-align: center;
	letter-spacing: -.5em;
}

#header.newLayout .bgB {
  background: #262121;
}
#header.newLayout #relatedNav {
  float: none;
  width: 1100px;
  text-align: left;
}
#header.newLayout #relatedNav a {
  color: #fff;
}
#header.newLayout #relatedNav a:hover {
  text-decoration: none;
}
#header.newLayout #relatedNav li.active a {
  background-color: #fff;
  color: #000;
  border-bottom: 5px solid #0000cd;
}

#header.newLayout #relatedNav .aNone a {
  position: relative;
}
#header.newLayout #relatedNav .aNone a:after {
  content: "Coming Soon";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  font-size: .85em;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
}

#header.newLayout .logo {
  position: relative;
  padding: 20px;
}
#header.newLayout #smallNav {
  float: none;
  width: auto;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  align-items: center;
}
.newLayout #smallNav a:hover {
  color: #005e9f;
  text-decoration: none;
}
.newLayout #divLang {
  top: 48px;
}
.icAccessibility {
  font-size: .8em;
  line-height: 1.2;
  margin-right: 1rem;
}
.newLayout .btnToggle.langOpen {
  line-height: 1;
}
.icAccessibility i {
  font-size: 2em;
}
.newLayout .btnToggle i {
  font-size: 1.8em;
}



#relatedNav li {
	display: inline-block;
	letter-spacing: normal;
}
#relatedNav li a {
	padding: 6px 20px 2px;
	font-size: 13px;
	display: inline-block;
}

/* ---------- smallNav */
.siteSearch input[name="Keywords"],
.siteSearch input[name="p"] {
	font-size: 80%;
}
#smallNav {
	float: right;
	width: 35%;
	padding: 4px 0;
	text-align: right;
}

.siteSearch, .langSelect, .iconS {
	display: inline-block;
}

.siteSearch input[name="Keywords"],
.siteSearch input[name="p"] {
	width: 100px;
}

/* langSelect */
.langSelect {
	margin: 0 30px;
	font-size: 80%;
	position: relative;
}

.langOpen {
	padding-right: 16px;
	position: relative;
}
.langOpen:before {
	content: "";
	position: absolute;
	border: 4px solid transparent;
	border-top-color: #666;
	top: 50%;
	right: 0;
	margin-top: -2px;
}
.langOpen:hover {
	color: #005e9f;
	cursor: pointer;
}
.langOpen:hover:before {
	border-top-color: #005e9f;
}

.langOpen.rotate:before {
	border-top: none;
	border-bottom-color: #666;
}
.langOpen.rotate:hover:before {
	border-bottom-color: #005e9f;
}

.langB .langOpen:before {
	content: none;
}
#divLang {
	/*width: 110px;*/
	padding: 3px 0;
	text-align: left;
	border-radius: 3px;
	box-shadow: 0 0 3px #999;
	background: #FFF;
	position: absolute;
	left: -10px;
	top: 25px;
	z-index: 1000;
	display: none;
	white-space: nowrap;
}
#divLang a {
	padding: 3px 10px 3px 10px;
	display: block;
}
#divLang small {
	background: #ddd;
	padding: 2px 3px;
	margin: 3px 0;
	display: block;
}

/* iconS */
.iconS li {
	width: 18px;/* IE8 */
	height: 18px;
	margin: 0 10px;
}
.iconS li img {
	width: 18px;/* IE8 */
	height: 18px;
}


/* =container
-------------------------------------------------------------- **/

/* =breadcrumb
---------------------------------------------------- */
#breadcrumb {
	margin-top: 5px;
	margin-bottom: 20px;
}

/* =main
---------------------------------------------------- */
.main {
	float: left;
	width: 850px;
}

/* =headline / titles
------------------------------------------ */
.ttlH2 {
	margin-bottom: 15px;
}
.ttlH2 small {
	font-size: 15px;
}


/* =sidebar
---------------------------------------------------- */
.sidebar {
	float: right;
	width: 210px;
}

/* =aside
------------------------------------------ */

/* =sideNav
------------------------------------------ */
#sideNav {
	margin-bottom: 30px;
}


/* =footer
-------------------------------------------------------------- **/
#footer {
	margin-top: 50px;
	padding-bottom: 20px;
}

.main #wrapAds {
	width: 850px;
}

/* =footerNav
---------------------------------------------------- */
#footerNav h2 {
	padding: 13px 0 10px;
	color: #666;
}

#footerNav .fot_ttl {
	padding: 13px 0 10px;
	color: #666;
	font-weight: bold;
}

#footerNav a {
	color: #666;
}

#footerNav li a:before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	height: 2px;
	background: #BBB;
}
#footerNav li a:after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #BBB;
	border-right: 2px solid #BBB;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ftClm {
	float: left;
	width: 500px;
}
.ftClmL {
	float: left;
	width: 750px;
}
.ftClmM {
	float: left;
	width: 250px;
}
.ftClmR {
	float: left;
	width: 1000px;
}

.ftSection {
	float: left;
	width: 235px;
	margin-left: 15px;
}
.ftClmR .ftSection {
	width: 300px;
	margin-left: 33px;
}
#footerNav .otherMenu .fot_ttl {
  padding: 0;
}
#footerNav .otherMenu .fot_ttl a {
  padding: 12px 20px;
  display: block;
}
#footerNav .otherMenu .fot_ttl a:hover {
  text-decoration: none;
  background: rgba(255,255,255,.1)
}
#footerNav .otherMenu .aNone a:after {
  padding: 12px 20px;
  box-sizing: border-box;
}
/* =copyright
---------------------------------------------------- */
#copyright {
	padding-top: 20px;
	border-top: 1px dotted #555;
}


/* =pageTop
-------------------------------------------------------------- **/
#pageTop {
	bottom: 30px;
}
@media screen and (max-width: 1600px) { /*以下の時*/
#pageTop {
	right: 15px;
}
}
@media screen and (min-width: 1601px) { /*以上の時*/
#pageTop {
	right: 100px;
}
}

/* --------------
 home contents
-------------- */
/* =visual
-------------------------------------------------------------- **/
#visual {
	height: 360px;
	overflow: hidden;
	margin-bottom: 30px;
}
#mainVisual,
#mainVisual .slick-slider {
	height: 360px;
}


/* =container
-------------------------------------------------------------- **/
/* =main
---------------------------------------------------- */
/*.btnMore a {
	background-position: 60% center;
}*/
.btnMore a:before {
	right: 40%;
}

#homeConts .contents h3 {
	padding-left: 12px;
  position: relative;
}
#homeConts .contents h3:before {
	content: "";
	position: absolute;
	border: 4px solid transparent;
	top: 8px;
	left: 0;
	margin-top: -4px;
}

#clmSights h3:before {border-left-color: #FF801E !important;}
#clmFocus h3:before {border-left-color: #802780 !important;}


#homeConts .clm3 li {
	float: left;
	width: 270px;
	margin-left: 20px;
}
#homeConts .clm3 li:first-child {
	margin-left: 0;
}

#homeConts .clm3 li span {
}
#homeConts .clm3 li img {
	width: 270px;
}

/* =homePickup
------------------------------------------ */
#homePickup .btnView {
	width: 650px;
	position: absolute;
	top: -18px;
	right: 0;
}

#homePickup .btnView.reportView{
	width: 200px;
	position: absolute;
	top: -18px;
	right: 0;
}

.clmTopics .clmP {
	width: 160px;
	height: 190px;
	margin: 0 4px 10px;
}

.clmTopics .clmP p {
	height: 100px;
}
.clmTopics .clmP img {
	width: 180px;
}

.clmTopics .clmP h2 {
	padding: 5px 8px;
	font-size: 100%;
}

/* =clmSights
------------------------------------------ */
#clmSights .clm3 li span {
	height: 180px;
	overflow: hidden;
	display: block;
}


/* ---------- slick-theme.css */

/* ---------- view button */



/* =clmAds
------------------------------------------ */
#clmAds .fb-page {
	width: 500px !important;
}

/* ---------- バナー */




/* --------------
 subpages contents
-------------- */

/* =page
---------------------------------------------------- */



/* --------------
 take over the style of the previous design
-------------- */

/*-------------------------------------------------------------------- ページネーション*/

/*-------------------------------------- 新トピックス　2013.09.24　*/
.pagePrevious a, .pageNext a, .pageControl a {
	font-size: 110%;
}

.pageCurrent {
	font-size: 110%;
}


/* ----------------------------------------- 横浜ルートプランナー */
.routeSpot {
	width: 193px;
	text-align: center;
	float: left;
	margin-right: 15px;
}
.routeSpot:last-child {
	margin-right: 0;
}
.jcLesson .dtlBtn {
	margin-top: 30px;
}

.JcAddSpotButton,
.JcBtn a {
	font-size: 14px;
}
/*-------------------------------------- common syles */

/* ---------- pageNavi */
.pgNav {
	position: absolute;
	right: 0;
	text-align: right;
	top: -3px;
}
.pgNav li {
	margin-left: 10px;
}
.pgNav li a {
	padding: 3px 15px 2px;
}


/* ---------- recommend */
.recoFlex .recoInBox {
	width: 24%;
	margin-right: 1.2%;
}
.recoFlex .recoInBox:nth-child(4n) {
	margin-right: 0;
}