@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');


/* =========================================================
layout
========================================================= */
.spnone {display:none!important;}

img {
    image-rendering: -webkit-optimize-contrast;
}

#wrapInner {
	width: 100%!important;
    font-family: 'Noto Sans JP', sans-serif;
}

#inner950{
	width: 100%;
	margin: 0 auto;
	display: block;
}

.bgColorBlock {
	background-color: #E0F1FF;
}

.bgColorBlock .inner {
	width: 96%;
	margin: 0 auto;
	padding: 4% 2%;
}

.bgBlock {
	background-color: #FFF;
}

.bgBlock .inner {
	width: 96%;
	margin: 0 auto;
	padding: 4% 2%;
}

.titlePc {
	display: none !important;
}

.titleSp {
	width: 100%!important;
    text-align: center;
    background-size: 211%;
}

h1 {
    float: left;
    width: 100%!important;
	font-size: 85% !important;
    margin-left: 0;
}

h2 {
	text-align: left;
	font-size: 138.5%;
	font-weight: bold;
    color: #1919A9;
}

h2 i.fas,
h2 i.far {
    margin-right: 1%;
}

h2 span {
    font-size: 70%;
}

h3 {
  text-align: center;
  font-size: 116%;
  font-weight: bold;
  margin-top: 3%;
}

h3 span {
  background: linear-gradient(transparent 60%, #FAFF8A 0%);
}


a:hover img {
	opacity: 0.8;
	filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
}

p.attention {
	font-size: 116%;
    line-height: 1.4;
	width: 96%;
    margin-top: 3%;
	border: 1px #F00 solid;
	padding: 2%;
	background: #FFF;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.note {
	text-align: left;
    font-size: 116%;
	line-height: 1.4;
}

.red {
    color: #F00;
}

/* =========================================================
header
========================================================= */
#header {
	border-top: 5px #1919A9 solid;
}

#header .inner {
    width: 98%;
	padding: 2% 1%;
}

#header .headerLogo {
	float: left;
	width: 45%;
    margin-bottom: 1%;
}

#header .headerLogo img {
	width: 100%;
}

#header .headerNavi {
	float: left;
	width: 55%;
	text-align: right;
    font-size: 85%;
    line-height: 1.2;
    vertical-align: middle;
}

#header .headerNavi ul {

}

#header .headerNavi ul li {
	border-left: 1px #CCC solid;
	padding: 0 3%;
    text-align: center;
	display:inline-flex;
}

/* =========================================================
WESTERポイント
========================================================= */
.westerBlock {
    width: 90%;
    margin: 0 2%;
    background: #DCF5FF;
    padding: 3%;
    font-size: 100%;
    border-radius: 10px;
    line-height: 1.4;
}

.westerBlock .lead {
    text-align: center;
    color: #003399;
    font-size: 110%;
    font-weight: bold;
}

ul.guideList li {
	list-style: none;
	padding-bottom: 2px;
	text-indent: -1em;
    margin-left: 1em;
    text-align: left;
    font-weight: normal;
}

ul.guideList li:before {
	content: '●';
}

ul.guideList li.kome {
	list-style: none;
	padding-bottom: 4px;
	text-indent: -1em;
    margin-left: 1em;
}

ul.guideList li.kome:before {
	content: '※';
}

.brandBox {
    text-align: center;
    margin-top: 2%;
}

.brandBox img {
    width: 100%;
    height: auto;
}

.camBn img {
    width: 90%;
	margin: 0 auto;
	padding: 2% 5% 0;
}

/* =========================================================
JR検索＆おすすめ
========================================================= */
.jrWrap {
	display: none !important;
}

.recoWrap {
    width: 100%;
}

.recoWrap .swiper-slide img {
    width: 100%;
    height: auto;
}

.recoWrap .prBn {
    width: 90%;
	margin: 0 auto;
	padding: 2% 5% 0;
}

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  margin-top: 2%;
}

a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn-c {
  font-size: 138.5%;
  position: relative;
  padding: 2%;
  border-radius: 4px;
}

a.btn-c i.fas {
  margin-right: 2%;
}

/* =========================================================
新着情報
========================================================= */
.infoWrap {
	width: 100%;
}

.infoWrap ul {
}

.infoWrap ul li {
    padding: 2% 1%;
	border-top: 1px solid #666;
    font-size: 116%;
    line-height: 1.4;
}

/* =========================================================
キーワード
========================================================= */
.keywordWrap {
    display: none !important;
}

/* =========================================================
list横並び
========================================================= */
.itemList2 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.itemList2 > div {
	width: 100%;
}

.itemList3 > div .Btn {
	overflow: hidden;
    width: 94%;
	margin: 0 3%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 94%;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    color: #333;
    text-decoration: none;
}

.itemList3 > div .Btn a {
	display: block;
	position: relative;
	text-align: center;
	background: #F60;
	color: #fff;
	text-decoration :none;
	padding: 5%;
}

.itemList3 > div .Btn a:hover {
	background: #F30;        /* マウスオーバーカラー */  
}

.itemList3 > div .Btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
}

.itemList3 > div .Btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #F60;
}

.itemList3 > div .Btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #F30;
}

.itemList3 > div .Btn_gray {
	overflow: hidden;
    width: 94%;
	margin: 0 3%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 94%;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    color: #fff;
    text-decoration: none;
	background: #666;
	padding: 5% 0;
}

.itemList3 > div .Btn_gray:before {        /*白いひし型 */ 
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
}

.itemList3 > div .Btn_gray:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #666;
}

.itemList4 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.itemList4 > div {
	float: left;
	width: 48%;
	margin: 1%;
}

.itemList4 > div img {
	width: 100%;
}

.itemList4 > div dd {
	font-size: 116%;
    line-height: 1.4;
	text-align: left;
	padding: 0 3% 4%;
}

.bgColorBlock .itemList4 > div {
	background: #FFF;
}

.bgBlock .itemList4 > div {
	background: #DBF5FF;
}

/* =========================================================
slide
========================================================= */
.slide-wrap {
	background: rgba(255,255,255,0); /*背景白を透過*/
	display: flex;
	margin: 0 auto;
	width: 100%;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.slide-box {
	margin-right: 3%;
    flex: 0 0 80%;
	text-align: center;
}

.slide-box p {
  font-size: 131%;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  background: #1919A9;
  padding: 3% 0;
}

.slide-box p img {
	max-width: 26px; 
    height: auto;
	padding: 0;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 2%;
}

.slide-box .detail .ribbon {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 8px 10px;
  font-size: 116%;
  font-weight: bold;
  background: #1919A9;
  color: #FFF;
  box-sizing: border-box;
  width: 100%;
  margin-top: 2%;
}

.slide-box .detail .ribbon:before,
.slide-box .detail .ribbon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.slide-box .detail .ribbon:before {
  top: 0;
  left: 0;
  border-width: 17px 0px 17px 10px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.slide-box .detail .ribbon:after {
  top: 0;
  right: 0;
  border-width: 17px 10px 17px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.slide-box .detail ul {
	font-size: 116%;
	line-height: 1.4;
	padding: 0;
	margin: 0;
    text-align: left;
}

.slide-box .detail ul li {
	padding: 2% 0;
	border-bottom: 1px solid #CCC;
}

.slide-box .Btn {
	overflow: hidden;
    width: 100%;
	margin: 3% auto 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 116%;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.slide-box .Btn a {
	display: block;
	position: relative;
	text-align: center;
	background: #0099ff;
	color: #fff;
	text-decoration :none;

}

.slide-box .Btn a:hover {
	background: #0066ff;        /* マウスオーバーカラー */  
}

.slide-box .Btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
}

.slide-box .Btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 5px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #0099ff;
}

.slide-box .Btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #0066ff;
}




/* =========================================================
ボタン
========================================================= */
.Btn {
	overflow: hidden;
    width: 94%;
	margin: 3%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 94%;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    color: #333;
    text-decoration: none;
}

.Btn a {
	display: block;
	position: relative;
	text-align: center;
	background: #F60;
	color: #fff;
	text-decoration :none;
	padding: 5%;
}

.Btn a:hover {
	background: #F30;        /* マウスオーバーカラー */  
}

.Btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
}

.Btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */   
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #F60;
}

.Btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #F30;
}

.Btn_navy {
	overflow: hidden;
    width: 94%;
	margin: auto 3%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 94%;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    color: #333;
    text-decoration: none;
}

.Btn_navy a {
	display: block;
	position: relative;
	text-align: center;
	background: #006;
	color: #fff;
	text-decoration :none;
	padding: 5%;
}

.Btn_navy a:hover {
	background: #003;        /* マウスオーバーカラー */  
}

.Btn_navy a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
}

.Btn_navy a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #006;
}

.Btn_navy a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #003;
}

/* =========================================================
footer
========================================================= */
#footer {
	background-color: #EBEBF9;
}

#footer .inner {
	width: 96%;
	margin: 0 auto;
	padding: 2% 2%;
}

#footer .inner ul {
	font-size: 93%;
	line-height: 1.4;
    text-align: left;
}

#footer .inner ul li {
display: inline-block;
    width: 46%;
	padding: 2% 0;
}

#footer .inner ul li:last-child {
    border-right: none;
}

#footer .copy {
	background-color: #1919A9;
    color: #FFFFFF;
    font-size: 77%;
    text-align: center;
    padding: 2% 0;
}