@charset "utf-8";

/* --------------
 reset
-------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
caption,th{text-align:left}

img {max-width:100% !important; height:auto;vertical-align: bottom;}
iframe {max-width:100% !important; border:0;}

/* --------------
 clearfix
-------------- */
.cf:after,
div:after,ul:after,ol:after,dl:after,
header:after,footer:after,
nav:after,section:after,article:after {
	content: "";
	display: block;
	clear: both;
}

/* --------------
 base
-------------- */
body {
	color: #222;
	font: normal 14px/1.6 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	/*word-break: break-all;*/
	word-wrap: break-word;
	overflow-wrap: break-word;
}

[lang="ko"] {
  font-family: 'Gulim' , 'Apple Gothic';
}
[lang="zh-TW"] {/* 繁体 */
  font-family: 'PMingLiU' , 'Apple LiSung';
	font-style: normal;
}
[lang="zh-CN"] {/* 簡体 */
  font-family: 'SimSun' , 'Song';
	font-style: normal;
}
[lang="th"] {
  font-family: 'Times New Roman' , 'Times' , serif;
}

h1,h2,h3,h4,h5,h6 {
	line-height: 1.2;
}
h1 {font-size: 21px;}
h2 {font-size: 18px;}
h3 {font-size: 15px;}
h4,h5,h6 {font-size: 100%;}
#homeConts h2,
#homeConts h3,
.sidebar h2,
.sidebar h3 {
	font-weight: normal;
}

/* link */
a {
	color: #222;
	text-decoration: none;
	word-break: break-all;
}
a:hover {
	color: #06F;
	text-decoration: underline;
}
a:hover img {
	-moz-opacity:0.8;
	opacity:0.8;
}

.aNone a {
  pointer-events: none;
}

.subpage .contents a {
	color: #06F;
	text-decoration: underline;
}
.subpage .contents a:hover {
	text-decoration: none;
}

.line {text-decoration: underline;}
/* .link a {color: #005E9F;} */

/* --------------
 modules css
-------------- */
/* ---------- font size */
.fs10 { font-size:77%;}
.fs11 { font-size:85%;}
.fs12 { font-size:93%;}
.fs13 { font-size:100%;}
.fs14 { font-size:108%;}
.fs15 { font-size:116%;}

/* ---------- font weight */
.bold {	font-weight: bold;}

/* ---------- font color */
.red {	color: #FF0000 !important;}

/* ---------- align */
.alc { text-align: center !important;}
.alr { text-align: right !important;}
.all { text-align: left !important;}

.alt { vertical-align: top !important;}
.alm { vertical-align: middle !important;}
.alb { text-align: bottom !important;}

/* ---------- float */
.noFloat { float: none !important;}

/* ---------- Cancele */
.both { clear: both;}

/* ---------- margin,padding */
.mgauto {	margin-bottom: 0px !important;}

.mb0 {	margin-bottom: 0px !important;}
.mb5 {	margin-bottom: 5px !important;}
.mb10 {	margin-bottom: 10px !important;}
.mb15 {	margin-bottom: 15px !important;}
.mb20 {	margin-bottom: 20px !important;}

.ml0 {	margin-left: 0px !important;}
.ml5 {	margin-left: 5px !important;}
.ml10 {	margin-left: 10px !important;}
.ml15 {	margin-left: 15px !important;}
.ml20 {	margin-left: 20px !important;}

.mr0 {	margin-right: 0px !important;}
.mr5 {	margin-right: 5px !important;}
.mr10 {	margin-right: 10px !important;}
.mr15 {	margin-right: 15px !important;}
.mr20 {	margin-right: 20px !important;}

.mt0 {	margin-top: 0px !important;}
.mt5 {	margin-top: 5px !important;}
.mt10 {	margin-top: 10px !important;}
.mt15 {	margin-top: 15px !important;}
.mt20 {	margin-top: 20px !important;}

.pb0 {	padding-bottom: 0px !important;}
.pb5 {	padding-bottom: 5px !important;}
.pb10 {	padding-bottom: 10px !important;}
.pb15 {	padding-bottom: 15px !important;}
.pb20 {	padding-bottom: 20px !important;}

.pt0 {	padding-top: 0px !important;}
.pt5 {	padding-top: 5px !important;}
.pt10 {	padding-top: 10px !important;}
.pt15 {	padding-top: 15px !important;}
.pt20 {	padding-top: 20px !important;}


/* ----- text */
.txtS {
	color: #666;
	font-size: 85%;
}

/* ----- list */
.ulDisc {
	margin-left: 22px;
	line-height: 1.4;
	list-style: outside disc;
}

.olDecimal {
	margin-left: 22px;
	list-style: outside decimal;
}

.ulDisc li, .olDecimal li {
	margin-bottom: 10px;
}

.noIndent {
	margin-left: -20px;
 list-style-type: none;
}

/* ----- decoration (button, etc...) */

/* ----- button */


/* ----- sns btn (topics,event) */
.evSNS {
	margin: 20px 0;
	text-align: center;
}
.evSNS li {
	margin: 0 15px;
	display: inline-block;
}
.evSNS li a {
	text-decoration: none !important;
}

.evSNS li span {
	font-size: 20px;
}

.icon-facebook {color: #3B5998;}
.icon-twitter {color: #54ACED;}
.icon-google {color: #DB4B39;}
.PIN_1454651702957_button_pin.PIN_1454651702957_round {
	width: 25px !important;
	height: 25px !important;
	background-size: 25px !important;
}


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

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

/* =siteHeader
---------------------------------------------------- */
#siteHeader h1 {
	padding: 15px;
	background: url(../img/bgHeader.png) no-repeat right bottom;
}

/* =globalNav
---------------------------------------------------- */
#globalNav {
	background: #afafaf;
}

/* ---------- mainNav */
#mainNav {
	background: #036;/* 005e9f */
}
#mainNav li {
	float: left;
	color: #FFF;
}
#mainNav li a {
	color: #FFF;
	display: inline-block;
}

#mainNav li a:hover {
	text-decoration: none;
	background: #369;
}
.mainNavInWrap {
  display: none;
}
/* ---------- relatedNav */
#relatedNav li a {
	color: #222;
}

/* ---------- smallNav */
.siteSearch input[name="Keywords"],
.siteSearch input[name="p"] {
	padding: 2px 5px;
}
.siteSearch input[name="Keywords"]:focus::-webkit-input-placeholder { color:transparent; }
.siteSearch input[name="Keywords"]:focus:-moz-placeholder { color:transparent; }
.siteSearch input[name="Keywords"]:focus::-moz-placeholder { color:transparent; }
.siteSearch input[name="p"]:focus::-webkit-input-placeholder { color:transparent; }
.siteSearch input[name="p"]:focus:-moz-placeholder { color:transparent; }
.siteSearch input[name="p"]:focus::-moz-placeholder { color:transparent; }

.siteSearch input[value="検索"] {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: none;
	vertical-align: middle;
  text-indent: -9999px;
  background: url(../img/icSearch.png) no-repeat 0 0;
}

/* langSelect */
.langSelect {
	color: #222;
}

/* iconS */
.iconS li {
	display: inline-block;
}
.iconS li img {
	border-radius: 2px;
}

/* .newLayout 202003 --------- */

.newLayout .iconS {
  text-align: left !important;
}
.newLayout .iconS li {
	width: auto;
	height: auto;
  margin: 0 20px 0 0 !important;
}
.newLayout .iconS li a {
  padding: 0 !important;
  font-size: 1.8em !important;
  position: inherit !important;
  border: none !important;
}
.newLayout .langSelect {
  margin: 0;
  font-size: 100%;
}
.newLayout .langOpen.btnToggle::before {
  display: none;
}

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

/* =breadcrumb
---------------------------------------------------- */
#breadcrumb li {
	color: #AAA;
	font-size: 12px;
	display: inline-table;
}
#breadcrumb li a {
	color: #CCC;
	padding-right: 5px;
}
#breadcrumb li a:after {
	content: "　>";
}
#breadcrumb li a:hover {
	color: #999;
}


/* =main
---------------------------------------------------- */

/* =headline / titles
------------------------------------------ */
.ttlH2 {
	border-bottom: 2px dotted #999;
}
.ttlH2 b {
	margin-bottom: -2px;
	color: #000;
	/* font-family: "小塚明朝 Pro", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; */
	font-weight: normal;
	padding: 0 10px 5px 5px;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	display: inline-block;
}

.ttlH3 {
	margin-bottom: 10px;
	padding: 3px;
	color: #036;
	background-color: #e9f5ff;
}
.ttlH3 b {
	padding: 5px 10px;
	border: 1px solid #005e9f;
	display: block;
}

.HL3 {
	clear: both;
	margin: 20px 0 5px;
	padding: 5px 10px;
	color: #FFF;
	font-size: 110%;
	background: #036;
}

/* =sidebar
---------------------------------------------------- */

/* =aside
------------------------------------------ */
.aside {
	margin-bottom: 30px;
}

.aside h2 {
	margin-top: 5px;
}

.sideBnr {
	width: 150px;
	margin: 0 auto;
}

.sideSearch h3 {
	font-size: 90%;
}

.btnSearch {
	margin-top: 20px;
}
.btnSearch input {
	width: 100%;
	padding: 7px 0;
	color: #FFF;
	text-align: center;
	border: 0;
	border-radius: 6px;
	background: #0f7aa8;
	display: inline-block;
}
.btnSearch input:hover {
	background: #FF931E;
	transition: all ease 0.3s;
}

/* weather */
#weather {
	margin-top: 50px;
	color: #666;
	text-align: center;
}
#weather a {
	color: #666;
}
#weather a:hover {
	color: #888;
	text-decoration: none;
}
#weather img {
	width: 40px;
	margin: 0 10px;
	vertical-align:middle;
}
#weather b {
	font-size: 130%;
	font-weight: normal;
}

/* =sideNav
------------------------------------------ */
#sideNav {
	padding: 10px 4px 4px;
	border: 1px solid #005E9F;
	background: #E9F5FF;
}

#sideNav .ttlH2 {
	margin-left: -4px;
	margin-right: -4px;
	font-size: 18px;
}
#sideNav .ttlH2 b {border-bottom-color: #005E9F;}

#sideNav h3 {
	margin-top: 25px;
	color: #005E9F;
	font-size: 14px;
	border-bottom: 1px solid #005E9F;
}

#sideNav .sidettl3 {
	margin-top: 25px;
	color: #005E9F;
	font-size: 14px;
	border-bottom: 1px solid #005E9F;
}

#sideNav a {
	display: block;
}
#sideNav a:hover {
	background-color: #a9d0e6;
	text-decoration: none;
}

#sideNav p a {
	margin-bottom: 8px;
	padding: 6px 15px;
	/*background: url(../img/arwM_blue.png) no-repeat 96% center #B9D7E8;*/
	background-color: #B9D7E8;
	position: relative;
}
#sideNav p a:before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 4%;
	width: 6px;
	height: 6px;
	border-top: 1px solid #005e9f;
	border-right: 1px solid #005e9f;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#sideNav li a {
	margin-top: 2px;
	padding: 5px 15px;
	font-size: 13px;
	background-color: #B9D7E8;
	/* background: url(../img/arwS_blue.png) no-repeat 6px center #B9D7E8; */
  position: relative;
}
#sideNav li a:before {
	content: "";
	position: absolute;
	border: 3px solid transparent;
	border-left-color: #005e9f;
	top: 50%;
	left: 6px;
	margin-top: -3px;
}
.wrapAdsIn {
  width: 150px;
  margin: 0 auto;
}
/* =footer
-------------------------------------------------------------- **/
#footer {
	border-top: 1px dotted #555;
	background: #EEE;
}

.subpage #wrapAds {
	margin-top: 50px;
}

/* =footerNav
---------------------------------------------------- */
#footerNav h2 {
	font-size: 14px;
	border-bottom: 1px dotted #555;
}

#footerNav .fot_ttl {
	font-size: 14px;
	border-bottom: 1px dotted #555;
}

#footerNav .ftSection.mt30 {
	border-top: 1px dotted #555;
}

#footerNav ul {
	margin-top: 10px;
}
#footerNav li a {
	margin-top: 5px;
	padding-left: 13px;
	font-size: 13px;
	/*background: url(../img/arwL_gray.png) no-repeat left center;*/
	position: relative;
}

#footerNav li a:hover {
	color: #000;
}

.otherMenu {
  background: #000;
}
#footerNav .otherMenu .fot_ttl a {
  color: #fff;
}
.icAccessibility.aNone {
  position: relative;
}
.icAccessibility.aNone:after {
  content: "Coming Soon";
  width: 100%;
  background: rgba(0,0,0,.5);
  color: #fff;
  text-align: center;
  padding: 3px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
}


#footerNav .otherMenu .aNone a {
  position: relative;
}
#footerNav .otherMenu .aNone a:after {
  content: "Coming Soon";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
}
/* =copyright
---------------------------------------------------- */
#copyright {
	margin-top: 20px;
	text-align: center;
}
#copyright a {
	color: #FFF;
}

/* =pageTop
-------------------------------------------------------------- **/
#pageTop {
	display: block;
	position: fixed;
	/*background: rgba(255,255,255,0.4);*/
}

#pageTop a {
	width: 20px;
	height: 20px;
	padding: 20px;
	border-radius: 50%;
	border: 1px solid #CCC;

	font-size: 0;
	background: rgba(255,255,255,0.4);
  position: relative;
}
#pageTop a:hover {
	background: rgba(255,255,255,0.8);
}

#pageTop a:before, #pageTop a:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
}
#pageTop a:before {
	width: 2px;
	height: 14px;
	background: #036;
}
#pageTop a:after {
	width: 10px;
	height: 10px;
	border-top: 2px solid #036;
	border-left: 2px solid #036;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* --------------
 home contents
-------------- */
/* =visual
-------------------------------------------------------------- **/

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

/* =main
---------------------------------------------------- */
.contents {
	margin-bottom: 30px;
}

.btnMore {
	margin-top: 20px;
	text-align: center;
}
.btnMore a {
	padding: 3px;
	display: block;
	border: 1px solid #949494;
	/*background-image: url(../img/arwM_gray.png);
	background-repeat: no-repeat;*/
	position: relative;
}
.btnMore a:before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;

	width: 5px;
	height: 5px;
	border-top: 1px solid #222;
	border-right: 1px solid #222;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.btnMore a:hover {
	color: #000;
	text-decoration: none;
	background-color: #EEE;
	transition: all ease 0.3s;
}

#homeConts .contents h3 {
	margin: 10px 0;
}

#clmSights .ttlH2 b {border-bottom-color: #FF801E;}
#clmSights h3 {color: #FF801E;}

#clmFocus .ttlH2 b {border-bottom-color: #802780;}
#clmFocus h3 {color: #802780;}

#homeConts .contents .clm3 a:hover h3 {
	text-decoration: underline;
}

#homeConts .clm3 li a {
	display: block;
}
#homeConts .clm3 li a:hover {
	color: inherit;
	text-decoration: none;
}


/* =homePickup
------------------------------------------ */
#homePickup {
	margin-bottom: 15px;
	position: relative;
}

#homePickup .ttlH2 b {
	border-bottom-color: #036;
}

#homePickup .btnView a {
	border-bottom: none;
}

#homePickup .btnView .reportView{
	width: 200px;
}

.clmTopics {
	letter-spacing: -.5em;
}
.clmTopics .clmP {
	border: 1px solid #A1B0B8;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}
.clmTopics .clmP a {
	height: 100%;
	display: block;
}
.clmTopics .clmP a:hover {
	text-decoration: none;
}

.clmTopics .clmP p {
	overflow: hidden;
	/* background: #CCC; */
}

.clmTopics .clmP mark {
	padding: 3px 10px;
	color: #FFF;
	font-size: 13px;
	line-height: 1;
	display: block;
	background: #036;
}
/*
.mkT {background: #7AAD43;}
.mkE {background: #FF7B90;}
*/

.clmTopics .clmP h2:hover {
	text-decoration: underline;
}

/* ---------- slick-theme.css */
/* mv */
.variable-width .slick-prev,
.variable-width .slick-next {
	width: 32px;
	/* height: 64px;
	margin-top: -32px; */
}
.variable-width .slick-prev:before,
.variable-width .slick-next:before
{
	color: white;
	font-size: 60px;
}
.variable-width .slick-prev,
.variable-width [dir='rtl'] .slick-next {
	left: 100px;
}
.variable-width .slick-next,
.variable-width [dir='rtl'] .slick-prev {
	right: 100px;
}


.one-time .slick-prev,
.one-time [dir='rtl'] .slick-next {
	left: 5%;
}
.one-time .slick-next,
.one-time [dir='rtl'] .slick-prev {
	right: 5%;
}

/* center以外暗くする */
#mainVisual .slick-slide {
	background: #000;
}
#mainVisual .slick-slide img {
	opacity: 0.6 !important;
}
#mainVisual .slick-active img {
	opacity: 1 !important;
}

/* homePickup
.autoplay .slick-prev,
.autoplay .slick-next {
	width: 30px;
	height: 30px;
	margin-top: -15px;
}
.autoplay .slick-prev:before,
.autoplay .slick-next:before
{
	color: gray;
	font-size: 30px;
}
.autoplay .slick-prev {
	left: -30px;
}
.autoplay [dir='rtl'] .slick-prev {
	right: -30px;
}
.autoplay .slick-next {
	right: -30px;
}
.autoplay [dir='rtl'] .slick-next {
	left: -30px;
} */
/* /end */

/* ---------- view button */
.btnView {
	margin-top: 10px;
	text-align: center;
	letter-spacing: -0.5em;
}

.btnView li {
	margin: 10px 20px;
	display: inline-block;
	letter-spacing: normal;
	white-space: nowrap;/* IE8 */
}

.btnView li a {
	margin-left: 5px;
	padding-right: 20px;
	color: #036;/* 7AAD43 */
	/*background: url(../img/arwM_gray.png) no-repeat right center;*/
	display: inline-block;/* IE8 */
	border-bottom: 1px solid #036;/* 7AAD43 */
	position: relative;
}
.btnView li a:before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;

	width: 5px;
	height: 5px;
	border-top: 1px solid #222;
	border-right: 1px solid #222;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*
.vTopics a {color: #7AAD43; border-bottom: 1px solid #7AAD43;}
.vEvent a {color: #FF7B90; border-bottom: 1px solid #FF7B90;}
*/

.btnView li a:hover {
	font-weight: bold;
	text-decoration: none;
}

/* =clmAds
------------------------------------------ */

/* ---------- バナー */
#clmAds {
	padding-top: 30px;
	border-top: 1px solid #CCC;
}


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

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



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

/*-------------------------------------------------------------------- ページネーション*/
.pagination {
	margin-top: 10px;
	text-align:center;
}

.pagination a {
	margin: 2px;
	padding: 2px 5px 2px 5px;
}

/*ページ数*/
.paginationControl {
	margin-bottom: 10px;
}

.paginationDisabled {
	margin: 2px;
	padding: 2px 5px 2px 5px;
	border: 1px solid #EEEEEE;
	color: #DDDDDD;
}

.paginationFirst a, .paginationPrevious a, .paginationNext a, .paginationLast a {
	margin: 2px;
	padding: 2px 5px 2px 5px;
	border: 1px solid #CCCCCC;
	background: #EEE;/* added 2013.09.13 */
}

.paginationCurrent {
	margin: 2px;
	padding: 2px 5px 2px 5px;
	border: 1px solid #fff;
	font-weight: bold;
	background: #FFF;
}

.paginationControl a {
	border: 1px solid #DDD;/* added 2013.09.13 */
	text-decoration: none !important;/* added 2013.09.13 */
}
.paginationControl a:hover {
	background: #FFF;/* added 2013.09.13 */
}


/*全件*/
.paginationItemCount {
	margin-bottom: 10px;
}
.paginationTotalItemCount {
}
.paginationFirstItemNumber, .paginationLastItemNumber {
	font-weight: bold;
}

/*-------------------------------------- 新トピックス　2013.09.24　*/
.pagePrevious a, .pageNext a, .pageControl a {
	margin: 2px 1px;
	padding: 2px 7px;
	color: #FFF !important;
	text-decoration: none !important;
	border: 1px solid #174072;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color:#174072;
	background:-webkit-gradient(linear,left top, left bottom,from(#315e93),to(#174072));
	background:-moz-linear-gradient(top,#315e93 0%,#174072 100%);
	display: inline-block;
}

.pageCurrent {
	margin: 2px 1px;
	padding: 3px 8px;
	border: 1px solid #CCC;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color:#FFF;
	background:-webkit-gradient(linear,left top, left bottom,from(#e7e7e7),to(#fdfdfd));
	background:-moz-linear-gradient(top,#e7e7e7 0%,#fdfdfd 100%);
	display: inline-block;
}

.pageControl a:hover {
	border: 1px solid #315e93;
	background-color:#315e93;
	background:-webkit-gradient(linear,left top, left bottom,from(#3a70a7),to(#315e93));
	background:-moz-linear-gradient(top,#3a70a7 0%,#315e93 100%);
}


/* ----------------------------------------- 横浜ルートプランナー */
.JcAddSpotButton,
.JcBtn a {
	background: #e0f2fc;
	font-weight: normal;
	text-align: center;
	border: 1px solid #005E9F;
	padding: 0 10px;
}
.spotBtnBox {
    text-align: right;
}
.spotBtnBox .pBtn {
	display: inline-block;
}
.spotBtnBox .jcBtnP {
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 0.5px;
}
.spotBtnBox .JcAddSpotButton,
.spotBtnBox .JcBtn a {
	padding: 1px 5px;
}
.JcAddSpotButton:hover,
.JcBtn a:hover {
	background: #a9d0e6;
}
.JcBtn a, .JcBtn a:hover {
	color: #333 !important;
	text-decoration: none !important;
}


.voiceBalloon {
	background: #ff9f00;
	background-image: -webkit-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	color: #fff;
	text-shadow: 1px 1px 2px #222;
	font-size: 16px;
	font-weight: bold;
	border-radius: 6px;
	padding: 5px 10px;
	position: relative;
}
.voiceBalloon:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 7px 0 7px;
	border-color: #ff9d00 transparent transparent transparent;
	position: absolute;
	bottom: -12px;
	left: 30px;
}
.jcLesson {
	background: #fffbeb;
  background-image: linear-gradient(
    -45deg,
    #fff 25%,
    #ffedc5 25%, #ffedc5 50%,
    #fff 50%, #fff 75%,
    #ffedc5 75%, #ffedc5
  );
  /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 8px 8px;
	margin-top: 20px;
	border-radius: 5px;
	padding: 20px 15px 30px;
}
.jcLesson .dtlBtn a {
	background: #ff9f00;
	background-image: -webkit-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,182,0,1.00) 0%,rgba(255,159,0,1.00) 100%);
	color: #fff;
	font-size: 120%;
	font-weight: bold;
	text-shadow: 1px 1px 2px #222;
	text-decoration: none;
	box-shadow: 2px 2px 2px #999;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 5px;
}
.jcLesson .dtlBtn a:hover {
	box-shadow: 2px 2px 2px #666 inset;
}
.routeSpot .imgBox {
	border: 5px solid #fff;
	box-shadow: 1px 1px 2px #aaa;
}
.routeSpot .txtBox {
	font-weight: bold;
}
.routeSpot a {
	color: #222 !important;
	text-decoration: none !important;
}
/*-------------------------------------- common syles */
.pBtn {
	/*text-align: center;*/
	letter-spacing: -.5em;
}
.pBtn li {
	letter-spacing: normal;
	display: inline-block;
}

.pBtn a {
	margin-top: 10px;
	padding: 1px 15px;
	color: #333 !important;
	text-decoration: none !important;
	letter-spacing: normal;
	border: 1px solid #949494;
	display: inline-block;
}
.pBtn a:hover {
	color: #039 !important;
	background: #EEE;
}

/* ---------- pageNavi */
.pgNav {
	letter-spacing: -.5em;
}
.pgNav li {
	letter-spacing: normal;
	display: inline-block;
}
.pgNav li a {
	color: #FFF !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 3px;
	background: #036;
	display: block;
}
.pgNav li a:hover {
	background: rgba(0,51,102,0.7);
}

/* ---------- recommend */
.divRecomCont {
	margin-top: 30px;
}
.recoFlex {
	display: flex;
	flex-wrap: wrap;
}
.recoName {
	border-left: 5px solid #036;
	color: #036;
	font-size: 125%;
	margin-bottom: 10px;
	padding: 5px;
}
.recoImgBox {
	height: 0;
	padding-top: 65%;
	margin-bottom: 5px;
	overflow: hidden;
	position: relative;
}
.recoFlex .recoInBox .ofi {
	width: 100%;
	height: 100%;
  object-fit: cover;
	object-position: 50% 0;
  font-family: 'object-fit: cover; object-position: 50% 0;';
	position: absolute;
	top: 0;
	left: 0;
}
.recoFlex .recoInBox {
	margin-bottom: 10px;
}
.recoFlex .recoInBox a {
	color: #222;
	text-decoration: none;
}
.recoFlex .recoInBox a:hover {
	background: #efefef;
	color: #06F;
}
.recoFlex .recoInBox h3 {
	font-size: 14px;
	font-weight: normal;
}