@charset "utf-8";
/* CSS Document */

/* 共通 */
:root {
  --default-width-sp-val: 670;
  --default-width-pc-val: 960;
  --default-width-sp: (700vw / 7.5);
  --default-width-pc: 960px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-hover-speed: .3s;
}
picture {
	display: block;
}
em {
  font-style: normal;
}
.main {
  color: #222;
}

/* fuel_contents */
#fuel_contents {
  overflow: hidden;
}

/* mvArea */
#mvArea {
  position: relative;
  @media (min-width: 581px) {
    .mv__img .base-picture__image {
      display: block;
      width: 100%;
      height: var(--mv-photo-h, calc(420vw/ 11.15));
      object-fit: cover;
    }
  }
  @media (min-width: 1116px) {
    --mv-photo-h: auto;
    .mv__wrapper {
      width: 960px;
      margin: auto;
    }
    .mv__img .base-picture {
      width: 1927px;
      margin-left: calc((960px - 1927px) / 2);
    }
  }
}

/* fuel_contents__wrapper */
.fuel_contents__wrapper {
  width: 100%;
  margin: 0 auto;
  color:#222;
}

/* nenyu_title */
.nenyu_title {
	width: var(--default-width);
	margin: 30px auto 0;
	color: #fff;
	background: #f9be00;
	text-align: center;
	padding: 10px 0;
	font-weight: bold;
	font-size: 18px;
}

/* attention */
.attention {
  font-size: 14px;
  line-height:1.6;
}
.attention em {
  margin-left: 1em;
  text-indent: -1em;
  display: block;
  padding-bottom: 5px;
}

/* tabhoge */
#tabhoge {
  z-index: 0 !important;
}
table.table010 {
  width: 100%;
  border-collapse: collapse;
  border: solid 2px #999;
  font-size: 115%;
  box-sizing:border-box;
}
table.table010 td {
	border: dotted 1px #999;
	padding: 7px 10px;
	text-align: center;
	line-height: 1.2;
	background: #e0eaef;
	box-sizing:border-box;
}
table.table010 th {
	background: #ededed;
	text-align: center;
	white-space: nowrap;
	font-weight:bold;
	border: solid 1px #999;
	border-bottom: solid 2px #999;
	padding: 6px 5px;
	line-height: 1.5;
	/* height:3em; */
	vertical-align: middle;
}
table.table010 th.fuelup {
	color: #FFF;
	background: #506a77;
	width: 33%;
}
table.table010 th.dst {
	width: 33%;
}
table.table010 th.carrier {
	width: 33%;
}
table.table010 td.course {
	text-align: center;
	font-weight:bold;
	vertical-align:middle;
	border-bottom: 2px solid #999;
	border-right: 1px solid #999;
	background: #FFF;
}
table.table010 td.fee {
	font-size: 82%;
	line-height: 130%;
	padding: 2px;
	text-align: center;
	background: #FFF;
	border-left: 1px solid #999;
	vertical-align:middle;
}
.fee_new {
	font-weight: bold;
}
.fee_new em {
	font-weight: bold;
	color: #F00;
	font-size: min((32vw / 7.5) , 22px);
	padding-left:13px;
	line-height: 1;
}
.fee_new span {
	font-weight: bold;
	color: #F00;
}
td.fee_new.last,td.fee.last {
  border-bottom: 2px solid #999;
}
.text_link {
	font-weight: bold;
}
#tabhoge p {
	clear: both;
	text-align: right;
	font-size: 90%;
	padding: 10px 0 30px;
}
#fuel_list .ui-helper-hidden {
	display: none;
}
#fuel_list .ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
#fuel_list .ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 110%;
	list-style: none;
}
#fuel_list .ui-helper-clearfix:before,
#fuel_list .ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
#fuel_list .ui-helper-clearfix:after {
	clear: both;
}
#fuel_list .ui-helper-clearfix {
	min-height: 0;
}
#fuel_list .ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}
#fuel_list .ui-front {
	z-index: 100;
}
#fuel_list .ui-tabs {
	position: relative;
	padding: .2em;
}
#fuel_list .ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: 0;
}
#fuel_list .ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px 0 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
	width:25%;
	box-sizing:border-box;
}
#fuel_list .ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -2px;
	padding-bottom: 2px;
}
#fuel_list .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
#fuel_list .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
#fuel_list .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
#fuel_list .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
#fuel_list .ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 0;
	background: none;
}
#fuel_list .ui-tooltip {
	padding: 0;
	position: absolute;
	z-index: 9999;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body #fuel_list .ui-tooltip {
	border-width: 2px;
}
#fuel_list .ui-widget {
	font-size: 1.05em;
}
#fuel_list .ui-widget .ui-widget {
	font-size: 1em;
}
#fuel_list .ui-widget input,
#fuel_list .ui-widget select,
#fuel_list .ui-widget textarea,
#fuel_list .ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}
#fuel_list .ui-widget-content {
	background: #fff;
	/*margin-bottom: 40px;*/
}
#fuel_list .ui-widget-content a {
	color: #222;
}
#fuel_list .ui-widget-header {
	border-bottom: 2px solid #999;
	color: #222;
	font-weight: bold;
}
#fuel_list .ui-widget-header a {
	color: #222;
}
#fuel_list .ui-state-default,
#fuel_list .ui-widget-content .ui-state-default,
#fuel_list .ui-widget-header .ui-state-default {
	background: #ededed;
	font-weight: normal;
	color: #222;
}
#fuel_list .ui-state-default a,
#fuel_list .ui-state-default a:link,
#fuel_list .ui-state-default a:visited {
	color: #222;
	text-decoration: none;
	border: 2px solid #fff;
	box-sizing:border-box;
}
#fuel_list .ui-state-hover,
#fuel_list .ui-widget-content .ui-state-hover,
#fuel_list .ui-widget-header .ui-state-hover,
#fuel_list .ui-state-focus,
#fuel_list .ui-widget-content .ui-state-focus,
#fuel_list .ui-widget-header .ui-state-focus {
	background: #dadada;
	font-weight: normal;
	color: #222;
}
#fuel_list .ui-state-hover a,
#fuel_list .ui-state-hover a:hover,
#fuel_list .ui-state-hover a:link,
#fuel_list .ui-state-hover a:visited,
#fuel_list .ui-state-focus a,
#fuel_list .ui-state-focus a:hover,
#fuel_list .ui-state-focus a:link,
#fuel_list .ui-state-focus a:visited {
	color: #212121;
	text-decoration: none;
}
#fuel_list .ui-state-active,
#fuel_list .ui-widget-content .ui-state-active,
#fuel_list .ui-widget-header .ui-state-active {
	border: 2px solid #999;
	font-weight:bold;
	background: #fff;
	color: #222;
}
#fuel_list .ui-state-active a,
#fuel_list .ui-state-active a:link,
#fuel_list .ui-state-active a:visited {
	color: #222;
	text-decoration: none;
}
#fuel_list .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: 25px 0;
	text-decoration: none;
	width: 100%;
	text-align: center;
	vertical-align:middle;
}
#fuel_list .ui-widget-content {
    border: none;
    background: #fff none;
    color: #444;
}
#fuel_list .ui-state-hover {
    border: 1px solid #ccc;
    background: url(/dst/search/img/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x #0073ea;
    font-weight: 700;
    color: #fff;
}
#fuel_list .ui-widget-header {
  background: url(/dst/search/img/ui-bg_highlight-soft_50_dddddd_1x100.png) 50% 50% repeat-x #ddd;
}
#fuel_list .ui-corner-top, #fuel_list .ui-corner-all {
  border-radius: 0;
}
#fuel_list .ui-state-default {
  border: 1px solid #ddd;
}

/*section__inner*/
.section__inner {
  width: var(--default-width);
  margin: auto;
  position: relative;
  padding: min((40vw / 7.5), 25px) 0;
}

/*base-title*/
.base-title {
  font-size: min((32vw / 7.5), 32px);
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: min((30vw / 7.5), 30px);
}
.base-title__inner {
  display: flex;
  flex-direction: column;
}
#fuel_list .base-title__text--sub {
  font-size: min((20vw / 7.5), 14px);
  font-weight: normal;
  order: 1;
}
.base-title__text--sub--text {
  font-size: min((24vw / 7.5), 18px); 
  #fuel_list & {
    font-size: min((20vw / 7.5), 14px);
  }
}

/****************************************************************/
/*
/* メディアクエリ設定 960px以上
/* 通常(PC用)記述の場所
/*
/****************************************************************/
@media print,screen and (min-width: 960px) {
  [class$="--sp"] {
    display: none !important;
  }

  .fuel_contents__wrapper {
    width: 960px;
  }

  /* tabhoge */
  .ui-tabs .ui-tabs-nav br {
    display:none;
  }
  .fee_new br {
    display:none;
  }
  #fuel_list .ui-widget-content {
    /*margin-bottom: 40px;*/
  }
  #fuel_list .ui-widget.ui-widget-content {
    width: inherit !important;
  }
}


/****************************************************************/
/*
/* メディアクエリ設定 761px～959px
/* タブレット用記述の場所
/*
/****************************************************************/
@media screen and (min-width: 761px) and (max-width: 959px) {
  [class$="--sp"] {
    display: none !important;
  }

  /* attention */
  .attention {
    width: 90%;
    margin: 0 auto;
  }

  /* tabhoge */
  #tabhoge {
    width: 94% !important;
    margin: 0 auto;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: 10px 0;
    text-decoration: none;
    width: 100%;
    text-align: center;
    height:65px;
  }
  #fuel_list .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding:10px;
  }
  #fuel_list .ui-widget-content {
    /*margin-bottom: 40px;*/
  }
}


/****************************************************************/
/*
/* メディアクエリ設定 0～760px
/* スマホ用記述の場所
/*
/****************************************************************/
@media screen and (min-width: 0px) and (max-width: 760px) {
  [class$="--pc"] {
    display: none !important;
  }
  .nenyu_title {
    width: 100%;
    font-size: 1.1em;
  }
  .fuel_contents__wrapper {
    font-size: 80%;
  }

  /* attention */
  .attention {
    width: 94%;
    font-size: calc(19vw / 7.5);
    line-height:1.6;
    margin: 0 auto;
  }

  /* tabhoge */
  #fuel_list .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: 8px 0;
    text-decoration: none;
    width: 100%;
    font-size:80%;
    text-align: center;
    height:50px;
  }
  #fuel_list .ui-tabs .ui-tabs-nav .ui-tabs-anchor span {
    display:none;
  }
  #tabhoge {
    width: 94%;
    margin: 0 auto;
  }
  #tabhoge p {
    clear: both;
    text-align: right;
    font-size: 80%;
    padding: 10px 0 10px;
  }
  #fuel_list .ui-widget-content {
    /*margin-bottom: 20px;*/
  }
  #fuel_list .ui-widget.ui-widget-content {
    left: 0 !important;
    width: inherit !important;
    /*padding: 0.8em;*/
  }
	table.table010 {
		font-size: 100%;
	}
	.fee_new em {
		padding-left:5px;
	}
}

/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
}