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

/*** 解像度の幅が599px以下 ***************************/
@media screen and (max-width:599px){

.spnone { 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: 90%; max-width: 90%; 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: 80%; height: 90px; margin: 0 auto; }
.h-tit01b {background: url("../img/titlebg01b.png") no-repeat; background-size: contain; background-position:center bottom; width: 80%; height: 120px; margin: 0 auto; }
.h-tit02 {background: url("../img/titlebg02.png") no-repeat; background-size: contain; background-position:center bottom; width: 80%; height: 90px; margin: 0 auto; }
.h-tit02b {background: url("../img/titlebg02b.png") no-repeat; background-size: contain; background-position:center bottom; width: 80%; height: 120px; margin: 0 auto; }

.h-tit01 h2,.h-tit01b h2,.h-tit02 h2,.h-tit02b h2 { color: #1C54D5; font-size: 2.8rem; line-height: 4rem; 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: 120px; right: 5px;}
.pagetop img { width: 35%;}

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

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

 /*gasoline02--------------------*/
.gasoline02 { width: 100%; height:auto; margin: 80px auto; 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: 90%; margin: 50px auto;}
.ga02-01 h2 { color: #E31546; font-size: 3rem; line-height: 4rem;}
.ga02-01 h2 span {color: #000; font-size: 2rem;}
.ga02-02 { width: 80%; margin: 50px auto;}
.ga02-02 h2 { color: #000; font-size: 3rem; line-height: 4rem;}
.ga02-03 { width: 80%; margin: 50px auto;}
.ga02-03 h2 { color: #E31546; font-size: 3.2rem; line-height: 4.2rem;}
.ga02-03 h2 span.gatax01 {color: #000; font-size: 2rem; line-height: 3rem;}
.ga02-03 h2 span.gatax02 {color: #000; font-size: 1.4rem; line-height: 2.4rem;}

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

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

.ga03-02 { width: 100%; height: auto; padding: 50px 0 0 0;}
.ga03-eneos { width: 98%; border: 3px solid #1D54D5; border-radius: 40px; margin: 0 auto; padding: 0; text-align: center; background: #fff;}
.ga03-cosmo { width: 98%; border: 3px solid #1D54D5; border-radius: 40px; margin: 60px auto; 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: 2.5rem;}
.ga03-02 img { width: 60%; padding: 30px 0 10px 0;}
.ga03-02 p { color: #000; font-size: 2rem; line-height: 3rem; font-weight: 900; padding: 0 0 30px 0;}
.ga03-02 p span { color: #E31546;}

/*全国のサービスステーション検索*/
.ga03-03 { width: 100%; height: auto; margin: 40px auto;}
.ga03-03 h4 { font-size: 2.5rem; line-height: 3.5rem; 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: 3rem;}

.ga03-03 ul {  width: 100%; height: auto; margin: 0 auto;}
.ga03-03 ul li { width: 80%; background: #fff; font-weight: 500; border-radius: 20px; margin: 40px auto; padding: 0; box-shadow: 2px 2px 2px #ccc; text-align: left;}
.ga03-03 ul li img { width: 15%; padding: 0 30px 0 0;}
.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; margin: 100px auto;}
.ga04-01 { width: 94%; margin: 0 auto;}
.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: 4rem; line-height: 5rem; font-weight: 900; text-align: center;}
.ga04-01b h3 span { font-size: 2rem; line-height: 4rem; font-weight: 700;}
 
 
.ga04-02 { width: 94%; margin: 40px auto;}
.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:25%; left: 50%; width: 75%; transform: translate(-50%, -70%); font-size: 2.5rem; line-height: 5rem; font-weight: 900; text-align: center;}
.ga04-02b p.gatx01 { font-size: 1.8rem; line-height:2.8rem; font-weight: 700; position: absolute; top: 30%; left: 50%; width: 75%; transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }

.ga04-02b p.gatx02 { font-size: 1.5rem; line-height: 2.6rem; font-weight: 700; position: absolute; top: 50%; left: 50%; width: 75%; transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }

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

.gasoline05 ul li:after { position: absolute; content: ''; top: 100%; left: 60%; border: 40px solid transparent; border-top: 40px solid #1C54D5; width: 0; height: 0; margin:0 0 0 -80px;}
.gasoline05 .caution { font-size: 1.4rem; padding: 30px 0 0 0;}
.ga05 { width: fit-content; margin: 0 auto;}
.ga05 img {width: 55%; padding: 0 40px 0 0;}
.ga05 p {color: #E31546; font-size: 2.5rem; line-height: 4rem; font-weight: 900; padding: 20px 0 0 0;}

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

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

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

/*gasoline07----------------*/
.gasoline07 { width: 100%; height: auto; margin: 100px auto;}
.ga07 { width: 98%; height: auto; border:4px solid #1C54D5; border-radius: 40px; margin: 0; padding: 0;}
.ga07b { padding: 60px 20px 20px 20px; margin: 0;} 
.ga07b h3 { color: #1C54D5; font-size: 2.2rem; padding: 0 0 20px 0; font-weight: 900;}
.ga07b p { color: #1C54D5; font-size: 1.6rem; line-height: 2.6rem; 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: 20px; display: block;}
.gasoline08 dt { color: #1C54D5; display: flex; align-items: start; font-weight: 700; font-size: 1.8rem;column-gap: 24px; padding: 0 0 0 60px; 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: 30px 0 0 0; padding: 0 0 0 60px; 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: 30px auto; padding: 40px 0 50px 0;}

.ga09-01 { width: 98%; height: auto; border:4px solid #1C54D5; border-radius: 20px; margin: 0; padding: 0;}
.ga09-01b { padding: 80px 20px 80px 20px; margin: 0 auto; width: fit-content;} 
.ga09-02 { width: 80%; margin: -50px auto; background: #1C54D5; border-radius: 30px; padding: 20px;}
.ga09-02 h3 { color: #ffff; font-weight: 900; font-size: 2rem; line-height: 3rem; text-align: center;}
.ga09-01b p { font-size: 1.6rem; line-height: 3rem; padding: 30px 10px 0 10px; font-weight: 700;}



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

.form-btn { width: 90%; height: auto; margin: 20px auto; padding: 0; text-align: center; display: flex; justify-content: center; }
.a-link { background-color: #F31257; color: #fff; font-weight:900; border-radius:50px; padding:0; margin: 0 auto; border:3px solid #fff; box-shadow: 0px 2px 2px #dddbdb;}

.a-link.link-flex { align-items: center; display: flex; width: 90%; height: auto; justify-content: center; padding: 20px; margin: 0;}

.form-btn p { font-weight:900; font-size:2rem; position: relative; width: fit-content; padding: 0 0 0 25px; margin: 0;}
.form-btn p:before { content:'\f30b'; font-family: "Font Awesome 5 Free"; vertical-align: middle; position: absolute; left:0; background-size: contain; margin: 0; padding: 0;}
.form-btn a { text-decoration: none; color:#fff;}
.form-btn a:hover  { background: #f23a72; color:#fff;}

footer { width: 100%; height: auto; margin: 60px 0 0 0; padding: 0; background: #1C54D5; color: #fff;}
footer ul { width: fit-content; padding: 30px 0 0 0; margin: 0 auto;}
footer ul li { padding: 0 10px 0 20px; position: relative; margin: 0 10px 10px 0;font-size: 1.4rem; line-height: 3rem;}
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: 1.2rem; line-height: 3rem;}
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;}
}