@charset "utf-8";


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #000;	/*全体の文字色*/
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;	/*フォント種類*/
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
  background-repeat : no-repeat;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #ff4500;	/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
    text-decoration: none;
}
a:hover {
	color: #ff4500;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	max-width: 1300px;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 2%;		/*上下、左右へのボックス内の余白*/
}

.bgimg-slider {
    width: 100%;
    background-position: center center;
    background-size: auto;
    align-items: center;
		background-attachment: fixed;
    justify-content: center;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	height: 100px;	/*高さ*/
	color: #fff;	/*文字色*/
}
header a {
	color: #fff;	/*リンクテキストの文字色*/
}
/*ロゴ画像*/
header #logo {
	width: 250px;	/*ロゴ画像の幅*/
	float: left;	/*左に回り込み*/
	margin-top: 12px;	/*ロゴの上にあける余白。上下のバランスをここで調整して下さい。*/
}
#logo img {
	width: 80%;	/*ロゴ画像の幅*/
}

/*デバイス改行*/
br.xs {
 display: none;
}
br.sm {
 display: none;
}
br.lg {
 display: block;
}

/*ヘッダー右側の電話番号ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
#contact {
	float: right;		/*右に回り込み*/
	margin-top: 12px;	/*ブロックの上にあける余白。上下のバランスをここで調整して下さい。*/
}
/*TEL*/
.tel {
    font-size: 18px;
    color: #fff;
    text-shadow: 1px 1px 1px #000000;
}
/*TELの受付時間の小文字部分*/
.tel span {
	display: block;
	font-size: 15px;	/*文字サイズを小さく*/
}

/*ボタン*/
.bg-secondary {
    margin-left: 20px;
    padding: .8rem!important;
    border-radius: .55rem!important;
    background: linear-gradient(#0D0 0%, #008100 50%, #005B00 51%, #003900 100%);
    border: solid 1px #003900;
    box-shadow: 0 1px 2px #606060, 0 0 2px #fff inset;
}
.bg-secondary a{
    color: #fff
}

/*メインキャッチ
---------------------------------------------------------------------------*/
/*メニューキャッチ*/
.jumbotron1 {
margin-top: 80px;
margin-bottom: 80px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border-radius: .25rem;
}
.jumbotron2 {
font-size: 40px;
line-height: 130%;
text-align: center;
color: #fff;
text-shadow: 1px 2px #000000;
margin-bottom: 1rem;
}
.jumbotronp{
text-align: center;
font-size: 20px;
top:10px;
text-shadow: 1px 2px #000000;
line-height: 2.0;
font-weight: 100;
color: #fff;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	clear: both;overflow: hidden;
}
/*メニュー１個あたりの設定*/
#menubar li {
	float: left;	/*左に回り込み*/
	width: 16.2%;	/*メニュー幅（100÷6個=16.66%）　もし４個にするなら100÷4=25%になる。*/
	background: #191919;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#5e5e5e, #3c3c3c 49%, #191919 50%);		/*グラデーション*/
    margin-left: 5px;
}
#menubar li a {
	display:  block;text-decoration: none;
	text-align: center;	/*文字をセンタリング*/
	font-weight: bold;	/*太字に*/
	border-right: 1px solid #000;	/*メニューの右側の線の幅、線種、色*/
	line-height: 1.6;	/*行間を少し狭く*/
	padding: 14px 0;	/*上下、左右へのメニュー内への余白*/
	text-shadow: 1px 1px 0px rgba(0,0,0,0.6);	/*テキストの影。右に、下に、広げる幅、0,0,0は黒の事で0.6は色が60%ついた状態。*/
	color: #fff;	/*文字色*/
}
/*１つ目のメニューへの追加設定*/
#menubar li:first-child a {
	border-left: 1px solid #000;	/*メニューの線の幅、線種、色*/
}
/*マウスオン時メニューの設定*/
#menubar li a:hover {
	background: #333;	/*背景色*/
	color: #fff; /*文字色*/
}
/*現在表示中(current)メニューの設定*/
#menubar li.current a {
	background: #fff;	/*背景色*/
	color: #0b24c2;
	text-shadow: none;
}
/*スマホ用メニューを表示させない*/
#menubar-s {
    display: none;
}

/*スマホ用メニューを表示させない*/
#menubar-s {
    display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*ガソリン画像*/
.img2{
width: 95%;
margin-left: 20px;
margin-bottom: 20px;
}

/*map*/
.map{
margin: 15px;
}

/*ログイン*/
.fom0{
margin: 15px;
}
/*サイドバースクロール*/

.wrapper {
}
.sidebar {
}
.sidebar__inner{
left: auto !important;
right: auto !important;
position: -webkit-sticky;
top:  0px !important;
position: sticky;
width: 1300px !important;
max-height: 5000px;
}

/*contents（３カラムを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
	padding-top: 40px;		/*上に空けるボックス内の余白*/
	padding-bottom: 40px;	/*下に空けるボックス内の余白*/
  position: relative;
}

#contents a {
	clear: both;overflow: hidden;
  position: relative;
}

/*contents-in（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents-in {
	float: left;	/*左に回り込み*/
	width: 80%;		/*ブロックの幅*/
}
/*２カラム時*/
.c2 #contents-in {
	float: none;
	width: auto;
}

/*mainコンテンツ（中央のブロック）
---------------------------------------------------------------------------*/
#main {
	float: left;	/*右に回り込み*/
	width: 80%;		/*ブロックの幅*/
  background-color:rgba(255,255,255,0.8);
  margin-left: 50px;
  margin-bottom: 20px;
}
/*mainコンテンツのh2タグ設定*/
#main h2 {
	clear: both;
	margin-bottom: 20px;
	padding: 10px 15px;	/*上下、左右への余白*/
	font-size: 16px;	/*文字サイズ*/
	background: #191919;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#5e5e5e, #3c3c3c 49%, #191919 50%);		/*グラデーション*/
    border-bottom: 3px solid #808080;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/
}
/*mainコンテンツのh3タグ設定*/
#main h3 {
	clear: both;
	margin-bottom: 0px;
	padding: 4px 15px;	/*上下、左右への余白*/
	font-size: 25px;	/*文字サイズ*/
}
#main h3 a{
	color: #ff4500;	/*文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
#main h3 a:hover {
	color: #000;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
/*h3タグの１文字目への追加設定*/
#main h3::first-letter {
	border-left: 3px solid #0b24c2;	/*左の線の幅、線種、色*/
	padding-left: 15px;				/*線とテキストとの余白*/
}
/*コンテンツの段落タグ設定*/
#main p {
	padding: 0px 15px 20px;	/*上、左右、下への余白*/
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}
#main section + section {
	margin-top: 30px;
}

#main .ta1 {
width: 95%;
}
#main .ta2 {
width: 95%;
}
#main .ta3 {
width: 95%;
}

/*製品紹介ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main .list {
	position: relative;overflow: hidden;
	padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}
#main .list a {
	position: relative;
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
	margin: -20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
    color: #000;	/*文字色*/
}
/*マウスオン時の背景色*/
#main .list a:hover {
	background: #eee;	/*背景色*/
}
/*リンクを貼った際に出る「→」マーク*/
#main .list a::before {
	content: "お申し込みはこちら▼";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;text-align: center;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 150px;	/*幅*/
	line-height: 35px;	/*高さ*/
	background: #2e8b57;	/*背景色*/
	color: #fff;	/*文字色*/
}
/*マウスオン時の「→」マーク*/
#main .list a:hover::before {
	background: #3cb371;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
#main .list h4 {
	border-left: 6px solid #2e8b57;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*左の線との間に空ける余白*/
	margin-bottom: 0.5em;	/*下に少しスペースを空ける*/
	margin-left: 32%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
	font-size: 18px;
}
/*ボックス内のp(段落)タグ設定*/
#main .list p {
	padding: 0px !important;
	font-size: 15px;	/*文字サイズ*/
	line-height: 1.6;	/*行間。通常より少し狭くする。基本となる行間は、最上部の「body」にあります。*/
	margin-left: 34%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
}
/*ボックス内の画像*/
#main .list figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
/*最後ボックスの設定*/
#main .list:last-of-type, #main .list:last-of-type {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	margin-bottom: 20px;	/*下に空けるスペース*/
    background: #efefef;	/*背景色*/
}

/*ガソリンカードボックスの設定*/
#main .list2 {
	position: relative;overflow: hidden;
	padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}
#main .list2 a {
	position: relative;
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
	margin: -20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
    color: #000;	/*文字色*/
}
/*マウスオン時の背景色*/
#main .list2 a:hover {
	background: #eee;	/*背景色*/
}
/*リンクを貼った際に出る「→」マーク*/
#main .list2 a::before {
	content: "お申し込みはこちら▼";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;text-align: center;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 150px;	/*幅*/
	line-height: 35px;	/*高さ*/
	background: #003399;	/*背景色*/
	color: #fff;	/*文字色*/
}
/*マウスオン時の「→」マーク*/
#main .list2 a:hover::before {
	background: #4169e1;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
#main .list2 h4 {
	border-left: 6px solid #003399;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*左の線との間に空ける余白*/
	margin-bottom: 0.5em;	/*下に少しスペースを空ける*/
	margin-left: 32%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
	font-size: 18px;
}
/*ボックス内のp(段落)タグ設定*/
#main .list2 p {
	padding: 0px !important;
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.6;	/*行間。通常より少し狭くする。基本となる行間は、最上部の「body」にあります。*/
	margin-left: 34%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
	font-size: 15px;
}
/*ボックス内の画像*/
#main .list2 figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
/*最後ボックスの設定*/
#main .list2:last-of-type, #main .list2:last-of-type {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	margin-bottom: 20px;	/*下に空けるスペース*/
    background: #efefef;	/*背景色*/
}

/*subコンテンツ（左側のブロック）
---------------------------------------------------------------------------*/
#sub {
	float: left;	/*左に回り込み*/
	width: 22.5%;	/*ブロックの幅*/
}

/*sideコンテンツ（右側のブロック）
---------------------------------------------------------------------------*/
#side {
float: right;	/*右に回り込み*/
width: 20%;		/*ブロックの幅*/
background-color:rgba(255,255,255,0.8);
}

<style>
.sticky{
    top: 0;
}
.fixedsticky-withoutfixedfixed .fixedsticky-on, .fixed-supported .fixedsticky-on{
    position: fixed;
}
</style>
/*２カラム時*/
.c2 #side {
	display: none;
}

/*sub,side共通設定
---------------------------------------------------------------------------*/
/*h2見出しタグ設定*/
#sub h2,
#side h2 {
	text-align: center;	/*文字をセンタリング*/
	background: #0b24c2;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#5e5e5e, #3c3c3c 49%, #191919 50%);	/*グラデーション*/
	padding: 8px 0px;	/*上下、左右への余白*/
    border-bottom: 3px solid #808080;
	margin-bottom: 10px;
	color: #fff;	/*文字色*/
}
#side img {
    width: 95%;
    margin-left: 5px;
    margin-bottom: 5px;
}
/*段落タグ（p）設定*/
#sub p,
#side p {
	line-height: 1.6;	/*行間を少し狭く*/
}

/*box1設定（sub,sideで使っています）
---------------------------------------------------------------------------*/
/*box1設定*/
#sub .box1,
#side .box1 {
	padding: 10px;			/*ボックス内の余白*/
	margin-bottom: 10px;	/*ボックスの下にあけるスペース*/
}
.box1{
	font-size: 14px;
}

.box1 a{
	color: #ff4500;
}
/*box1の中にあるh2タグの設定*/
#sub .box1 h2,
#side .box1 h2 {
	border-radius: 0;	/*角丸をなくす設定*/
}

/*submenu（sub,sideのメニュー）
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#sub .submenu,
#side .submenu {
	margin-bottom: 20px;	/*メニューブロックの下にあけるスペース*/
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
}
/*メニュー１個ごとの設定*/
#sub .submenu li a,
#side .submenu li a {
	text-decoration: none;display: block;
	padding: 0 10px;	/*上下、左右のボックス内の余白*/
	border-bottom: 1px solid #ccc;
}
/*h2見出しにsubmenuが続いた場合*/
#sub h2 + .submenu,
#side h2 + .submenu {
	margin-top: -10px;	/*h2見出しの下の余白を相殺する*/
}

.submenu a{
    color: #000;	/*文字色*/
    text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
.submenu a:hover {
	color: #ff4500;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*メニュー三角*/
.sankaku{
width: 0;
height: 0;
margin-top: 5px;
border-left: 10px solid #ff0000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
animation: flash 1s linear infinite;
}
.parent {
 width: 100%;
 display: flex;
 margin-left: 15px;
}
.parent a{
    color: #000;	/*文字色*/
    text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
.submenu a:hover {
	color: #ff4500;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
.child {
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/*sub,sideコンテンツ内のおすすめ一覧ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#sub .list, #side .list {
	position: relative;overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.2;	/*行間を狭くする*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
#sub .list a, #side .list a {
	text-decoration: none;display: block;overflow: hidden;
}
/*最後ボックスの設定*/
#sub .list:last-of-type, #side .list:last-of-type {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	margin-bottom: 20px;	/*下に空けるスペース*/
}
/*ボックス内のh4タグ設定*/
#sub .list h4, #side .list h4 {
	font-weight: bold;	/*太字にする設定*/
}
/*ボックス内のp(段落)タグ設定*/
#sub .list p, #side .list p {
	padding: 0 !important;
}
/*ボックス内の写真設定*/
#sub .list figure img, #side .list figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 30%;		/*写真の幅*/
	margin-right: 10px;	/*写真の右側に空ける余白*/
}
/*h2見出しにlistブロックが続いた場合*/
#sub h2 + .list,
#side h2 + .list {
	margin-top: -10px;	/*h2見出しの下の余白を相殺する*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	background: #efefef;	/*背景色*/
	font-size: 85%;	/*文字サイズ*/
	color: #fff;	/*文字色*/
}
footer a, footer a:hover {
	color: #fff;	/*リンクテキスト、マウスオン時の文字色*/
}
footer .pr {display: block;font-size: 80%;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	overflow: hidden;
	padding: 20px 0;
}
/*１行分の設定*/
#footermenu ul {
	float: right;	/*左に回り込み*/
	width: 60%;		/*幅。今回は５列作ったのでここの幅18%と下のpadding(合計の2%)でトータル20%になるよう設定。列に応じて調整して下さい。*/
	padding-right: 50px;
	padding-left: 0%;
}

#footermenu li {
    display: inline-block;
    margin-right: 10px;
}

#footermenu a{
    color: #000;	/*文字色*/
    text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
#footermenu a:hover {
	color: #ff4500;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	background: #333;	/*背景色*/
}
#copyright a {text-decoration: none;}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding: 0px 20px;
	margin-bottom: 15px;
}
/*日付設定*/
#new dt {
	float: left;
	width: 9em;
	letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
    font-size: 16px;
	padding-left: 9em;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*記事設定*/
#new a {
	color: #ff4500;
}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta1 {
    background: #efefef;	/*背景色*/
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
	font-size: 15px;
}
/*ta1の左側ボックス*/
.ta1 th {
	background: #2e8b57;
	color: #fff;
	width: 140px;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
	font-size: 18px;
}

/*ETC用テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta2設定*/
.ta2 {
width: 500px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 1px;
font-size: 15px;
}

.ta2 th,
.ta2 td {
padding: 10px;
border: 1px solid #ccc;
}


.ta2 th {
background: #2e8b57;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #fff;
font-weight: normal;
font-size: 18px;
}

/* firefox */
@-moz-document url-prefix() {
.ta2 th th::after {
float: right;
padding: 0;
left: 30px;
top: 10px;
content: " ";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border: 10px solid transparent;
border-left: #2e8b57 10px solid;
margin-top: -10px;
}
}

.ta2 td{
background: #f8f8f8;
width: 360px;
padding-left: 20px;
font-size: 15px;
}

/*ta2の左側ボックス*/
.ta2 th {
	width: 140px;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
}

/*組合用テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta3設定*/
.ta3 {
width: 500px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 1px;
font-size: 15px;
}

.ta3 th,
.ta3 td {
padding: 10px;
border: 1px solid #ccc;
}


.ta3 th {
background: #295890;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #fff;
font-weight: normal;
font-size: 18px;
}

/* firefox */
@-moz-document url-prefix() {
.ta3 th th::after {
float: right;
padding: 0;
left: 30px;
top: 10px;
content: " ";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border: 10px solid transparent;
border-left: #295890 10px solid;
margin-top: -10px;
}
}

.ta3 td{
background: #f8f8f8;
width: 360px;
padding-left: 20px;
}

/*ta3の左側ボックス*/
.ta3 th {
	width: 140px;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
}

/*inputボタン
---------------------------------------------------------------------------*/
#main input[type="submit"].btn,
#main input[type="button"].btn,
#main input[type="reset"].btn {
	padding: 5px 10px;
	border: 1px solid #ccc;
	font-size: 15px;
	border-radius: 3px;
	background: #eee;
}
/*マウスオン時の設定*/
#main input[type="submit"].btn:hover,
#main input[type="button"].btn:hover,
#main input[type="reset"].btn:hover {
	border: 1px solid #999;
	background: #fff;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*アニメーションのキーグレーム設定（変更不要）*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {display: none;}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;
	width: 50px;	/*幅*/
	line-height: 50px;	/*高さ*/
	bottom: 50px;	/*下から50pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#0D0 0%, #008100 50%, #005B00 51%, #003900 100%);
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #0b24c2;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 24px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}


/*画面幅1129px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1129px){

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
display: block;
z-index: 1000;
position: absolute;
top: 24px;	/*上から24pxの場所に配置*/
right: 2%;	/*右から2%の場所に配置*/
border: 1px solid #000;	/*枠線の幅、線種、色*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
z-index: 1000;
width: 50px;	/*幅*/
height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
z-index: 1000;
background: #fff url(../images/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
z-index: 1000;
background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;
}

/*PC用メニューを非表示にする*/
#menubar {
display: none;
}

/*パッド用メニューブロック*/
#menubar-s {
position: fixed;
display: block;
background: rgba(46,139,87,0.9);	/*背景色*/
top: 0px;
width: 100%;
z-index: 999;
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
display: block;text-decoration: none;
}

.snv0  {
margin-top: 30%;
margin-bottom: 100%;
padding: 1em 1em;/* 内余白 */
z-index: 999;
}
.snv0 a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 2em 0em;/* 内余白 */
    width:100%;
    box-shadow: inset 2px 2px 0 0 #e0ddd1, 2px 2px 0 0 #e0ddd1, 2px 0 0 0 #e0ddd1;/* 罫線 */
    animation-name: scroll;
    animation-duration: 1S;
    animation-fill-mode: forwards;
    font-size: 18px;
		font-weight:bold;
	  color: #fff;	/*文字色*/
    text-align: center;	/*文字をセンタリング*/
}

.p-nav{
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-nav ul li{
min-height:100px;/* 最低の高さ */
}
.p-nav ul li:hover{
z-index:999;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
text-decoration:none;
}
.p-nav ul li a:hover{
background: rgba(46,139,87,0.9);	/*背景色*/
opacity:1;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}

.p-nav ps{
font-size: 18px;/* 文字大きさ */
}

/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー右側の電話番号ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bgimg-slider {
	background-size:cover;
}

/*ナビボタン
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック*/
#menubar-s {
	position: fixed;
	display: block;
	background: rgba(46,139,87,0.9);	/*背景色*/
	top: 0px;
	width: 100%;
	z-index: 999;
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
}

.snv0  {
	margin-top: 50%;
	margin-bottom: 100%;
  padding: 1em 1em;/* 内余白 */
  z-index: 999;
}
.snv0 a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 2em 0em;/* 内余白 */
    width:100%;
    box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
    animation-name: scroll;
    animation-duration: 1S;
    animation-fill-mode: forwards;
    font-size: 18px;
	color: #fff;	/*文字色*/
    text-align: center;	/*文字をセンタリング*/
}

.p-nav{
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-nav ul li{
min-height:100px;/* 最低の高さ */
}
.p-nav ul li:hover{
z-index:999;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
text-decoration:none;
}
.p-nav ul li a:hover{
background: rgba(46,139,87,0.9);	/*背景色*/
opacity:1;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}

.p-nav ps{
font-size: 13px;/* 文字大きさ */
}

/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
  .p-nav ul li{
    -ms-flex-preferred-size: calc(100%/2);/* 2列 */
    flex-basis: calc(100%/2);/* 2列 */
  }
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}


/*ブロック全体*/
#contact {
display: none;	/*非表示にする*/
}
#main p {
    font-size: 15px;
    line-height: 1.5;
}

#side {
    float: right;
    width: 20%;
}

#contents {
    clear: both;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 40px;
    position: relative;
}


/*sp_カード見出し*/
#sub h2, #side h2 {
    font-size: 13px;
    color: #fff;
}
#side img {
    width: 95%;
    margin-left: 5px;
    margin-bottom: 5px;
}
#sub .box1, #side .box1 {
    padding: 10px;
    margin-bottom: 10px;
}
.box1 {
    font-size: 14px;
}

/*sp_ECTコーポレート案内*/
.img2 {
    width: 97%;
    margin-left: 0px;
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

/*sp_ETCカードサイズ*/
#main .list figure {
    float: left;
    width: 100%;
    margin-bottom: 50px;
}
/*sp_ETC文面*/
#main .list h4 {
    float: right;
    width: 100%;
    border-left: 4px solid #2e8b57;
    padding-left: 0.5px;
    margin-bottom: 0.5em;
    margin-left: 0%;
    font-size: 18px;
}
#main .list a::before {
    content: "お申し込みはこちら▼";
    font-size: 15px;
    display: block;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 15px;
    width: 200px;
    line-height: 35px;
    background: #2e8b57;
    color: #fff;
}
#main .list p {
    padding: 0px !important;
    font-size: 13px;
    line-height: 1.6;
    margin-left: 0%;
    margin-bottom: 50px;
}
/*sp_ガソリンカードサイズ*/
#main .list2 figure {
    float: left;
    width: 100%;
    margin-bottom: 50px;
}
/*sp_ガソリン文面*/
#main .list2 h4 {
    float: right;
    width: 100%;
    border-left: 4px solid #003399;
    padding-left: 0.5px;
    margin-bottom: 0.5em;
    margin-left: 0%;
    font-size: 18px;
}
#main .list2 a::before {
    content: "お申し込みはこちら▼";
    font-size: 15px;
    display: block;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 15px;
    width: 200px;
    line-height: 35px;
}
#main .list2 p {
    padding: 0px !important;
    font-size: 13px;
    line-height: 1.6;
    margin-left: 0%;
    margin-bottom: 50px;
}

/*sp_トピックス*/
#new dt {
    font-size: 15px;
    float: left;
    width: 9em;
    letter-spacing: 0.1em;
}
#new dd {
    font-size: 15px;
    padding-left: 0em;
    padding-top:  10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
/*sp_サイドメニュー*/
.sidebar__inner {
    left: auto !important;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0px!important;
    width: 100%!important;
    max-height:  none;
}
/*　フッターメニュー　*/
#footermenu ul {
    float: right;
    width: 80%;
    padding-right: 50px;
    padding-left: 0%;
}
/*　リンクメニュー　*/
#side .submenu li a {
    text-decoration: none;
    display: block;
    padding-top: 5px  !important;
    padding-bottom: 10px  !important;
    padding-right: 180px  !important;
    padding-left: 10px  !important;
    border-bottom: 1px solid #ccc;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
@keyframes menu1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
  z-index: 1000;
	position: absolute;
	top: 24px;	/*上から24pxの場所に配置*/
	right: 2%;	/*右から2%の場所に配置*/
	border: 1px solid #000;	/*枠線の幅、線種、色*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	  z-index: 1000;
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	  z-index: 1000;
	background: #fff url(../images/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	  z-index: 1000;
	background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;
}

/*main,sub,side,contents-in
---------------------------------------------------------------------------*/
#main, #sub, #side, #contents-in {
	float: none;
	width: auto;
    background-color: rgba(0);
}
#main {
	float: none;
	width: 100%;
    margin-left: 0px;
}
 br.xs {
  display: block;
 }
 br.sm {
  display: none;
 }
 br.lg {
  display: none;
 }

/*topキャッチ*/
.jumbotron1 {
    margin-top: 60px;
    margin-bottom: 50px;
    margin-left:12px;
    margin-right: 12px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: .25rem;
}

 .jumbotron2 {
    font-size: 30px;
    line-height: 150%;
    margin-bottom: 1rem;
}

.jumbotronp {
    text-align: center;
    font-size: 18px;
    top: 10px;
		text-shadow:
			 1px 1px 0px #000, -1px -1px 0px #000,
			-1px 1px 0px #000,  1px -1px 0px #000,
			 1px 0px 0px #000, -1px  0px 0px #000,
			 0px 1px 0px #000,  0px -1px 0px #000;
    line-height: 2.0;
    font-weight: 100;
}

.ta1 caption {
 border: 0px solid;
}
/*ETC概要表*/
.ta1 th {
    font-size: 13px;
}
.ta1 td {
    font-size: 12px;
}

.ta2 th {
    font-size: 13px;
}
.ta2 td {
    font-size: 12px;
}

/*組合概要表*/
.ta3 th {
    font-size: 13px;
}
.ta3 td {
    font-size: 12px;
}


/*sub,sideコンテンツ内のおすすめ一覧ブロック
---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
#sub .list figure img, #side .list figure img {
	width: 20%;		/*写真の幅*/
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #side,body.s-n #footermenu {display: none;}
.sh {display:block;}
.pc {display:none;}
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*mainコンテンツ（中央のブロック）
---------------------------------------------------------------------------*/
/*mainコンテンツのh2,h3タグ設定*/
#main h2, #main h3 {
	font-size: 14px;	/*文字サイズ*/
}

/*submenu（sub,sideのメニュー）
---------------------------------------------------------------------------*/
/*メニュー１個ごとの設定*/
#sub .submenu li a,
#side .submenu li a {
	padding: 0px;	/*ボックス内の余白*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル内の左側*/
.ta1 th {
	width: 100px;
	padding: 5px;
}
/*テーブル内の右側*/
.ta1 td {
	width: auto;
	padding: 5px;
}
/*テーブル
---------------------------------------------------------------------------*/
/*テーブル内の左側*/
.ta2 th {
	width: 100px;
	padding: 5px;
}
/*テーブル内の右側*/
.ta2 td {
	width: auto;
	padding: 5px;
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
img.fr,img.fl {float: none;margin: 0;width: 100%;}

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:320px){
.p-nav ps{
font-size: 13px;/* 文字大きさ */
}
}