/* CSS Document */

.PCOnly {
display:none !important;
}

html {
overflow-x:hidden;
}

body {
min-height:150vh;
font-family: 'nunito','Zen Maru Gothic', sans-serif;
color:#111111;
overflow-x:hidden;
line-height:1;
}

#HERO {
height:auto !important;
background-repeat:no-repeat !important;
padding-bottom:6% !important;
}

#HERO2 {
height:auto !important;
background-repeat:no-repeat !important;
padding-bottom:3% !important;
}

#HERO3 {
height:1000px;
background-repeat:no-repeat !important;
}

#HERO2 {
height:1039px;
}

@media screen and (max-width: 1000px) {

#HERO,
#HERO2,
#HERO3,
.hero {
height:auto;
padding-bottom:5%;
padding-top:5%;
}

}

#HERO #LOGO,
#HERO #LOGO *,
#HERO2 #LOGO,
#HERO2 #LOGO *,
#HERO3 #LOGO,
#HERO3 #LOGO *,
.hero #LOGO,
.hero #LOGO * {
max-width:195px;
}

#HERO #LOGO *,
#HERO2 #LOGO *,
#HERO3 #LOGO *,
.hero #LOGO * {
position:fixed;
top:17px;
left:17px;
z-index:1000;
width:195px;
transition:all .3s ease;
}

@media screen and (max-width: 1100px) {

#HERO #LOGO *,
#HERO2 #LOGO *,
#HERO3 #LOGO *,
.hero #LOGO * {
top:15px;
left:15px;
width:165px;
}

}

@media screen and (max-width: 550px) {

#HERO #LOGO *,
#HERO2 #LOGO *,
#HERO3 #LOGO *,
.hero #LOGO * {
top:10px;
left:10px;
width:130px;
}

}

@media screen and (max-width: 470px) {

#HERO #LOGO *,
#HERO2 #LOGO *,
#HERO3 #LOGO *,
.hero #LOGO * {
top:10px;
left:10px;
width:100px;
}

}


#HERO #LOGO_Light,
#HERO2 #LOGO_Light,
#HERO3 #LOGO_Light,
.hero #LOGO_Light {
position:fixed;
top:16px;
left:30px;
z-index:1000;
opacity:1;
display:none;
}

.cbp-af-header.cbp-af-header-shrink * {
visibility:hidden !important;
}

.cbp-af-header.cbp-af-header-shrink #LOGO * {
opacity:0 !important;
}

.cbp-af-header.cbp-af-header-shrink #LOGO_Light {
opacity:0;
display:none !important;
transition-delay:1s;
}

#HERO nav,
#HERO2 nav,
#HERO3 nav,
.hero nav {
padding:20px 30px 0 30px;
transition:all .3s ease;
z-index:999;
}

#HERO nav ul,
#HERO2 nav ul,
#HERO3 nav ul,
.hero nav ul {
display:flex;
justify-content:center;
gap:0 25px;
transition:all .3s ease;
}

#HERO nav ul li a,
#HERO2 nav ul li a,
#HERO3 nav ul li a,
.hero nav ul li a {
font-size:clamp(20px,6vw,22px);
font-weight:500;
color:#fff;
display:block;
padding:10px 10px 30px 10px;
background:url(./images/nav_normal.png) center bottom no-repeat;
transition:all .3s ease;
}

#HERO nav ul li.active a,
#HERO nav ul li a:hover,
#HERO2 nav ul li.active a,
#HERO2 nav ul li a:hover,
#HERO3 nav ul li.active a,
#HERO3 nav ul li:hover,
.hero nav ul li.active a,
.hero nav ul li:hover {
background:url(./images/nav_active.png) center bottom no-repeat;
}

#QAHERO nav ul li a {
font-size:clamp(20px,6vw,22px);
font-weight:500;
color:#111;
display:block;
padding:10px 10px 30px 10px;
background:url(./images/nav2_normal.png) center bottom no-repeat;
transition:all .3s ease;
}

#QAHERO nav ul li.active a,
#QAHERO nav ul li a:hover {
background:url(./images/nav2_active.png) center bottom no-repeat;
}

.cbp-af-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height:110px;
z-index: 99;
overflow: hidden;
transition:all .3s ease;
}

.cbp-af-header.cbp-af-header-shrink {
/* background:#2487c6; */
height:96px;
}

.cbp-af-header.cbp-af-header-shrink nav {
padding-top:15px !important;
}

.cbp-af-header.cbp-af-header-shrink nav li a {
padding-bottom:20px !important;
font-size:clamp(19px,5.5vw,20px) !important;
background-size:10px !important;
color:#fff;
}

.cbp-af-header.cbp-af-header-shrink li:hover a {

}


@media screen and (max-width: 1500px) {

#HERO nav ul,
#HERO2 nav ul,
#HERO3 nav ul {
gap:0 15px;
}

}

@media screen and (max-width: 1400px) {

#HERO nav ul,
#HERO2 nav ul,
#HERO3 nav ul {
gap:0 15px;
}

#HERO nav ul li a,
#HERO2 nav ul li a,
#HERO3 nav ul li a {
padding:10px 10px 30px 10px;
}

#HERO nav ul,
#HERO2 nav ul,
#HERO3 nav ul {
justify-content:start;
padding-left:180px;
}

}


#CATCH {
margin-bottom:5%;
}

#MAINCATCH {
text-align:center;
}

#MAINCATCH img {
max-width:94%;
}

#SUBCATCH {
text-align:center;
padding:18.5vw 0% 1.5vw 0%;
max-width:94%;
margin:0 auto;
}

#SUBCATCH img {
max-width:92%;
}

#SUBCATCH2 {
text-align:center;
padding:30px 5% 40px 5%;
}

@media screen and (max-width: 700px) {

#SUBCATCH2 {
text-align:center;
padding:3% 5% 40px 8%;
}

#SUBCATCH2 img {
max-width:70%;
}

}

#CATCHREMARKS {
text-align:center;
font-size:clamp(14px,3.5vw,16px);
font-weight:700;
line-height:1.51;
padding:0 5%;
}

#CATCHREMARKSSP {
margin:0 5%;
text-align:center;
padding:20px;
border:solid 2px #2e196d;
border-radius:20px;
}

#CATCHREMARKSSP legend {
color:#2e196d;
font-size:clamp(16px,4vw,18px);
padding:0 10px;
font-weight:700;
}

#CATCHREMARKSSP p {
color:#2e196d;
font-size:clamp(16px,4vw,18px);
font-weight:700;
line-height:1.51;
}

#HOMECARDS dl {
display:flex;
justify-content:center;
gap:0 1vw;
padding:6% 5% 0 5%;
}

@media screen and (max-width: 1000px) {

#HOMECARDS dl {
display:flex;
justify-content:center;
gap:0 1vw;
padding:6% 0 0 0;
}

}



#HOMEHEROCONTENTS {
display:flex;
justify-content:center;
align-items:normal;
gap:5vw 5vw;
padding:0 30px;
flex-wrap:wrap;
flex-direction:column-reverse;
}

#HOMEHEROCONTENTS section {
width:100%;
text-align:center;
}

#HOMEHEROCONTENTS section a img {
max-width:640px;
padding:0 0 4%;
}

#HOMEHEROCONTENTS #HOMECARDS {
width:100%;
}

#HOMEHEROCONTENTS .homeHeroText1 img {
width:960px;
max-width:86%;
padding:0 0 2%;
}

#HOMEHEROCONTENTS .homeHeroText2 img {
width:1060px;
max-width:90%;
padding:0 0 1%;
}

@media screen and (max-width: 1000px) {

#HOMEHEROCONTENTS {
display:flex;
justify-content:center;
align-items:normal;
gap:5vw 5vw;
padding:0 3%;
flex-wrap:wrap;
flex-direction:column-reverse;
}

#HOMEHEROCONTENTS section a img {
max-width:70%;
padding:3% 0 4%;
}

#HOMEHEROCONTENTS .homeHeroText1 img {
width:960px;
max-width:94%;
padding:0 0 3%;
}

#HOMEHEROCONTENTS .homeHeroText2 img {
width:1060px;
max-width:94%;
padding:0 0 0%;
}

}




#HERO,
#HERO2 {
background-size:50% !important;
}

@media screen and (max-width: 1100px) {

#HERO {
height:auto;
padding-bottom:13%;
padding-top:3%;
background:url(./images/hero/hero_sp2.jpg) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO:before {
background:url(./images/hero/hero_sp2.jpg) center top no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#HERO2 {
height:auto;
padding-bottom:3%;
padding-top:3%;
background:url(./images/hero/etc-card_sp.png) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO3 {
height:auto;
padding-bottom:5%;
padding-top:3%;
background:url(./images/hero/gasoline-card_sp1.jpg) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO2:before {
background:url(./images/hero/etc-card_sp.png) center top no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#HERO3:before {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
background:url(./images/hero/gasoline-card_sp1.jpg) center top no-repeat !important;
background-size:cover !important;
}

}

@media screen and (max-width: 800px) {

#HERO {
height:auto;
padding-bottom:13%;
padding-top:3%;
background:url(./images/hero/hero_sp2.jpg) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO:before {
background:url(./images/hero/hero_sp2.jpg) center top no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#HERO2 {
height:auto;
padding-bottom:13%;
padding-top:3%;
background:url(./images/hero/etc-card_sp.png) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO2:before {
background:url(./images/hero/etc-card_sp.png) center top no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#HERO3 {
height:auto;
padding-bottom:13%;
padding-top:3%;
background:url(./images/hero/gasoline-card_sp1.jpg) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#HERO3:before {
background:url(./images/hero/gasoline-card_sp1.jpg) center top no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#SUBCATCH {
padding:28% 0 2% 0;
margin-top:-2%;
}

#MAINCATCH {
padding:0 0;
}

.homeHeroText2 {
padding:0 0 3% 0;
}

.homeHeroText2 img {
max-width:92%;
}

#CATCHREMARKS {
text-align:left;
font-size:clamp(14px,3.5vw,15px);
font-weight:500;
line-height:1.51;
background:rgba(255,255,255,0.3);
color:#111111;
margin:0 5%;
padding:10px;
border-radius:10px;
}

#HOMECARDS dl {
padding:6% 0% 0 0%;
}

}


@media screen and (max-width: 660px) {

#CATCHREMARKSSP {
margin:0 5%;
text-align:center;
padding:10px 15px;
border:solid 2px #2e196d;
border-radius:20px;
}

#CATCHREMARKSSP legend {
color:#2e196d;
font-size:clamp(16px,4vw,18px);
padding:0 10px;
font-weight:700;
}

#CATCHREMARKSSP p {
color:#2e196d;
font-size:3vw;
font-weight:700;
line-height:1.51;
}

}


@media screen and (max-width: 480px) {

#HERO {
height:auto;
padding-bottom:12%;
padding-top:5%;
background:url(./images/hero/hero_sp2_480.jpg) center top no-repeat !important;
background-size:cover !important;
}

#HERO2 {
height:auto;
padding-bottom:8%;
padding-top:5%;
background:url(./images/hero/etc-card_sp.png) center top no-repeat !important;
background-size:cover !important;
}

#SUBCATCH {
padding:130px 3% 2% 3%;
}

#MAINCATCH {
padding:0 1% 1% 1%;
}

}


/* アニメーション発火前のスタイル */
[data-aos="fade-out"] {
  opacity: 1;
}
/* アニメーション発火時のスタイル */
[data-aos="fade-out"].aos-animate {
  opacity: 0;
}


#HOMECARDS {
padding:0 3%;
position:relative;
}

#HOMECARDS section {
display:none;
}

#HOMECARDS ul {
display:flex;
justify-content:center;
gap:0 1vw;
}

#HOMECARDS ul li {
width:40%;
}

#ETCCARDS {
padding:200px 30px 40px 30px;
}

#ETCCARDS ul {
display:flex;
justify-content:center;
gap:0 30px;
}

#SIDEMEMBERS {
position:fixed;
right:0;
top:180px;
}

.homeDouble {
text-align:center;
padding:7% 0 0 0;
}

.homeDouble img {
width:466px;
max-width:60%;
}

.homeDescription {
padding:5% 30px 30px 30px;
}

.homeDescription p {
text-align:center;
font-size:clamp(1rem,3vw,4vw);
font-weight:700;
line-height:1.61;
}

@media screen and (max-width: 820px) {

.homeDescription {
padding:9% 4% 7% 4%;
}

.homeDescription p br {
display:block;
}

.homeDescription p {
font-size:4.5vw;
line-height:1.51;
}

}


.homeRemarks {
padding:0 30px;
}

.homeRemarks fieldset {
width:640px;
margin:0 auto;
text-align:center;
border:solid 2px #ff2200;
border-radius:25px;
padding:5px 15px 13px 15px;
}

.homeRemarks fieldset legend {
color:#ff2200;
font-size:clamp(1rem,2rem,6vw);
font-weight:500;
padding:0 5px 6px;
}

.homeRemarks fieldset p {
font-size:clamp(13px,4vw,18px);
font-weight:700;
line-height:1.41;
color:#ff2200;
}


.homeLogoVector {
text-align:center;
padding:12% 30px 5% 30px;
}

.homeLogoVector img {
width:150px;
max-width:50%;
}

.homeMyNameIs {
padding:0 30px 10% 30px;
text-align:center;
}

.homeMyNameIs h1 {
text-align:center;
font-size:clamp(14px,5vw,24px);
font-weight:700;
line-height:1.51;
}


.homeRecommend {
padding:100px 30px 130px 30px;
background:url(./images/bg_triangle.png) center -1px no-repeat #fccc00;
background-size:66px;
text-align:center;
}

@media screen and (max-width: 600px) {

.homeRecommend {
padding:70px 4% 110px 4%;
background:url(./images/bg_triangle.png) center -1px no-repeat #fccc00;
background-size:50px;
text-align:center;
}

}

.homeRecommend h2 img {
max-width:80%;
}

.homeRecommend ul {
padding:25px 0 45px 0;
}

.homeRecommend ul li {
margin-bottom:6px;
}

.homeRecommend h3 {
margin-bottom:10px;
}

.homeRecommend h3 img {
max-width:80%;
}


.homeFeature {
padding:130px 20px;
border-radius:60px;
margin:-80px 0 0 0;
background:#fff;
text-align:center;
}

.homeFeature h2 {
font-size:clamp(1rem,4vw,2.6rem);
font-weight:700;
color:#2e196e;
margin-bottom:115px;
}

.homeFeature div {
width:1020px;
padding:130px 4% 60px 4%;
background:#bfe4f3;
border-radius:40px;
margin:0 auto;
}

.homeFeature div ul {
margin-top:-200px;
margin-bottom:30px;
display:flex;
gap:0 20px;
justify-content:center;
}

.homeFeature div ul li {
width:270px;
}

.homeFeature section {
background:#fff;
border-radius:30px;
padding:30px;
display:flex;
flex-wrap:wrap;
gap:30px 0;
}

.homeFeature section fieldset {
border:solid 2px #2e196d;
border-radius:20px;
padding:20px;
width:100%;
}

.homeFeature section fieldset legend {
font-size:clamp(1.2rem,5vw,3rem);
font-weight:700;
padding:0 10px;
}

.homeFeature section fieldset h3 {
font-size:clamp(1rem,4vw,1.8rem);
font-weight:700;
color:#fff;
display:inline-block;
padding:13px 30px 8px 30px;
background:#2e196d;
border-radius:100px;
margin-bottom:20px;
}

.homeFeature section fieldset p {
text-align:left;
font-size:clamp(1rem,3.5vw,20px);
font-weight:500;
line-height:1.71;
}

@media screen and (max-width: 830px) {

.homeFeature {
padding:130px 2%;
border-radius:50px;
margin:-80px 0 0 0;
background:#fff;
text-align:center;
}

.homeFeature div {
width:100%;
padding:130px 30px 30px 30px;
background:#bfe4f3;
border-radius:30px;
margin:0 auto;
}

.homeFeature div ul li {
width:40%;
}

.homeFeature section {
background:#fff;
border-radius:30px;
padding:5%;
display:flex;
flex-wrap:wrap;
gap:30px 0;
}

.homeFeature section fieldset h3 {
font-size:4vw;
font-weight:700;
color:#fff;
display:inline-block;
padding:12px 30px 12px 30px;
background:#2e196d;
border-radius:100px;
margin-bottom:20px;
}

.homeFeature section fieldset p {
text-align:left;
font-size:3vw;
font-weight:500;
line-height:1.71;
}

}


@media screen and (max-width: 550px) {

#ETCCARDS {
padding:150px 30px 40px 30px;
}

#ETCCARDS ul {
display:flex;
justify-content:center;
gap:0 3vw;
}

.homeFeature {
padding:70px 4% 50px;
border-radius:40px;
}

.homeFeature h2 {
font-size:5vw;
margin-bottom:100px;
}

.homeFeature div {
padding:130px 5% 20px 5%;
border-radius:25px;
}

.homeFeature div ul li {
width:40%;
}

.homeFeature section fieldset {
padding:15px;
}

.homeFeature section {
border-radius:25px;
padding:15px;
gap:20px 0;
}

.homeFeature section fieldset h3 {
font-size:4vw;
padding:12px 30px 12px 30px;
margin-bottom:15px;
}

.homeFeature section fieldset p {
font-size:3.5vw;
line-height:1.61;
}

}


@media screen and (max-width: 430px) {

.homeFeature {
padding:80px 3% 50px;
border-radius:50px;
}

.homeFeature h2 {
font-size:5vw;
margin-bottom:15%;
}

.homeFeature div {
padding:130px 20px 20px 20px;
border-radius:25px;
}

.homeFeature div ul {
margin-top:-160px;
margin-bottom:30px;
display:flex;
gap:0 15px;
justify-content:center;
}

.homeFeature div ul li {
width:40%;
}

.homeFeature section {
border-radius:25px;
padding:15px;
gap:20px 0;
}

.homeFeature section fieldset h3 {
font-size:4vw;
padding:11px 30px 11px 30px;
margin-bottom:15px;
}

.homeFeature section fieldset p {
font-size:3.5vw;
line-height:1.61;
}

}


.homeToETC {
padding:0 30px;
text-align:center;
}

.homeToETC h2 {
font-size:clamp(1rem,4vw,2.2rem);
font-weight:700;
line-height:1.51;
margin-bottom:30px;
}

.homeToETC h3 {
font-size:clamp(1rem,3vw,1.25rem);
font-weight:500;
line-height:1.71;
margin-bottom:50px;
}

.homeToETC h4 {

}

.homeToETC h4 a {
display:inline-block;
background:#e71f19;
border:solid 5px #f72f29;
border-radius:200px;
padding:35px 60px 26px;
box-shadow:0 0 3px rgba(0,0,0,0.5);
transition:all .3s ease;
position:relative;
overflow:hidden;
}

.homeToETC h4 a:before{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  width: 0;
  display: block;
  background: #dc110e;
  z-index: 1;
  transition: .2s;
  border-radius:200px;
  opacity:0;
}

.homeToETC h4 a:hover:before{
  width: 100%;
  opacity:1;
}

.homeToETC h4 a strong {
color:#fff;
font-size:clamp(1.2rem,6vw,3rem);
font-weight:700;
display:block;
position:relative;
z-index:2;
}

.homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.6rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 50px 30px;
line-height:1.81;
}

.copyright {
padding:30px 0 30px 0;
text-align:center;
margin:30px 30px 0 30px;
}

.copyright p {
font-size:clamp(0.7rem,3vw,0.85rem);
font-weight:500;
color:#666;
}

@media screen and (max-width: 780px) {

.homeToETC {
padding:0 4%;
}

.homeToETC h2 {
font-size:4vw;
font-weight:700;
line-height:1.51;
margin-bottom:5%;
}

.homeToETC h3 {
font-size:3vw;
font-weight:500;
line-height:1.71;
margin-bottom:5%;
}

.homeToETC h4 a {
padding:30px 40px 21px;
}

.homeToETC h4 a strong {
font-size:5vw;
}

.homeToETC h4 a small {
color:#fff;
font-size:3.5vw;
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.homeToETC p {
font-size:2vw;
font-weight:500;
line-height:1.71;
padding:5% 5% 5% 5%;
}

.homeToETC p br {
display:none;
}

.copyright {
padding:30px 0 30px 0;
text-align:center;
margin:30px 4% 0 4%;
}

.copyright p {
font-size:2.5vw;
font-weight:500;
color:#666;
}

}





@media screen and (max-width: 480px) {

.homeToETC h4 a {
padding:17px 30px 13px;
line-height:1.51;
}

.homeToETC h4 a strong {
font-size:5.5vw;
}

.homeToETC h4 a small {
color:#fff;
font-size:3.5vw;
font-weight:500;
display:block;
position:relative;
z-index:2;
}

}




#ETCCARDWARIBIKI {
text-align:center;
padding:10px 3% 40px 3%;
max-width:1200px;
margin:0 auto;
}

#ETCCARDWARIBIKI ul {
display:flex;
justify-content:center;
gap:19px 19px;
flex-wrap:wrap;
}

#ETCCARDWARIBIKI ul li {
display:flex;
justify-content:start;
border:solid 1px #c0c0c0;
width:calc(50% - 10px);
border-radius:20px;
overflow:hidden;
}

#ETCCARDWARIBIKI ul li div img {
max-width:270px;
}

#ETCCARDWARIBIKI ul li section {
padding:15px 15px;
}

#ETCCARDWARIBIKI ul li section h2 {
font-size:clamp(20px,6vw,32px);
font-weight:700;
line-height:1.1;
text-align:left;
margin-bottom:13px;
}

#ETCCARDWARIBIKI ul li section h2 strong {
font-size:clamp(24px,7vw,36px);
}

#ETCCARDWARIBIKI ul li section h2 small {
font-size:clamp(16px,4.5vw,18px);
}

#ETCCARDWARIBIKI ul li:nth-of-type(1) section h2 {
color:#5822b2;
}

#ETCCARDWARIBIKI ul li:nth-of-type(2) section h2 {
color:#ff4800;
}

#ETCCARDWARIBIKI ul li:nth-of-type(3) section h2 {
color:#48aa13;
}

#ETCCARDWARIBIKI ul li:nth-of-type(4) section h2 {
color:#06afce;
}

#ETCCARDWARIBIKI ul li section p {
font-size:clamp(14px,3.5vw,15px);
font-weight:700;
line-height:1.41;
text-align:left;
}


@media screen and (max-width: 1150px) {

#ETCCARDWARIBIKI {
text-align:center;
padding:10px 3% 40px 3%;
max-width:800px;
margin:0 auto;
}

#ETCCARDWARIBIKI ul {
display:flex;
justify-content:center;
gap:29px 29px;
flex-wrap:wrap;
align-items:start;
}

#ETCCARDWARIBIKI ul li {
display:flex;
justify-content:start;
border:solid 1px #c0c0c0;
width:calc(50% - 15px);
flex-wrap:wrap;
align-items:start;
border-radius:20px;
overflow:hidden;
}

#ETCCARDWARIBIKI ul li div {
width:100%;
}

#ETCCARDWARIBIKI ul li div img {
width:100%;
max-width:100%;
}

}


@media screen and (max-width: 600px) {

#ETCCARDWARIBIKI {
text-align:center;
padding:10px 3% 40px 3%;
max-width:94%;
margin:0 auto;
}

#ETCCARDWARIBIKI ul {
display:flex;
justify-content:center;
gap:15px 15px;
flex-wrap:wrap;
align-items:start;
}

#ETCCARDWARIBIKI ul li {
display:flex;
justify-content:start;
border:solid 1px #c0c0c0;
width:100%;
flex-wrap:wrap;
align-items:start;
border-radius:20px;
overflow:hidden;
}

#ETCCARDWARIBIKI ul li div {
width:100%;
}

#ETCCARDWARIBIKI ul li div img {
width:100%;
}

#ETCCARDWARIBIKI ul li section {
width:100%;
padding:20px;
}

#ETCCARDWARIBIKI ul li section h2 {
font-size:8vw;
font-weight:700;
line-height:1.05;
text-align:center;
margin-bottom:13px;
}

#ETCCARDWARIBIKI ul li section h2 strong {
font-size:10vw;
}

#ETCCARDWARIBIKI ul li section h2 small {
font-size:5vw;
}

#ETCCARDWARIBIKI ul li section p {
font-size:3vw;
font-weight:700;
line-height:1.41;
text-align:center;
}

}


#ETCCARDTEXT1 {
padding:0 3% 7% 3%;
}

#ETCCARDTEXT1 p {
text-align:center;
font-size:clamp(14px,3.5vw,18px);
font-weight:500;
line-height:1.51;
}


#ETCCARDHEADING2 {
padding:50px 4% 30px 4%;
overflow:hidden;
}

#ETCCARDHEADING2 h2 {
text-align:center;
font-family:'Zen Maru Gothic', sans-serif;
font-size:clamp(18px,6.5vw,24px);
font-weight:700;
line-height:1.51;
}

#ETCCARDHEADING2 dl {
display:flex;
justify-content:center;
gap:0 20px;
padding:30px 3% 40px 3%;
}

#ETCCARDHEADING2 dl dt {
width:300px;
}

#ETCCARDHEADING2 dl dt p {
text-align:center;
padding:18px 0 0 0;
font-size:clamp(18px,5vw,20px);
font-weight:700;
}

@media screen and (max-width: 600px) {

#ETCCARDHEADING2 dl dt p {
font-size:4vw;
}

}

@media screen and (max-width: 500px) {

#ETCCARDHEADING2 dl {
gap:0 15px;
padding:5% 3% 7% 3%;
}

}


.etcIntro {
width:1400px;
max-width:100%;
margin:0 auto;
position:relative;
}

#ETCINTROKY cite {
position:absolute;
top:0;
right:0;
display:inline-block;
padding:15px 15px 10px 25px;
background:rgba(255,255,255,0.2);
font-size:clamp(18px,5vw,22px);
font-weight:700;
color:#fff;
font-style:normal;
border-radius:0 0 0 20px;
}

#ETCINTROUC cite {
position:absolute;
top:0;
left:0;
display:inline-block;
padding:15px 25px 10px 15px;
background:rgba(255,255,255,0.2);
font-size:clamp(18px,5vw,22px);
font-weight:700;
color:#fff;
font-style:normal;
border-radius:0 0 20px 0;
}

.etcIntro div {
display:flex;
justify-content:center;
gap:0 40px;
padding:80px 40px 40px 40px;
}

.etcIntro dl dd {
text-align:center;
padding:20px 0 0 0;
font-size:clamp(16px,3.5vw,18px);
font-weight:700;
text-shadow:
            2px 2px 2px #fff, -2px -2px 2px #fff,
           -2px 2px 2px #fff,  2px -2px 2px #fff,
            2px 0px 2px #fff, -2px -0px 2px #fff,
            0px 2px 2px #fff,  0px -2px 2px #fff;
}

.etcIntro section ul {
display:flex;
justify-content:start;
gap:0 15px;
}

.etcIntro section ul li {
padding:12px 20px 7px;
border-radius:100px;
font-size:clamp(18px,4.5vw,20px);
font-weight:700;
color:#fff;
}

@media screen and (max-width: 600px) {

.etcIntro section ul li {
padding:7px 15px 7px;
}

}

.etcIntro section h2 {
padding:30px 0 30px 0;
color:#fff;
font-size:clamp(36px,8vw,44px);
font-weight:700;
line-height:1.31;
text-shadow:
            2px 2px 2px #1760d2, -2px -2px 2px #1760d2,
           -2px 2px 2px #1760d2,  2px -2px 2px #1760d2,
            2px 0px 2px #1760d2, -2px -0px 2px #1760d2,
            0px 2px 2px #1760d2,  0px -2px 2px #1760d2;
}

.etcIntro section h3 a {
display:inline-block;
padding:12px 20px 7px;
border-radius:100px;
font-size:clamp(24px,5.5vw,30px);
font-weight:700;
color:#fff;
border:solid 2px #fff;
transition:all .3s ease;
position:relative;
overflow:hidden;
}

@media screen and (max-width: 600px) {

.etcIntro section h3 a {
padding:10px 20px 10px;
font-size:8vw;
}

}

.etcIntro section h3 a span {
position:relative;
z-index:2;
}

#ETCINTROKY section h3 a {
background:#e71f19;
}

#ETCINTROKY section h3 a:before{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  width: 0;
  display: block;
  background: #dc110e;
  z-index: 1;
  transition: .2s;
  border-radius:200px;
  opacity:0;
}

#ETCINTROKY section h3 a:hover:before{
  width: 100%;
  opacity:1;
}

#ETCINTROKY section ul li {
background:#1760d2;
border:solid 2px #073bbf;
}


#ETCINTROKY {
background:#4c9de8;
}

#ETCINTROKY dl dd {
color:#1760d2;
}


#ETCINTROUC section h2 {
padding:30px 0 30px 0;
color:#fff;
font-size:clamp(36px,8vw,44px);
font-weight:700;
line-height:1.31;
text-shadow:
            2px 2px 2px #f61b32, -2px -2px 2px #f61b32,
           -2px 2px 2px #f61b32,  2px -2px 2px #f61b32,
            2px 0px 2px #f61b32, -2px -0px 2px #f61b32,
            0px 2px 2px #f61b32,  0px -2px 2px #f61b32;
}

#ETCINTROUC div {
flex-direction: row-reverse;
}

#ETCINTROUC section h3 {
text-align:right;
}

#ETCINTROUC section h3 a {
background:#0971c9;
}

#ETCINTROUC section h3 a:before{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  width: 0;
  display: block;
  background: #0869bb;
  z-index: 1;
  transition: .2s;
  border-radius:200px;
  opacity:0;
}

#ETCINTROUC section h3 a:hover:before{
  width: 100%;
  opacity:1;
}

#ETCINTROUC section ul li {
background:#f61b32;
border:solid 2px #ce0a23;
}


#ETCINTROUC {
background:#fd708e;
}

#ETCINTROUC dl dd {
color:#e71f19;
}


.etcBar1 {
width:1400px;
max-width:100%;
margin:0 auto;
font-size:0;
}

.etcBar1 img {
vertical-align:top;
}

.etcArrow1 {
width:1400px;
max-width:100%;
margin:0 auto;
font-size:0;
}

@media screen and (max-width: 1100px) {

.etcIntro {
}

.etcIntro div {
display:flex;
justify-content:center;
gap:40px 40px;
padding:80px 45px 45px 45px;
flex-wrap:wrap;
}

.etcIntro div dl {
width:100%;
text-align:center;
}

.etcIntro section {
text-align:center;
}

.etcIntro section ul {
justify-content:center;
}

#ETCINTROUC section h3 {
text-align:center;
}

}


@media screen and (max-width: 700px) {

.etcIntro div {
padding:80px 3% 45px 3%;
}

.etcIntro section h2,
#ETCINTROUC section h2 {
font-size:6vw;
}

.etcIntro dl dd {
font-size:4vw;
}

.etcIntro dl dt img {
max-width:90%;
}

#ETCINTROKY cite {
position:absolute;
top:0;
right:0;
display:inline-block;
padding:12px 15px 12px 25px;
background:rgba(255,255,255,0.2);
font-size:5vw;
font-weight:700;
color:#fff;
font-style:normal;
border-radius:0 0 0 20px;
}

#ETCINTROUC cite {
position:absolute;
top:0;
left:0;
display:inline-block;
padding:12px 25px 12px 15px;
background:rgba(255,255,255,0.2);
font-size:5vw;
font-weight:700;
color:#fff;
font-style:normal;
border-radius:0 0 20px 0;
}

}


@media screen and (max-width: 530px) {

.etcIntro section ul {
flex-wrap:wrap;
gap:10px 10px;
}

.etcIntro section ul li {
font-size:4vw;
}

.etcIntro section h3 a {
font-size:5vw;
}

}



.etcContent {
width:1400px;
max-width:100%;
margin:0 auto;
background:#4c9de8;
padding:50px;
text-align:center;
}

#ETCCONTENTUC {
background:#fd708e;
}

.etcContent h2 {
padding:0 0 20px;
color:#fff;
background:#4c9de8;
font-size:clamp(40px,9vw,50px);
font-weight:700;
line-height:1.31;
text-align:center;
}

#ETCCONTENTUC h2 {
background:#fd708e;
}

.etcContent h2 br {
display:none;
}

#ETCCONTENTKY h2,
#ETCCONTENTKY2 h2 {
text-shadow:
            2px 2px 2px #1760d2, -2px -2px 2px #1760d2,
           -2px 2px 2px #1760d2,  2px -2px 2px #1760d2,
            2px 0px 2px #1760d2, -2px -0px 2px #1760d2,
            0px 2px 2px #1760d2,  0px -2px 2px #1760d2;
}

#ETCCONTENTUC h2 {
text-shadow:
            2px 2px 2px #f61b32, -2px -2px 2px #f61b32,
           -2px 2px 2px #f61b32,  2px -2px 2px #f61b32,
            2px 0px 2px #f61b32, -2px -0px 2px #f61b32,
            0px 2px 2px #f61b32,  0px -2px 2px #f61b32;
}

.etcContent div {
padding:60px 30px;
border-radius:50px;
background:#fff;
}

.etcContent div h3 {
font-size:clamp(30px,7vw,36px);
font-weight:700;
line-height:1.31;
}

.etcContent div h3 br {
display:none;
}

.etcContent dl {
padding:20px 0 40px;
display:flex;
justify-content:center;
gap:0 20px;
}

.etcContent dl dd {
padding:13px 20px 8px;
border-radius:100px;
font-size:clamp(16px,4vw,18px);
font-weight:700;
color:#fff;
}

#ETCCONTENTKY dl dd,
#ETCCONTENTKY2 dl dd {
background:#4c9de8;
border:solid 2px #1783e6;
}

#ETCCONTENTUC dl dd {
background:#fd708e;
border:solid 2px #f61b32;
}

.etcContent section {
display:flex;
justify-content:center;
gap:0 30px;
text-align:left;
}

.etcContent section main {
max-width:600px;
}

.etcContent section h4 {
text-align:left;
font-size:clamp(23px,6vw,27px);
font-weight:700;
line-height:1.51;
margin-bottom:25px;
}

.etcContent section h4 small {
text-align:left;
font-size:clamp(16px,4vw,18px);
font-weight:700;
line-height:1.51;
margin-top:15px;
margin-bottom:25px;
color:#111111;
display:block;
}

.etcContent section h4 small i {
font-style:normal;
display:inline-block;
margin-bottom:5px;
}

.etcContent section h5 {
display:inline-block;
padding:23px 13px 15px 13px;
border:solid 3px #ff3300;
font-size:clamp(23px,6vw,27px);
font-weight:700;
line-height:1.41;
color:#ff3300;
margin:0 10px 10px 0;
}

.etcContent section h5 strong {
font-size:clamp(26px,8vw,36px);
}

.etcContent section h5 small {
font-size:clamp(18px,4.5vw,24px);
margin-left:3px;
}

.etcContent section h5:not(:last-child) {
margin-right:10px;
}

.etcContent section ul {
clear:both;
padding:7px 0 0 0;
}

.etcContent section ul li {
font-size:clamp(13px,3vw,14px);
font-weight:700;
margin-bottom:3px;
line-height:1.31;
}

@media screen and (max-width: 700px) {

.etcContent section ul li {
font-size:3.5vw;
font-weight:700;
margin-bottom:6px;
line-height:1.51;
}

}

.etcContent h6 {
padding:50px 0 70px;
text-align:center;
}

.etcContent h6 a {
display:inline-block;
padding:13px 25px 7px;
font-size:clamp(26px,8vw,32px);
font-weight:700;
color:#fff;
border-radius:100px;
position:relative;
overflow:hidden;
}

.etcContent h6 a span {
position:relative;
z-index:10;
}

#ETCCONTENTKY h6 a,
#ETCCONTENTKY2 h6 a,
#ETCCONTENTUC h6 a {
background:#e71f19;
border:solid 2px #ce0a23;
}

#ETCCONTENTKY h6 a:before,
#ETCCONTENTKY2 h6 a:before,
#ETCCONTENTUC h6 a:before {
  content: "";
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  width: 0;
  display: block;
  background: #dc110e;
  z-index: 1;
  transition: .2s;
  border-radius:200px;
  opacity:0;
}

#ETCCONTENTKY h6 a:hover:before,
#ETCCONTENTKY2 h6 a:hover:before,
#ETCCONTENTUC h6 a:hover:before {
  width: 100%;
  opacity:1;
}

.etcContent p {
font-size:clamp(16px,4.5vw,18px);
font-weight:500;
line-height:1.31;
}

.etcContent p br {
display:none;
}

.etcContent cite {
padding:30px 0 0 0;
display:flex;
justify-content:center;
gap:0 20px;
}

.etcContent cite img {
width:calc(50% - 10px);
}


#ETCCONTENTKY section h4,
#ETCCONTENTKY2 section h4 {
color:#0971c9;
}

#ETCCONTENTUC section h4 {
color:#f61b32;
}


@media screen and (max-width: 1100px) {

.etcContent h2 br {
display:block;
}

.etcContent section {
display:flex;
justify-content:center;
gap:30px 30px;
text-align:center;
flex-wrap:wrap;
}

.etcContent section main {
width:100%;
}

.etcContent section main h4 {
text-align:center;
}

}

@media screen and (max-width: 1000px) {

.etcContent {
padding:50px 30px;
}

}

@media screen and (max-width: 900px) {

.etcContent p {
font-size:clamp(18px,4.5vw,20px);
font-weight:700;
line-height:1.51;
}

.etcContent p br {
display:block;
}

}

@media screen and (max-width: 800px) {

.etcContent div h3 br {
display:block;
}

.etcContent cite {
padding:30px 0 0 0;
display:flex;
justify-content:center;
gap:20px 20px;
flex-wrap:wrap;
}

.etcContent cite img {
width:100%;
max-width:500px;
}

}

@media screen and (max-width: 650px) {

.etcContent {
padding:40px 4%;
}

.etcContent div {
padding:40px 5%;
border-radius:30px;
}

.etcContent h2 {
font-size:7vw;
}

.etcContent div h3 {
font-size:6vw;
}

.etcContent dl {
gap:0 15px;
padding:20px 0 30px;
}

.etcContent dl dd {
padding:7px 15px 7px;
border-radius:100px;
font-size:3vw;
}

.etcContent section h4 {
font-size:4vw;
}

.etcContent p {
font-size:4vw;
}

.etcContent section h4 small {
font-size:3.5vw;
line-height:1.39;
}

}


@media screen and (max-width: 530px) {

.etcContent section h5 {
font-size:6vw;
line-height:1.1;
padding:8px 15px 8px;
width:100%;
}

.etcContent section h5 strong {
font-size:8vw;
}

.etcContent section h5 small {
font-size:4vw;
}

.etcContent section h5:not(:last-child) {
margin-right:0;
margin-bottom:10px;
}

.etcContent h6 {
padding:30px 0 50px;
text-align:center;
}

.etcContent h6 a {
display:inline-block;
padding:10px 22px 10px;
font-size:7vw;
font-weight:700;
color:#fff;
border-radius:100px;
position:relative;
overflow:hidden;
}

}


.afterContact {
width:1400px;
max-width:100%;
margin:60px auto 30px;
text-align:center;
padding:10px;
background:url(./images/bg_triangle.png) center -1px no-repeat #0070c0;
background-size:40px;
}

.afterContact h2 {
color:#fff;
font-size:clamp(30px,7vw,36px);
font-weight:600;
padding:50px 30px 20px 30px;
line-height:1.41;
}

.afterContact p {
color:#fff;
font-size:clamp(18px,5vw,20px);
font-weight:500;
line-height:1.41;
padding:0 30px 20px 30px;
}

.afterContact h3 {
color:#fff;
font-size:clamp(36px,7vw,39px);
font-weight:500;
padding:0 30px 30px 30px;
line-height:1.41;
}

.afterContact h3 a {
font-size:clamp(41px,8vw,46px);
}

.afterContact h3 a:hover {
text-decoration:underline;
}

@media screen and (max-width: 650px) {

.afterContact h2 {
font-size:5.5vw;
font-weight:600;
padding:50px 3% 20px 3%;
line-height:1.41;
}

.afterContact p {
font-size:3.5vw;
line-height:1.41;
padding:0 30px 20px 30px;
}

.afterContact p span {
display:none;
}

.afterContact h3 {
font-size:7vw;
font-weight:500;
padding:0 30px 30px 30px;
line-height:1.41;
}

.afterContact h3 a {
font-size:8vw;
}

}


.etcDocument {
padding:40px 0 50px 0;
width:1400px;
max-width:100%;
margin:0 auto;
}

.etcDocument fieldset {
border:solid 2px #0070c0;
text-align:center;
}

@media screen and (max-width: 1450px) {

.etcDocument fieldset {
border:solid 2px #fff;
}

}

.etcDocument fieldset legend {
padding:0 10px;
}

.etcDocument fieldset legend img {
width:70px;
}

.etcDocument fieldset h2 {
padding:40px 30px 10px 30px;
font-size:clamp(30px,7vw,36px);
font-weight:600;
}

.etcDocument fieldset section {
background:#ccecff;
border:solid 15px #fff;
border-radius:30px;
padding:40px 30px 0 30px;
}

.etcDocument fieldset section h3 {
font-size:clamp(32px,8vw,36px);
font-weight:700;
margin-bottom:40px;
}

.etcDocument fieldset section h3 strong {
border-bottom:solid 2px #ff0000;
}

.etcDocument fieldset section dl {

}

.etcDocument fieldset section dl dt {
font-size:clamp(24px,6vw,26px);
font-weight:700;
color:#0070c0;
}

.etcDocument fieldset section dl dd {
font-size:clamp(17px,5vw,19px);
font-weight:500;
line-height:1.51;
padding:5px 0 30px 0;
}

@media screen and (max-width: 700px) {

.etcDocument fieldset h2 {
padding:40px 3% 10px 3%;
font-size:5.5vw;
}

.etcDocument fieldset section {
padding:30px 4% 0 4%;
}

.etcDocument fieldset section h3 {
font-size:5vw;
margin-bottom:40px;
}

.etcDocument fieldset section dl dt {
font-size:4.5vw;
}

.etcDocument fieldset section dl dd {
font-size:3.5vw;
padding:5px 0 30px 0;
}

}


@media screen and (max-width: 380px) {

.etcDocument fieldset section {
padding:30px 3% 0 3%;
}

}


.etcFlow {
width:1400px;
max-width:94%;
margin:0 auto;
text-align:center;
padding:40px 0 50px;
}

.etcFlow h2 {

}

.etcFlow h2 strong {
display:inline-block;
padding:18px 35px 10px;
background:#ffc000;
border-radius:100px;
font-size:clamp(32px,7vw,38px);
font-weight:700;
margin-bottom:50px;
}

.etcFlow ol {
width:100%;
margin:0 auto;
}

.etcFlow ol li {
margin-bottom:20px;
}

.etcFlow ol li img {
width:60px;
}

.etcFlow h4 {
margin-bottom:30px;
}

.etcFlow ol li h3 {
font-size:clamp(30px,6vw,34px);
font-weight:700;
}

.etcFlow ol li section {
border:solid 5px #c0c0c0;
padding:35px 30px 30px 30px;
}

.etcFlow ol li:nth-of-type(1) section,
.etcFlow ol li:nth-of-type(3) section {
border-color:#0070c0;
}

.etcFlow ol li:nth-of-type(2) section,
.etcFlow ol li:nth-of-type(4) section {
border-color:#00b050;
}

.etcFlow ol li:nth-of-type(5) section {
border-color:#0070c0;
background:#66ffff;
}

.etcFlow ol li section img {
width:80px;
margin:0 10px;
}

.etcFlow li section h4 img {
width:230px;
}

.etcFlow ol li p {
font-size:clamp(18px,4vw,20px);
font-weight:700;
padding:15px 0 0 0;
line-height:1.51;
}

@media screen and (max-width: 700px) {

.etcFlow h2 strong {
font-size:6vw;
padding:12px 25px 12px;
margin-bottom:7%;
}

.etcFlow ol li {
margin-bottom:10px;
}

.etcFlow ol li section {
padding:20px 20px 20px 20px;
}

.etcFlow ol li h3 {
font-size:6vw;
font-weight:700;
line-height:1.41;
}

.etcFlow ol li img {
width:10%;
}

.etcFlow ol li section img {
width:15%;
margin:0 10px;
vertical-align:top;
}

.etcFlow ol li p {
font-size:4vw;
}

.etcFlow li section h4 img {
width:50%;
}

}


.etcOverture {
width:1400px;
max-width:94%;
margin:0 auto;
text-align:center;
padding:30px 0 50px 0;
}

.etcOverture h2 {
font-size:clamp(36px,7vw,41px);
font-weight:700;
margin-bottom:40px;
}

.etcOverture ul {
display:flex;
justify-content:center;
gap:30px 30px;
flex-wrap:wrap;
}

.etcOverture ul li {
background:#c0c0c0;
padding:30px;
border-radius:30px;
width:calc(50% - 15px);
}

.etcOverture ul li:first-child {
background:#4c9de8;
}

.etcOverture ul li:last-child {
background:#fd708e;
}

.etcOverture ul li h3 span {
font-size:clamp(32px,6vw,36px);
font-weight:700;
text-shadow:
            2px 2px 2px #1760d2, -2px -2px 2px #1760d2,
           -2px 2px 2px #1760d2,  2px -2px 2px #1760d2,
            2px 0px 2px #1760d2, -2px -0px 2px #1760d2,
            0px 2px 2px #1760d2,  0px -2px 2px #1760d2;
color:#fff;
}

.etcOverture ul li:last-child h3 span {
text-shadow:
            2px 2px 2px #f61b32, -2px -2px 2px #f61b32,
           -2px 2px 2px #f61b32,  2px -2px 2px #f61b32,
            2px 0px 2px #f61b32, -2px -0px 2px #f61b32,
            0px 2px 2px #f61b32,  0px -2px 2px #f61b32;
}

.etcOverture ul li h4 {
font-size:clamp(20px,5vw,24px);
font-weight:700;
color:#fff;
padding:20px 20px 20px 20px;
}

.etcOverture h5 {
padding:10px 0;
}

.etcOverture h5 a {
display:inline-block;
padding:13px 25px 7px;
font-size:clamp(24px,7vw,28px);
font-weight:700;
color:#fff;
border-radius:100px;
position:relative;
overflow:hidden;
}

.etcOverture h5 a span {
position:relative;
z-index:10;
}

.etcOverture h5 a {
background:#e71f19;
border:solid 2px #ce0a23;
}

.etcOverture h5 a:before {
  content: "";
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  width: 0;
  display: block;
  background: #dc110e;
  z-index: 1;
  transition: .2s;
  border-radius:200px;
  opacity:0;
}

.etcOverture h5 a:hover:before {
  width: 100%;
  opacity:1;
}

.etcOverture h6 {
padding:10px 0 30px 0;
}

.etcOverture dl {
background:#fff;
border-radius:25px;
padding:20px;
margin-bottom:20px;
}

.etcOverture dl dd {
font-size:clamp(15px,4vw,17px);
font-weight:500;
line-height:1.51;
margin-bottom:15px;
text-align:left;
text-indent:-18px;
padding-left:18px;
}

.etcOverture dl dd:before {
content:"・";
}

@media screen and (max-width: 1100px) {

.etcOverture ul li {
padding:40px 35px 35px 35px;
width:100%;
}

.etcOverture dl {
max-width:700px;
margin:0 auto 30px;
}

.etcOverture dl dd {
font-size:clamp(16px,4vw,18px);
font-weight:500;
line-height:1.51;
margin-bottom:15px;
text-align:left;
text-indent:-18px;
padding-left:18px;
}

}


@media screen and (max-width: 700px) {

.etcOverture h2 {
font-size:6vw;
font-weight:700;
margin-bottom:30px;
}

}


@media screen and (max-width: 600px) {

.etcOverture {
padding:7% 0 5% 0;
}

.etcOverture ul li {
padding:30px 3% 25px 3%;
}

.etcOverture ul li h3 span {
font-size:8vw;
}

.etcOverture ul li h4 {
font-size:5vw;
}

.etcOverture dl {
padding:15px 20px 15px 15px;
margin-bottom:10px;
}

.etcOverture dl dd {
font-size:4vw;
font-weight:700;
line-height:1.51;
margin-bottom:15px;
text-align:left;
text-indent:-3.5vw;
padding-left:3.5vw;
}

.etcOverture h5 a {
display:inline-block;
padding:12px 25px 12px;
font-size:7vw;
}

.etcOverture h6 {
padding:10px 4% 20px 4%;
}

}


.detailInfo {
width:1400px;
max-width:94%;
margin:0 auto;
padding:40px 0 0 0;
}

.detailInfo section {
text-align:center;
}

.detailInfo section h2 {
background:#ffc000;
font-size:clamp(28px,6.5vw,32px);
font-weight:700;
padding:15px 30px 5px 30px;
border-radius:30px 30px 0 0;
}

.detailInfo section dl {
padding:30px;
border:solid 2px #ffc000;
border-radius:0 0 30px 30px;
}

.detailInfo section dd {
font-size:clamp(18px,4.5vw,20px);
font-weight:500;
line-height:1.51;
margin-bottom:15px;
}

.detailInfo section dd:last-child {
margin-bottom:0;
}

.detailInfo section dd h3 {
font-weight:700;
font-size:clamp(22px,5.5vw,24px);
}

.detailInfo section dd:nth-child(n+2) h3 {
padding-top:15px;
}

.detailInfo section dd h3:before {
content:"＜";
}

.detailInfo section dd h3:after {
content:"＞";
}

.detailInfo section dd h4 {
font-weight:500;
font-size:clamp(20px,5vw,22px);
}

.detailInfo section dd h4:before {
content:"●";
color:#ffc000;
}

.detailInfo section dd h4:nth-child(n+2) {
padding-top:10px;
}

.detailInfo section dd p small {
font-size:clamp(15px,3.5vw,16px);
}

.detailInfoFlow p {
padding-top:10px;
}

@media screen and (max-width: 800px) {

.detailInfo {
padding:5% 0 0 0;
}

.detailInfo section h2 {
font-size:5vw;
}

.detailInfo section dl {
padding:20px;
}

.detailInfo section dd {
font-size:4vw;
}

.detailInfo section dd h3 {
font-size:4vw;
}

.detailInfo section dd h4 {
font-size:4vw;
}

.detailInfo section dd p small {
font-size:3vw;
}

}


#GASOLINECARD {
padding:200px 30px 25px 30px;
text-align:center;
}

#GASOLINEHERO {
text-align:center;
}

#GASOLINEHERO h1 {
padding:20px 0 30px;
}

#GASOLINECARD ul {
text-align:center;
}

#GASOLINECARD li {
position:relative;
width:505px;
margin:0 auto;
}

#GASOLINECARD li a {
position:absolute;
right:-200px;
bottom:-30px;
}

#GASOLINEHERO ul {
padding:30px 0 0 0;
display:flex;
justify-content:center;
gap:0 20px;
}

#GASOLINEHERO ul li {
color:#fff;
background:#ef0107;
border:solid 2px #fff;
padding:13px 20px 5px 20px;
border-radius:100px;
font-size:clamp(28px,6vw,32px);
font-weight:700;
}

@media screen and (max-width: 1000px) {

#GASOLINECARD {
padding:160px 3% 25px 3%;
}

#GASOLINEHERO {
padding:0 4%;
}

#GASOLINECARD li a {
position:absolute;
right:-140px;
bottom:-30px;
width:200px;
}

}


@media screen and (max-width: 900px) {

#HERO3 {
padding-bottom:7%;
}

#GASOLINECARD {
padding:190px 3% 25px 3%;
}

#GASOLINECARD li a {
position:absolute;
right:-50px;
top:-70px;
width:180px;
}

}


@media screen and (max-width: 700px) {

#GASOLINECARD li {
width:80%;
}

#GASOLINECARD li a {
right:-30px;
top:-70px;
width:40%;
}

#GASOLINEHERO p img {
width:260px;
max-width:60%;
}

#GASOLINEHERO h1 {
padding:3% 0 5%;
}

#GASOLINEHERO h2 img {
width:280px;
max-width:70%;
}

#GASOLINEHERO ul {
padding:5% 0 0 0;
gap:0 15px;
}

#GASOLINEHERO ul li {
padding:10px 20px 10px 20px;
font-size:5vw;
}


}


.gasolineFeature {
padding:80px 30px 60px 30px;
text-align:center;
}

.gasolineFeature h2 {
color:#ef0107;
font-size:clamp(41px,8vw,46px);
font-weight:700;
margin-bottom:30px;
}

.gasolineFeature ul {
width:1400px;
max-width:94%;
margin:0 auto;
}

.gasolineFeature li {
background: rgb(240,1,8);
background: linear-gradient(90deg, rgba(240,1,8,1) 0%, rgba(240,169,1,1) 100%);
padding:15px;
width:100%;
margin-bottom:20px;
display:flex;
justify-content:start;
align-items:center;
gap:0 30px;
border-radius:25px;
}

.gasolineFeature li h3 {
color:#fff;
font-size:clamp(30px,6vw,34px);
font-weight:700;
width:35%;
text-align:right;
padding-top:10px;
}

.gasolineFeature li section {
background:#fff;
padding:20px;
border-radius:15px;
width:calc(65% - 30px);
}

.gasolineFeature li section p {
text-align:left;
font-size:clamp(18px,5vw,20px);
font-weight:500;
line-height:1.39;
}

.gasolineFeature li section p strong {
color:#ef0107;
}

.gasolineFeature li dl {
padding:5px 0 0 0;
}

.gasolineFeature li dl dd {
text-align:left;
font-size:clamp(15px,4vw,17px);
font-weight:500;
line-height:1.39;
margin-top:5px;
}

@media screen and (max-width: 1400px) {

.gasolineFeature li {
flex-wrap:wrap;
gap:15px 0;
}

.gasolineFeature li h3 {
width:100%;
text-align:center;
}

.gasolineFeature li section {
padding:20px;
border-radius:20px;
width:100%;
}

.gasolineFeature li section p {
text-align:center;
}

.gasolineFeature li dl dd {
text-align:center;
}

}

@media screen and (max-width: 1000px) {

.gasolineFeature {
padding:10% 3% 6% 3%;
}

.gasolineFeature li section p {
text-align:left;
}

.gasolineFeature li dl dd {
text-align:left;
}

}

@media screen and (max-width: 900px) {

.gasolineFeature h2 {
font-size:5.5vw;
margin-bottom:5%;
}

.gasolineFeature li {
border-radius:20px;
margin-bottom:5%;
}

.gasolineFeature li h3 {
font-size:4.5vw;
padding-top:0;
}

.gasolineFeature li section {
border-radius:15px;
}

.gasolineFeature li section p {
font-size:3.7vw;
}

.gasolineFeature li dl dd {
font-size:3.3vw;
}

}


.gasolineStands {
padding:0 4% 50px 4%;
}

.gasolineStands ul {
display:flex;
justify-content:center;
gap:0 20px;
max-width:1200px;
margin:0 auto;
}

.gasolineStands ul li img {
border:solid 2px #f00108;
}

.gasolineStands h2 {
padding:40px 0 0 0;
text-align:center;
font-size:clamp(24px,7vw,28px);
font-weight:700;
line-height:1.51;
}

@media screen and (max-width: 800px) {

.gasolineStands {
padding:0 3% 5% 3%;
}

.gasolineStands ul {
gap:0 10px;
}

.gasolineStands h2 {
padding:5% 0 0 0;
font-size:4vw;
}

}

.gasolineToDetail {
padding:100px 4% 0 4%;
}

.gasolineToDetail h2 {
text-align:center;
font-size:clamp(36px,7vw,41px);
font-weight:700;
}

@media screen and (max-width: 800px) {

.gasolineToDetail {
padding:15% 4% 0 4%;
}

.gasolineToDetail h2 {
font-size:6vw;
}

}

.gasolineFootBtn {
padding-top:8%;
}




#HEROMEMBERS {
height:auto;
background:#9bc724;
}

#MEMBERS h1 {
padding:35% 10% 6% 10%;
text-align:center;
}

.membersContent {
background:#9bc724;
padding:0 3% 3%;
}

.membersConsists {
padding:3%;
background:#fff;
border-radius:50px;
text-align:center;
}

@media screen and (max-width: 600px) {

.membersConsistsContainer {
padding:0 3%;
}

.membersContent {
padding:0 1% 3%;
}

.membersConsists {
padding:2%;
}

}

.membersMeisai {
width:1400px;
max-width:100%;
margin:0 auto;
}

.membersConsists fieldset {
border:solid 5px #00b050;
border-radius:40px;
padding:3%;
}

.membersConsists fieldset legend {
padding:10px 10px 0 10px;
font-size:clamp(28px,6vw,32px);
font-weight:700;
}

@media screen and (max-width: 600px) {

.membersConsists {
border-radius:30px;
}

.membersConsists fieldset {
border-radius:25px;
}

.membersConsists fieldset legend {
font-size:5vw;
}

}

.membersMeisai ul li {
margin:10px 0 15px;
}

.membersMeisai ul li a img {
transition:all .3s ease;
opacity:1;
}

.membersMeisai ul li a:hover img {
opacity:0.7;
}

.membersMeisai dl {
padding:20px 0 0 0;
}

.membersMeisai dl dt {
font-size:clamp(18px,4vw,20px);
font-weight:700;
}

.membersMeisai dl dd {
font-size:clamp(15px,3.5vw,17px);
font-weight:500;
padding:5px 0 0 0;
line-height:1.61;
}

@media screen and (max-width: 600px) {

.membersMeisai dl dt {
font-size:4vw;
}

.membersMeisai dl dd {
font-size:3.5vw;
}

}

.membersInfo {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:50px 30px;
padding:50px 0;
}

@media screen and (max-width: 600px) {

.membersInfo {
gap:30px;
padding:30px 0;
}

}

.membersInfo fieldset {
min-height:430px;
}

.membersInfo fieldset:nth-child(1) {
width:calc(50% - 15px);
}

.membersInfo fieldset:nth-child(2) {
width:calc(50% - 15px);
}

@media screen and (max-width: 1000px) {

.membersInfo fieldset:nth-child(1) {
width:100%;
}

.membersInfo fieldset:nth-child(2) {
width:100%;
min-height:auto;
}

}

@media screen and (max-width: 600px) {

.membersInfo fieldset:nth-child(2) {
min-height:auto;
}

}

.membersInfo section iframe {
width:100%;
height:360px;
}

.membersInfo ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
padding:15px;
}

.membersInfo ul li {
width:100%;
}

.membersInfo ul li a {
display:inline-block;
color:#007919;
font-size:clamp(16px,4vw,20px);
font-weight:700;
padding:20px 20px 15px 20px;
border-radius:20px;
width:100%;
border:solid 2px #007919;
transition:all .3s ease;
}

@media screen and (max-width: 600px) {

.membersInfo ul li a {
display:inline-block;
color:#007919;
font-size:4vw;
font-weight:700;
padding:18px 20px 18px 20px;
border-radius:15px;
}

}

.membersInfo ul li a:hover {
background:#009534;
color:#fff;
}

.membersContact dl {
padding:20px 0;
}

.membersContact dl dt {
font-size:clamp(22px,5vw,24px);
font-weight:500;
margin-bottom:25px;
}

.membersContact dl dd {

}

.membersContact dl dd h2 {
font-size:clamp(28px,6vw,32px);
font-weight:700;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:0 5px;
align-items:center;
}

.membersContact dl dd h2 a {
font-size:clamp(36px,8vw,39px);
font-weight:700;
border-bottom:solid 1px #009534;
}

.membersContact dl dd h2 span {
font-size:clamp(18px,4vw,24px);
font-weight:700;
}

.membersContact dl dd i {
display:inline-block;
margin-top:-7px;
}

.membersContact dd:nth-of-type(1) {
padding-bottom:40px;
}

.membersContact dd h3 a {
display:inline-block;
padding:30px 30px 25px 30px;
font-size:clamp(24px,6vw,28px);
font-weight:700;
background:#009534;
border-radius:25px;
color:#fff;
}

@media screen and (max-width: 870px) {

.membersContact dl dt {
font-size:4vw;
margin-bottom:5%;
}

.membersContact dl dd h2 {
font-size:4vw;
}

.membersContact dl dd h2 a {
font-size:6vw;
}

.membersContact dl dd h2 span {
display:block;
width:100%;
font-size:3.5vw;
padding-top:20px;
}

.membersContact dd h3 a {
padding:30px 15px 30px 15px;
font-size:3.5vw;
width:100%;
border-radius:15px;
}

.membersContact dd h3 a i {
display:none;
}

}

@media screen and (max-width: 600px) {

.membersContact dd h3 a {
padding:20px 15px 20px 15px;
font-size:4vw;
width:100%;
border-radius:15px;
}

}


#INFORMATIONHERO {
height:1000px;
}

#INFORMATION {
text-align:center;
padding:250px 4% 0 4%;
}

#INFORMATION h1 {
padding:30px 0 0 0;
}

.infomationMessage {
margin:-80px auto 0 auto;
width:1400px;
max-width:100%;
background:#fff;
border-radius:50px;
padding:30px;
text-align:center;
position:relative;
z-index:10;
}

.infomationMessage h2 {
padding:30px 0 60px 0;
}

.infomationMessage h2 img {
max-width:90%;
}

.infomationMessage p {
font-size:clamp(20px,4.5vw,22px);
font-weight:700;
line-height:1.81;
}

.infomationMessage p br {
display:none;
}

@media screen and (max-width: 900px) {

.infomationMessage p {
font-size:2.4vw;
line-height:2.01;
}

#INFORMATIONHERO {
height:auto;
padding-bottom:10%;
padding-top:3%;
background:url(./images/hero/information_sp.jpg) center top no-repeat !important;
background-size:cover !important;
position:relative;
}

#INFORMATION {
text-align:center;
padding:40% 4% 0 4%;
}

#INFORMATION h1 {
padding:5% 0 30% 0;
}

#INFORMATION p img {
max-width:90%;
}

}


@media screen and (max-width: 700px) {

.infomationMessage p {
font-size:3.5vw;
line-height:1.81;
}

.infomationMessage p br {
display:block;
}

}


@media screen and (max-width: 550px) {

#INFORMATIONHERO {
height:auto;
padding-bottom:15%;
padding-top:5%;
background:url(./images/hero/information_sp.jpg) center bottom no-repeat !important;
background-size:cover !important;
position:relative;
}

#INFORMATIONHERO:before {
background:url(./images/hero/information_sp.jpg) center bottom no-repeat !important;
background-size:cover !important;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

#INFORMATIONHERO a {
position:relative;
z-index:101 !important;
}

#INFORMATION {
text-align:center;
padding:40% 4% 0 4%;
}

#INFORMATION h1 {
padding:5% 0 30% 0;
}

#INFORMATION h1 img {
max-width:90%;
}

#INFORMATION p img {
max-width:80%;
}

.infomationMessage {
margin:-40px auto 0 auto;
width:1400px;
max-width:100%;
background:#fff;
border-radius:50px;
padding:4%;
text-align:center;
}

.infomationMessage h2 {
padding:5% 0 8% 0;
}

.infomationMessage h2 img {
max-width:90%;
}

.infomationMessage p {
font-size:3.5vw;
line-height:1.81;
}

}


.informationCustomers {
padding:50px 2% 0 3%;
text-align:center;
}

.informationCustomers:after {
content:"";
display:block;
clear:both;
height:0;
}

.informationCustomers h2 {
font-size:clamp(28px,5vw,30px);
font-weight:700;
margin-bottom:10px;
line-height:1.41;
}

.informationCustomers h3 {
width:49.5%;
float:left;
height:100px;
border-right:solid 1px #ffc805;
}

.informationCustomers ul {
background:url(./images/information/customer_bg.jpg) center bottom no-repeat #d5c1b2;
background-size:cover;
border-radius:40px;
padding:4%;
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.informationCustomers ul li {
background:#fff;
padding:20px;
border-radius:30px;
width:calc(50% - 15px);
}

.informationCustomers ul li h3 {
font-size:clamp(18px,4vw,20px);
font-weight:700;
line-height:1.51;
margin-bottom:10px;
}

.informationCustomers ul li p {
font-size:clamp(15px,3.5vw,17px);
font-weight:500;
line-height:1.51;
}

@media screen and (max-width: 700px) {

.informationCustomers h2 {
font-size:4.5vw;
margin-bottom:10px;
}

.informationCustomers ul {
gap:20px;
border-radius:30px;
}

.informationCustomers ul li {
background:#fff;
padding:15px;
border-radius:25px;
width:100%;
}

.informationCustomers ul li h3 {
font-size:3.8vw;
}

.informationCustomers ul li p {
font-size:3.5vw;
}

}


@media screen and (max-width: 700px) {

.informationCustomers h2 {
margin-bottom:10px;
}

.informationCustomers ul {
gap:15px;
}

}


.informationOutline {
padding:3% 4% 80px;
text-align:center;
}

.informationOutline section {
width:1400px;
max-width:90%;
margin:0 auto;
}

.informationOutline section fieldset {
border:solid 2px #111111;
border-radius:40px;
padding:50px;
}

.informationOutline section fieldset legend {
padding:0 15px 0 15px;
font-size:36px;
font-weight:700;
}

@media screen and (max-width: 700px) {

.informationOutline section fieldset legend {
padding:0 15px 0 15px;
font-size:6vw;
font-weight:700;
}

}

.informationOutline section fieldset legend img {
width:150px;
}

.informationOutline table {
width:100%;
}

.informationOutline table th {
border-bottom:solid 1px #777;
text-align:left;
white-space:nowrap;
padding:35px 50px 15px 0;
font-size:clamp(17px,4vw,19px);
font-weight:700;
line-height:1.51;
min-width:200px;
}

.informationOutline table td {
border-bottom:solid 1px #ccc;
padding:35px 0 15px 0;
text-align:left;
font-size:clamp(17px,4vw,19px);
font-weight:700;
line-height:1.51;
width:100%;
}

.informationOutline table td h3 {
font-weight:700;
}

.informationOutline table td h3:not(:nth-of-type(1)) {
padding-top:15px;
}

.informationOutline table td p small {
font-size:clamp(15px,3.5vw,16px);
font-weight:500;
}


@media screen and (max-width: 1000px) {

.informationOutline {
padding:3% 3% 8%;
}

.informationOutline section {
max-width:100%;
}

.informationOutline section fieldset {
border-radius:30px;
padding:30px;
}

.informationOutline table th {
font-size:2.5vw;
}

.informationOutline table td {
font-size:2.5vw;
}

.informationOutline table td p small {
font-size:2vw;
}

}


@media screen and (max-width: 700px) {

.informationOutline section fieldset legend {
max-width:39%;
}

.informationOutline section fieldset {
padding:5%;
}

.informationOutline table th {
width:100%;
display:block;
font-size:3.5vw;
padding:25px 0 10px 0;
border-bottom:none;
}

.informationOutline table td {
width:100%;
display:block;
font-size:3vw;
padding:0 0 15px 0;
}

}



#QAHERO {
background:url(./images/qa/title_bg.jpg) center top no-repeat;
background-size:cover;
height:580px;
text-align:center;
}

#QA {
padding:300px 5%;
}

#QA h1 {
padding:0 0 20px 0;
}

#QA h1 img {
max-width:50%;
}

#QA h2 img {
max-width:70%;
}


.details {
line-height: 1.8;
box-shadow:0 0 4px rgba(0,0,0,0.3);
border-radius:10px;
width: 960px;
max-width:94%;
margin: 0 auto 20px;
}
.details__summary {
position: relative;
display: block;
cursor: pointer;
margin: 0;
padding: 17px 40px 12px 18px;
font-size:clamp(20px,4.5vw,22px);
font-weight:700;
}
.details__summary::before {
display: block;
content: "";
box-sizing: border-box;
position: absolute;
top: calc(50% - 6px);
right: 16px;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #111111;
transition: all 0.4s ease-out;
transform-origin: 3px 6px;
transform: rotate(90deg);
}
.details[open] .details__summary::before {
transform: rotate(-90deg);
}
.details__content {
overflow: hidden;
margin: 0;
padding-left: 16px;
padding-right: 16px;
padding-bottom:16px;
}

.faq {
padding:80px 0;
}

.details__content p {
padding:20px 20px 25px 20px;
background:#f5f5f5;
border-radius:15px;
font-size:clamp(16px,4vw,18px);
font-weight:500;
}

.details__content p a {
color:#0977ff;
text-decoration:underline;
}

@media screen and (max-width: 800px) {

.details__summary {
position: relative;
display: block;
cursor: pointer;
margin: 0;
padding: 12px 30px 12px 12px;
font-size:4vw;
font-weight:700;
}

.details__summary::before {
display: block;
content: "";
box-sizing: border-box;
position: absolute;
top: calc(50% - 6px);
right: 10px;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #111111;
transition: all 0.4s ease-out;
transform-origin: 3px 6px;
transform: rotate(90deg);
}

.details__content {
overflow: hidden;
margin: 0;
padding-left: 10px;
padding-right: 10px;
padding-bottom:10px;
}

.details__content p {
padding:15px;
background:#f5f5f5;
border-radius:15px;
font-size:3.5vw;
font-weight:500;
}

}


@media screen and (max-width: 500px) {

#QA {
padding:200px 5%;
}

#QAHERO {
background:url(./images/qa/title_bg.jpg) center bottom no-repeat;
background-size:cover;
height:480px;
text-align:center;
}

}


#FORMHERO {
height:100px;
}

@media screen and (max-width: 550px) {

#FORMHERO {
height:20%;
}

}


.formContact h2 {
color:#111111 !important;
}

.formContact table,
.formContact table td {
border-color:#fccc00 !important;
}

.formContact td.inq03 {
background:#fffae5 !important;
}


.formKyushu h2 {
color:#1760d2 !important;
}

.formKyushu table,
.formKyushu table td {
border-color:#4c9de8 !important;
}

.formKyushu td.inq03 {
background:#edf5fd !important;
}


.formUC h2 {
color:#f61b32 !important;
}

.formUC table,
.formUC table td {
border-color:#fd708e !important;
}

.formUC td.inq03 {
background:#fff0f3 !important;
}


.formGasoline h2 {
color:#f05d04 !important;
}

.formGasoline table,
.formGasoline table td {
border-color:#f05d04 !important;
}

.formGasoline td.inq03 {
background:#fdeee5 !important;
}

.fieldsetKousoku td.inq03 {
background:#ebf3fc !important;
}

#ETCCARDS2 {
padding:20% 10% 6% 10%;
}

#ETCCARDS2 ul {
display:flex;
justify-content:center;
gap:0 30px;
}

@media screen and (max-width: 860px) {

#ETCCARDS2 {
padding:25% 10% 6% 10%;
}

#ETCCARDS2 ul {
display:flex;
justify-content:center;
gap:0 20px;
}

}

@media screen and (max-width: 660px) {

#ETCCARDS2 {
padding:30% 10% 6% 10%;
}

#ETCCARDS2 ul {
display:flex;
justify-content:center;
gap:0 20px;
}

}



.homeNews {
padding:70px 3% 40px;
text-align:center;
max-width:96%;
margin:0 auto;
}

.homeNews h2 {
font-size:clamp(16px,4vw,20px);
line-height:1.61;
font-weight:500;
margin-bottom:50px;
}

.homeNewsDocs {
display:flex;
justify-content:center;
gap:20px;
}

.homeNewsDocs section,
.homeNewsDocs dl {
padding:25px 20px;
border-radius:25px;
}

.homeNewsDocs section {
background:#64c209;
}

.homeNewsDocs dl {
background:#774de3;
}

.homeNewsDocs section h3,
.homeNewsDocs dl dt {
font-size:clamp(22px,5vw,30px);
font-weight:600;
color:#fff;
margin-bottom:10px;
}

.homeNewsDocs section iframe {
border-radius:10px;
width:700px;
height:220px;
background:#fff;
border:solid 3px #fff;
}

@media screen and (max-width: 1540px) {
.homeNewsDocs section iframe {
border-radius:10px;
width:500px;
height:220px;
background:#fff;
border:solid 3px #fff;
}
}

.homeNewsDocs section iframe ul {
list-style:none;
}

.homeNewsDocs dl dd ul {
display:flex;
justify-content:space-between;
gap:10px;
}

.homeNewsDocs dl dd ul li {
background:#fff;
padding:15px;
border-radius:15px;
}

.homeNewsDocs dl dd ul li h4 {
font-size:clamp(18px,4.5vw,21px);
font-weight:600;
line-height:1.41;
margin-bottom:5px;
}

.homeNewsDocs dl dd ul li p {
padding-top:7px;
}

.homeNewsDocs dl dd ul li p a {
font-size:clamp(20px,4vw,20px);
font-weight:600;
line-height:1.21;
color:#774de3;
display:block;
padding:12px 20px 7px 20px;
border:solid 2px #774de3;
border-radius:10px;
transition:all .3s ease;
}

.homeNewsDocs dl dd ul li p a:hover {
color:#fff;
background:#774de3;
}

@media screen and (max-width: 1380px) {

.homeNewsDocs dl dd ul li h4 {
font-size:clamp(17px,4.5vw,19px);
font-weight:600;
line-height:1.41;
margin-bottom:5px;
}

.homeNewsDocs dl dd ul li p a {
font-size:clamp(15px,4vw,17px);
padding:14px 15px 9px 15px;
}

}

@media screen and (max-width: 1200px) {

.homeNews h2 {
font-size:clamp(16px,4vw,18px);
}

.homeNewsDocs section iframe {
border-radius:10px;
width:650px;
height:430px;
}

.homeNewsDocs dl dd ul {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:10px;
}

.homeNewsDocs dl dd ul li {
width:100%;
background:#fff;
padding:15px;
border-radius:15px;
}

.homeNewsDocs dl dd ul li p a {
font-size:clamp(19px,4vw,21px);
padding:12px 20px 7px 20px;
border:solid 2px #774de3;
border-radius:10px;
transition:all .3s ease;
}

.homeNewsDocs dl dd ul li h4 {
font-size:clamp(18px,4.5vw,23px);
}

}

@media screen and (max-width: 960px) {

.homeNews h2 {
font-size:clamp(16px,4vw,18px);
text-align:left;
}

.homeNews {
padding:70px 6% 40px;
text-align:center;
max-width:100%;
margin:0 auto;
}

.homeNewsDocs {
flex-wrap:wrap;
gap:20px;
}

.homeNewsDocs section,
.homeNewsDocs dl {
width:100%;
padding:25px 20px;
border-radius:25px;
}

.homeNewsDocs section iframe {
border-radius:10px;
width:100%;
height:300px;
}

.homeNewsDocs dl dd ul li {
width:calc(50% - 5px);
padding:15px;
border-radius:15px;
}

}

@media screen and (max-width: 750px) {

.homeNews h2 {
font-size:clamp(16px,4vw,17px);
}

.homeNews {
padding:70px 6% 40px;
text-align:center;
max-width:100%;
margin:0 auto;
}

.homeNewsDocs {
flex-wrap:wrap;
gap:20px;
}

.homeNewsDocs section,
.homeNewsDocs dl {
width:100%;
padding:25px 20px;
border-radius:25px;
}

.homeNewsDocs section iframe {
border-radius:10px;
width:100%;
height:300px;
}

.homeNewsDocs dl dd ul li {
width:100%;
}

}

@media screen and (max-width: 500px) {

.homeNews h2 {
font-size:3.5vw;
}

.homeNewsDocs dl dd ul li p a {
font-size:4vw;
padding:12px 20px 7px 20px;
border:solid 2px #774de3;
border-radius:10px;
transition:all .3s ease;
}

.homeNewsDocs dl dd ul li h4 {
font-size:4vw;
}

}





.selectHero {
background:#fff !important;
height:250px !important;
}

.requestSelect {
text-align:center;
}

.requestSelect h1 {
display:inline-block;
background:#fdc902;
color:#fff;
font-size:clamp(30px,7vw,39px);
font-weight:600;
padding:50px 60px 40px 60px;
border-radius:20px;
margin-bottom:30px;
}

.requestSelect p {
padding:30px 0 0 0;
font-size:clamp(17px,4vw,19px);
font-weight:500;
line-height:1.81;
}

.requestSelect section {
padding:60px 0 0 0;
display:flex !important;
justify-content:center;
gap:20px;
}

.requestSelect section .homeToETC {
padding:0 0;
text-align:center;
}

.requestSelect section .homeToETC h4 a {
display:inline-block;
background:#e71f19;
border:solid 5px #f72f29;
border-radius:200px;
padding:32px 60px 24px;
box-shadow:0 0 3px rgba(0,0,0,0.5);
transition:all .3s ease;
position:relative;
overflow:hidden;
}

.requestSelect section .homeToETC h4 a strong {
color:#fff;
font-size:clamp(24px,6vw,36px);
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.5rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:clamp(16px,4vw,18px);
font-weight:500;
line-height:1.51;
opacity:0.8;
}

@media screen and (max-width: 1140px) {

.selectHero {
height:220px !important;
}

.requestSelect p {
font-size:clamp(16px,4vw,18px);
}

.requestSelect section .homeToETC h4 a {
padding:28px 50px 20px;
}

.requestSelect section .homeToETC h4 a strong {
font-size:clamp(24px,6vw,29px);
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.5rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:clamp(16px,4vw,18px);
font-weight:500;
line-height:1.51;
opacity:0.8;
}

}

@media screen and (max-width: 960px) {

.selectHero {
height:200px !important;
}

.requestSelect {
padding:0 5%;
}

.requestSelect p {
font-size:clamp(16px,4vw,18px);
text-align:left;
}

.requestSelect p br {
display:none;
}

.requestSelect section {
padding:60px 0 0 0;
display:flex !important;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.requestSelect section .homeToETC h4 a {
padding:28px 50px 20px;
}

.requestSelect section .homeToETC h4 a strong {
font-size:clamp(24px,6vw,30px);
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.5rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:clamp(16px,4vw,18px);
font-weight:500;
line-height:1.51;
opacity:0.8;
}

}


@media screen and (max-width: 800px) {

.selectHero {
height:180px !important;
}

.requestSelect {
padding:0 5%;
}

.requestSelect p {
font-size:clamp(16px,4vw,17px);
text-align:left;
}

.requestSelect section {
padding:60px 0 0 0;
display:flex !important;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.requestSelect section .homeToETC h4 a {
padding:28px 50px 20px;
}

.requestSelect section .homeToETC h4 a strong {
font-size:clamp(24px,6vw,30px);
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.5rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:clamp(16px,4vw,17px);
font-weight:500;
line-height:1.51;
opacity:0.8;
text-align:left;
}

}


@media screen and (max-width: 640px) {

.requestSelect h1 {
display:inline-block;
background:#fdc902;
color:#fff;
font-size:6vw;
font-weight:600;
padding:50px 60px 40px 60px;
border-radius:20px;
margin-bottom:30px;
}

.selectHero {
height:180px !important;
}

.requestSelect {
padding:0 5%;
}

.requestSelect p {
font-size:3.5vw;
}

.requestSelect section {
padding:60px 0 0 0;
display:flex !important;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.requestSelect section .homeToETC h4 a {
padding:28px 50px 20px;
}

.requestSelect section .homeToETC h4 a strong {
font-size:5.5vw;
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC h4 a small {
color:#fff;
font-size:clamp(0.9rem,3.5vw,1.5rem);
font-weight:500;
display:block;
position:relative;
z-index:2;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:3.5vw;
font-weight:500;
line-height:1.51;
opacity:0.8;
text-align:left;
}

}

@media screen and (max-width: 450px) {

.requestSelect p {
padding:20px 0 0 0;
}

.requestSelect section {
padding:40px 0 0 0;
}

.requestSelect section .homeToETC h4 a {
padding:22px 30px 20px;
}

.requestSelect section .homeToETC h4 a strong {
font-size:5.5vw;
font-weight:700;
display:block;
position:relative;
z-index:2;
line-height:1.39;
}

.requestSelect section .homeToETC p {
font-size:clamp(0.9rem,3vw,1.05rem);
font-weight:500;
padding:30px 0 0 30px;
line-height:1.71;
}

.requestSelect h5 {
padding:50px 0 50px 0;
font-size:3.5vw;
font-weight:500;
line-height:1.51;
opacity:0.8;
text-align:left;
}

}








.homeNews.invoice{
	padding-top: 0;
}

.homeNews.invoice h2{
	text-align: center;
        font-size: clamp(24px, 7vw, 28px);
        font-weight: 700;
        line-height: 1.51;
        margin-bottom: 25px;
}


.homeNews.invoice dl {
    background: #4dbee3;
}

.homeNews.invoice dl dd{
	background: #fff;
        padding: 15px;
        border-radius: 15px;
}

.homeNews.invoice dl dd p{
font-size: clamp(16px, 4vw, 20px);
        line-height: 1.61;
        font-weight: 500;
}

.homeNews.invoice dl dd ul {
	margin-top: 20px;
}

.homeNews.invoice dl dd ul li {
        background: #fff;
        padding: 0;
        border-radius: 10px;
	border: solid 2px #4dbee3;
	transition: 0.3s;
    }

.homeNews.invoice dl dd ul li h4{
	margin-bottom:0;
}

.homeNews.invoice dl dd ul li a{
	padding: 15px;
	display: block;
	width: 100%;
	height: 100%;
}

.homeNews.invoice dl dd ul li:hover{
        background: #4dbee3;
    }
.homeNews.invoice dl dd ul li:hover a{
        color: #FFF;
    }


@media screen and (max-width: 800px) {
.homeNews.invoice h2{
	padding: 5% 0 0 0;
    font-size: 4vw;
}
}