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


html{ margin: 0; padding: 0; font-size: 62.5%;}

*{margin:0;padding:0;}
html.wf-active,
html.loading-delay{visibility:visible;}

body{font-family: "NotoSansJP", "ヒラギノ角ゴ ProN", "Arial","メイリオ", sans-serif; font-weight:400;margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust: 100%;font-size: 1.6rem; color: #000; line-height: 2.6rem;}

a:focus, *:focus{outline:none;}

.u-linenone { text-decoration: none!important; color: #000;}
.u-linenone a { text-decoration: none!important; color: #000;}

/*reset*/
footer, header,h1,h2,h3,h4,h5,h6,p,img,ul,li,dl,dt,dd,table,tr,td{margin:0;padding:0;}
img{max-width:100%;height:auto;}
nav ul li{list-style:none;}
ul li{list-style:none;}

a:hover { opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter:"alpha(opacity=70)";}
  
  
/*font*/  
@font-face {
  font-family: "NotoSansJP"; font-weight: 200; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");} 
  
@font-face {
  font-family: "NotoSansJP"; font-weight: 300; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");}   
  
@font-face {
  font-family: "NotoSansJP"; font-weight: 400; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");}     
  
@font-face {
  font-family: "NotoSansJP"; font-weight: 500; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");}    
  
@font-face {
  font-family: "NotoSansJP"; font-weight: 700; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");} 

@font-face {
  font-family: "NotoSansJP"; font-weight: 800; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");}

@font-face {
  font-family: "NotoSansJP"; font-weight: 900; font-display: swap; src: url("../fonts/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
  url("../fonts/NotoSansJP-VariableFont_wght.woff")format("woff"), url("../fonts/NotoSansJP-VariableFont_wght.eot")format("eot");}


  
  
/*** 解像度の幅が1050px以上 ***************************/
@media all and (min-width:1050px), print{
body{-webkit-print-color-adjust:exact;}

.pcnone { display: none;}

#wrapper{ width: 100%; max-width: 100%; margin: 0; padding: 0; height: auto;}
main { width: 100%; height: auto; margin: 0 auto; padding: 0;}
.content64 { width: 64%; max-width: 64%; height: auto; margin: 0 auto; padding: 0;}
.content100 { width: 100%; height: auto; margin: 0 auto; padding: 0;}

.h-tit01 {background: url("../img/titlebg01.png") no-repeat; background-size: contain; background-position:center bottom; width: 65%; height: 90px; margin: 0 auto; }
.h-tit02 {background: url("../img/titlebg02.png") no-repeat; background-size: contain; background-position:center bottom; width: 65%; height: 90px; margin: 0 auto; }

.h-tit01 h2,.h-tit02 h2 { color: #1C54D5; font-size: 2vw; text-align: center; padding: 15px 0 0 0; font-weight: 900;}
.txcenter { text-align: center;}
.txleft { text-align: left;}

.pagetop { text-align:right; z-index: 700; position: fixed;	bottom: 20px; right: 20px;}
.pagetop img { width: 45%;}

 /*gasoline01--------------------*/
.gasoline01 { background: url("../img/main01bg.jpg") no-repeat; background-position: top left; background-size: contain; width: 100%; height: auto;}
.ga01-01 { width: 100%; margin: 0 auto; text-align: center;}

.ga01-02 { width: 100%; margin: -60px 0 0 0;}
.ga01-02b { background: rgba(9, 67, 201, 0.85); border-radius: 40px; padding: 25px; width: 64%; margin: 0 auto; text-align: right;}
.ga01-02 h1 { color: #fff; font-weight: 900; font-size: 2.5vw; line-height: 4vw; text-align: center;}
.ga01-02 h1 span { color: #FFFF00;}
.ga01-02 img { width: 20%; margin: -150px 0 0 0;}

 /*gasoline02--------------------*/
.gasoline02 { width: 100%; height:auto; display: flex; justify-content: space-between; margin: 100px auto; align-items: top; text-align: center; padding: 0;}
.gasoline02 h2 { padding: 20px 0 0 0; font-weight: 900;}
.gasoline02 img { width: 100%; height: auto; vertical-align: top;}
.ga02-01 { width: 30%;}
.ga02-01 h2 { color: #E31546; font-size: 1.6vw; line-height: 2.6vw;}
.ga02-01 h2 span {color: #000; font-size: 1.2vw; line-height: 2.2vw;}
.ga02-02 { width: 30%;}
.ga02-02 h2 { color: #000; font-size: 1.6vw; line-height: 2.6vw;}
.ga02-03 { width: 30%;}
.ga02-03 h2 { color: #E31546; font-size: 1.6vw; line-height: 2.6vw;}
.ga02-03 h2 span.gatax01 {color: #000; font-size: 1.2vw; line-height: 2.2vw;}
.ga02-03 h2 span.gatax02 {color: #000; font-size: 0.9vw; line-height: 1.9vw;}



/*gasoline03--当社は2つの石油メーカーをご選択できます*/
.gasoline03 { background: #E8F3FE; width: 100%; height: auto; padding: 80px 0 80px 0;}

.ga03-01 { width: 70%; height: auto; background: #fff; border-radius: 40px; padding: 0; margin: 50px auto;}
.ga03-01 dl { display: flex; flex-wrap: wrap; font-size: 2.5vw; font-weight: 900; line-height: 4vw; margin: 0 auto; width: 70%; padding: 30px 0 10px 0;}
.ga03-01 dl dt { width: 10%; margin: 0 0 40px 0; color: #1C54D5;}
.ga03-01 dl dd { width: 80%; padding: 0 0 0 20px;}


.ga03-02 { width: 100%; height: auto; display: flex; justify-content: space-between; padding: 50px 0 0 0; align-items: center;}
.ga03-eneos { width: 45%; border: 3px solid #1D54D5; border-radius: 40px; margin: 0; padding: 0; text-align: center; background: #fff;}
.ga03-cosmo { width: 45%; border: 3px solid #1D54D5; border-radius: 40px; margin: 0; padding: 0; text-align: center; background: #fff;}

.ga03-02 h3 { background: #1D54D5; border-radius: 30px 30px 0 0; padding: 20px; margin: 0; color: #fff; font-size: 1.8vw;}
.ga03-02 img { width: 60%; padding: 30px 0 10px 0;}
.ga03-02 p { color: #000; font-size: 1.4vw; line-height: 2.4vw; font-weight: 900; padding: 0 0 30px 0;}
.ga03-02 p span { color: #E31546;}

/*全国のサービスステーション検索*/
.ga03-03 { width: 100%; height: auto; margin: 80px auto;}
.ga03-03 h4 { font-size: 2vw; font-weight: 900; margin:0; padding: 30px 0 0 0; text-align: center;}
.ga03-03 h4:before { content:'\f002'; font-family: "Font Awesome 5 Free"; vertical-align: middle; background-size: contain; margin: 0 20px 0 0; color: #1C54D5; padding: 0; display: inline-block; font-weight: 900; font-size: 3vw;}

.ga03-03 ul {  width: 100%; height: auto; margin: 50px auto;display: flex; justify-content: space-between; align-items: center;}
.ga03-03 ul li { width: 42%; background: #fff;  font-weight: 500; border-radius: 20px; box-shadow: 2px 2px 2px #ccc;}
.ga03-03 ul li img { width: 15%; padding: 0 30px 0 0; margin-left: -50px;}
.ga03-03 ul li p {font-size: 2.2rem; line-height: 3rem; font-weight: 700;}
.ga03-03 ul li a { padding:20px 0 20px 0; width: 100%; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center;} 
 
 
/*gasoline04--------------------*/
.gasoline04 { width: 100%; height: auto; display: flex; justify-content: space-between; margin: 100px auto;}
.ga04-01 { width: 40%;}
.ga04-01b { position: relative; width: 100%; padding-top: 100%; border-radius: 50%; background: #1C54D5; color: #fff; }
.ga04-01b h3 {position: absolute; top: 48%; left: 50%; width: 75%; transform: translate(-50%, -62%); font-size: 3vw; line-height: 5rem; font-weight: 900; text-align: center;}
.ga04-01b h3 span { font-size: 1.2vw; line-height: 4vw; font-weight: 700;}
 
 
.ga04-02 { width: 40%;}
.ga04-02b { position: relative; width: 100%; padding-top: 100%; border-radius: 50%; background: #fff; color: #1C54D5; border:4px solid #1C54D5;}
.ga04-02b h3 {position: absolute; top: 30%; left: 50%; width: 75%; transform: translate(-50%, -70%); font-size: 2.2vw; line-height: 4vw; font-weight: 900; text-align: center;}
.ga04-02b p.gatx01 { font-size: 1.3vw; line-height:2vw; font-weight: 700; position: absolute; top: 40%; left: 50%; width: 75%; transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }

.ga04-02b p.gatx02 { font-size: 1vw; line-height: 1.8vw; font-weight: 700; position: absolute; top: 60%; left: 50%; width: 75%; transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
.ga04-02b p.gatx02 span {padding-left: 24px;}


/*gasoline05----------------*/
.gasoline05 { width: 100%; height: auto; margin: 150px auto;}
.gasoline05 ul { font-weight: 900; margin: 80px 0 50px 0;}
.gasoline05 ul li { color: #fff; font-size: 1.4vw; line-height: 2.6vw; background: #1C54D5; margin: 0 0 100px 0; padding: 20px 20px 20px 40px; position: relative;}
.gasoline05 ul li span { color: #ff0; padding-right: 50px; font-size: 2vw; line-height: 3vw;}

.gasoline05 ul li:after { position: absolute; content: ''; top: 100%; left: 50%; border: 40px solid transparent; border-top: 40px solid #1C54D5; width: 0; height: 0; margin-left: -80px;}

.gasoline05 .caution { font-size: 1.2rem; line-height: 2.2rem; padding: 20px 0 0 0;}

.ga05 { display: flex; justify-content: flex-start; align-items: center; width: fit-content; margin: 0 auto;}
.ga05 img {width: 25%; padding: 0 40px 0 0;}
.ga05 p {color: #E31546; font-size: 2vw; font-weight: 900; padding: 20px 0 0 0;}

.ga05 p span {background: linear-gradient(transparent 65%, #FBEB11 65%);}


/*gasoline06----------------*/
.gasoline06 { width: 100%; height: auto; background: url("../img/bg01.jpg"); padding: 80px 0 50px 0;}
.ga06-01 { width: 70%; margin: 50px auto; background: #1C54D5; border-radius: 40px;}
.ga06-01 h3 { color: #ffff; font-weight: 900; font-size: 1.6vw; text-align: center; padding: 20px;}

.ga06-02 { width:90%; height: auto; background: #fff; border-radius: 40px; padding: 0; margin: 50px auto;}
.ga06-02 dl { display: flex; flex-wrap: wrap; font-size: 2.5vw; font-weight: 900; line-height: 4vw; margin: 0 auto; width:50%; justify-content: center; align-items: top; padding: 40px 0 10px 0; }
.ga06-02 dl dt { width: 20%; margin: 0 0 40px 0; color: #1C54D5; font-size: 3vw; font-weight: 900; text-align: center;}
.ga06-02 dl dd { width: 70%; padding: 0 0 0 30px;}
.ga03-01 dl dd span { color:#E31546; }

/*gasoline07----------------*/
.gasoline07 { width: 100%; height: auto; margin: 150px auto;}
.ga07 { width: 100%; height: auto; border:4px solid #1C54D5; border-radius: 40px; margin: 0; padding: 0;}
.ga07b { padding: 60px 40px 20px 40px; } 
.ga07b h3 { color: #1C54D5; font-size: 1.6vw; padding: 0 0 20px 0; font-weight: 900;}
.ga07b p { color: #1C54D5; font-size: 1vw; line-height: 2vw; padding: 0 0 50px 0;}


/*gasoline08--Q&A----------------------------*/
.gasoline08 { width: 100%; height: auto; margin: 0 auto; padding: 40px 0 40px 0;}

.gasoline08 dl { background: #E8F3FE; border-radius: 40px; margin: 50px 0 50px 0; padding: 40px; display: block;}
.gasoline08 dt { color: #1C54D5; display: flex; align-items: center; font-weight: 700; font-size: 1.8rem;column-gap: 24px; padding: 7px 0 0 80px; position: relative;} 

.gasoline08 dt:before{ content: "Q"; color: #fff; border-radius: 50%; background-color: #1C54D5; font-weight: 900; font-size: 2rem; width: 50px; max-width: 50px;  height: 50px; max-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0; position: absolute; left: 0; top: 0;}

.gasoline08 dd { color: #000; display: flex; align-items: start; font-weight: 500; column-gap: 24px; margin: 40px 0 0 0; padding: 5px 0 0 80px; position: relative;} 
.gasoline08 dd:before{ content: "A"; color: #1C54D5; border-radius: 50%; background-color: #fff; font-weight: 900; font-size: 3rem;  width: 50px; max-width: 50px;  height: 50px; max-height: 50px; display: flex;align-items: center; justify-content: center; padding: 0; position: absolute; left: 0; top: 0;}


/*gasoline09------------------------------*/
.gasoline09 { width: 100%; height: auto; margin: 100px auto; padding: 40px 0 100px 0;}

.ga09-01 { width: 100%; height: auto; border:4px solid #1C54D5; border-radius: 40px; margin: 0; padding: 0;}
.ga09-01b { padding: 80px 20px 80px 20px; margin: 0 auto; width: fit-content;} 
.ga09-02 { width: 60%; margin: -35px auto; background: #1C54D5; border-radius: 30px; padding: 20px;}
.ga09-02 h3 { color: #ffff; font-weight: 900; font-size: 1.6vw; text-align: center;}
.ga09-01b p { font-size: 1vw; line-height: 2.2vw; padding: 30px 30px 0 30px; font-weight: 700;}




/*給油カード申込----------------------------*/
.form-link { position: sticky; bottom: 0; z-index: 500; width: 100%; height: auto; padding: 10px 0 10px 0; background: rgba(255, 255, 255, 0.7);}

.form-btn { width: 30%; height: auto;  margin: 20px auto; }
.a-link { background-color: #F31257; color: #fff; font-weight:900; border-radius:50px;padding:0; border:3px solid #fff; box-shadow: 0px 2px 2px #dddbdb;}
.a-link.link-flex { align-items: center; display: flex; width: 100%; height: auto; justify-content: center; padding: 25px;}
.form-btn p { font-weight:900; font-size:1.5vw; position: relative; width: fit-content; padding: 0 0 0 60px; }
.form-btn p:before { content:'\f30b'; font-family: "Font Awesome 5 Free"; vertical-align: middle; position: absolute; left:0; background-size: contain; margin: 0;}
.form-btn a { text-decoration: none; color:#fff;}
.form-btn a:hover  { background: #F884A8; color:#F31257;}


footer { width: 100%; height: auto; margin: 100px 0 0 0; padding: 0; background: #1C54D5; color: #fff;}
footer ul { width: fit-content; display: flex; padding: 30px 0 0 0; margin: 0 auto;}
footer ul li { padding: 0 20px 0 20px; position: relative; margin: 0 20px 0 0;}
footer ul li a {text-decoration: none; color: #fff; }
footer ul li:before { content:'\f04b'; font-family: "Font Awesome 5 Free"; vertical-align: middle; color: #fff; position: absolute; left:0; background-size: contain; margin: 0; font-weight: 900; font-size: 1rem;}
footer ul li a:hover {text-decoration: none; color: #fff;}
address { font-style: normal; font-size: 1.4rem; text-align: center; padding: 20px 0 20px 0;}
}