body{
margin:0;
font-family:'Noto Sans JP',sans-serif;
background:#000;
color:#fff;
line-height:1.7;
}

h1,h2,h3{
font-weight:300;
letter-spacing:2px;
}

h1 {
    margin-block-start: 0;
    margin-block-end: 0;
}

h2 {
    font-weight: bold;
    font-size: 1.8em;
}

a{
text-decoration:none;
}

a:hover {
  opacity: 0.7;
}

p{
    margin-block-start: 0;
    margin-block-end: 0;
}

.cta{
display:inline-block;
/*margin-top:20px;*/
padding:12px 28px;
/*border:1px solid gold;*/
color: #FFF;
background: cadetblue;
}

@media screen and (max-width:959px){
    .cta{
    width: 70%;}
}

.pc{ display: block;}
.sp{display: none;}

@media screen and (max-width:959px){
    .pc{ display: none;}
.sp{display: block;}
}

/*
.fv{
height:80vh;
background:url(../img/fv.jpg) center top / cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

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

.fv{
background:url(../img/fv_sp.jpg) center top / cover no-repeat;
height:70vh;
}

}

.fv{
position:relative;
}

.fv img{
width:100%;
height:80vh;
object-fit:cover;
display:block;
}

.fv-inner{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#fff;
}

.fv h1{
font-size:70px;
}
*/

.fv img{
    width: 100%;
}
.fair {
    text-align: center;
    padding: 80px 20px;
    line-height: 2.5em;
}
@media screen and (max-width:959px){
    .fair {
    padding: 5vh 20px;
    text-align: left;
}
}

.pickup{
    width: 80%;
    max-width: 1200px;
    margin: 5vh auto;
}

.pickup h2 {
    text-align: center;
    text-shadow: #0093B7 1px 1px 1px, #0093B7 -1px -1px 1px, #7DE6FF 0 0 15px, rgba(125, 230, 255, 0.5) 0 0 40px, rgba(0, 204, 255, 0.2) 0 0 80px, rgba(0, 204, 255, 0.1) 0 0 120px;
}

@media screen and (max-width:959px){
    .pickup h2 {
        font-size: 1.5em;
        text-align: left;
    }
}
.car-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-bottom: 10vh;
}

.car-card{
background:#111;
padding:20px;
text-align:center;
}

.car-card h3 {
    font-weight: bold;
}

.car-card img{
width:100%;
}

.price {
    color: lightcyan;
    font-size: 2.6em;
    font-family: ui-sans-serif;
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: 0;
    letter-spacing: 2.5px;
    line-height: 100%;
}
.price span {
    font-size: 0.4em;
}

.car-num {
    font-size: 0.7em;
}

.link_cnt {
    display: flex;
    justify-content: space-evenly;
    gap: 6px;
   margin-top: 17px;
}
.link_cnt .btn {
    display: block;
    text-align: center;
    padding:12px;
    border-radius: 8px;
    background: cadetblue;
    color: #000;
    font-size: 14px;
    width: 100%;
}

.contact .btn_area {
    display: flex;
    font-size: 1.3em;
    justify-content: space-around;
    align-items: center;
    gap: 5vw;
}

.btn_area div {
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    width: 40%;
    border: 2px solid #efedea;
    border-radius: 10px;
}

.btn_area div a {
    color: #efedea;
    text-decoration: none;
}

.rei {
    font-size: 0.95em;
    margin-top: 18px;
    text-align: center;
    margin-bottom: 5vh;
}
.rei a{
    color: aquamarine;
    text-decoration: underline;
}
.memo {
    font-size: 0.8em;
    margin-top: 5vh;
    display: block;
    justify-content: flex-end;
}

ul {
    padding-left: 20px;
    margin: 0 0 0 0;
}
.memo li {
    list-style-type: none;
}

.contact {
    margin-top: 5vh;
}
.contact p {
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 2vh;
}

@media screen and (max-width:959px){
.contact p {
        font-size: 1.1em;
    margin-bottom: 5vh;
    text-align: left;
    }
}


.feature{
    margin: 18vh auto;
    width: 95%;
}

.feature-inner{
display:flex;
align-items:center;
gap:60px;
max-width:1200px;
margin:auto;
}

.feature-image{
width:50%;
}

.feature-image img{
width:100%;
}

.feature-text{
width:50%;
}


.feature-text h2 {
    font-size: 5rem;
    font-weight: 400;
    margin-block-end: 0;
    margin-block-start: 0;
        color: #fff;
    text-shadow: #0093B7 1px 1px 1px, #0093B7 1px -1px 1px, #0093B7 -1px 1px 1px, #0093B7 -1px -1px 1px, #F0F0F0 0 0 5px, #7DE6FF 0 0 50px, #7DE6FF 0 0 70px, #00CCFF 0 0 100px, #00CCFF 0 0 120px;
}

.feature-text .subttl {
    font-size: 1.5em;
}

.feature-text p {
    margin-bottom: 1.5em;
}

.alt .feature-inner{
flex-direction:row-reverse;
}
@media screen and (max-width:959px){
    .feature-text p {
   /*text-align: left;*/
}
.feature-text .subttl {
text-align: center;
}

.feature-inner.le {
    display: flex;
    flex-direction: column-reverse;
}
}
.cpo{
padding:5vh 0;
background:#333;
text-align:center;
}
.cpo h2 {
    font-weight: 500;
}

.cpo-grid{
display:flex;
justify-content:center;
gap:2vw;
margin-top:9vh;
width: 90%;
max-width: 1200px;
margin-inline: auto;
}

.cpo-item{
width:30%;
display:flex;
flex-direction:column;
padding:25px;
background:#111;
border:1px solid #333;
}

.cpo-item img{
width:100%;
}

.cpo-item h3{
font-size:2em;
color:bisque;
margin:20px 0 10px;
}

.cpo-item .txt{
text-align:left;
flex:1;
}

.cpo-item a{
margin-top:20px;
color:antiquewhite;
text-decoration:underline;
text-underline-offset:4px;
}


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

 .cpo h2 {
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
     width: 90%;
    margin-inline: auto;
}

.cpo-grid{
flex-wrap:wrap;
gap:40px;
}

.cpo-item{
width:82%;
}

}


/* smartphone */

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

.cpo-grid{
flex-direction:column;
gap:40px;
margin-top:6vh;
}



.cpo-item h3{
font-size:1.6em;
}

.cpo-item .txt{
font-size:0.95rem;
line-height:1.7;
}

}







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


.feature-inner{
flex-direction:column;
gap: 0;
}

.alt .feature-inner{
flex-direction:column;
}

.feature-image,
.feature-text{
width:100%;
text-align: center;
}

.cpo-grid{
flex-direction:column;
align-items:center;
gap:40px;
}

}



/*--*/
.container {
    max-width: 1100px; margin: 0 auto; padding: 32px 16px;
  }
/**/
.point_area {
  margin: 10vh auto;
  display: flex;
  justify-content: space-between;
  width: 100%;

}
@media screen and (max-width: 680px) {
  .feature {
    flex: none;}
  .point_area {
      margin: 10vh auto;
      display: flex;
      justify-content: space-between;
      width: 100%;
      flex-direction: column;
  }  
  .section h3 {
      text-align: left;
    }
}

a.stsm_more {
  background: rgb(92, 140, 175);
  background: linear-gradient(160deg, rgba(92, 140, 175, 1) 0%, rgba(236, 236, 236, 1) 100%);
  padding: 5vh 3vw 0vw;
}
a.cpo_more {
  background: #003b80;
  padding: 5vh 3vw 0vw;
}

.point_area img {
  width: 100%;
}

p.txt04 {
  width: 80%;
  margin: 0 auto;
  color: #333;
}
@media screen and (max-width: 680px) {
  a.stsm_more {
      background: rgb(92, 140, 175);
      background: linear-gradient(160deg, rgba(92, 140, 175, 1) 0%, rgba(236, 236, 236, 1) 100%);
      padding: 1vh 3vw 0vw;
  }
  a.cpo_more {
      background: #003b80;
      padding: 1vh 3vw 0vw;
  }
  p.txt04 {
    width: 90%;
    margin: 0 auto;
    font-size: .8em;
}
}

.contact p{
      text-align: center;
    font-size: 1.3em;

}

.btn_area {
      display: flex;
    font-size: 1.3em;
    justify-content: space-around;
    align-items: center;
    gap: 5vw
}
.btn_area div {
         margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    width: 40%;
    border: 2px solid #efedea;
    border-radius: 10px;
}

.btn_area div a {
    color: #efedea;
text-decoration: none;}


@media screen and (max-width: 980px) {
  .btn_area {
            display: flex;
    font-size: 1.1em;
    justify-content: space-around;
   
    line-height: 126%;
    margin: 0 auto;
    gap: 5vw
  }
  
  .btn_area div {
            margin-bottom: 20px;
        font-weight: bold;
        text-align: center;
        padding: 10px 0;
        border: 2px solid #333;
        border-radius: 10px;
                background: #fff;
        color: #333;
        width: 50%;
}
.btn_area div a {
    color: #333;
text-decoration: none;
font-size: 0.7em;
}


 

  .point_area {
      width: 90%;
      margin: 2vh auto;
  }

  .contact p{
      text-align: left;
    font-size: 1em;
    margin: 5vh 3vh 2vh;
}

}

img.icon_lnk {
    width: 1.2em;
    height: 1.2em;
    margin-left: 1em;
    vertical-align: sub;
}

/*shop*/

.shop_area {
  margin-top: 7vh;
}
.shop_area img {
  width: 100%;
}
.shop_area h3{
  width: 63%;
}

.tenpo {
  display: flex;
  justify-content: space-between;
  width: 94%;
  margin: 7vh auto;
}
.tenpo div.tenpo-shop {
  width: 30%;
}
.tenpo_lnk {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0;
  width: 100%;
}

.tenpo_lnk>div {
  width: 31%;
  margin-right: 10px;
}

.ad-txt p {
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 1.6em;
    text-decoration: none;
    color: #333;
}
.ad-txt p span{
    font-size: .7rem;
    line-height: 100%;
}


@media screen and (max-width: 680px) {
  .tenpo_lnk>div {
      width: 24%;
      margin-right: 10px;
  }
  .shop_area h3 {
      width: 95%;
      margin: 0 auto;
  }
.tenpo {
  display: block;
  justify-content: space-between;
  width: 94%;
  margin: 5vh auto;
}
.tenpo div.tenpo-shop {
  width: 90%;
  margin-bottom: 20px;
}
}

section.system {
    background: #84caca;
}
section.shop {
    background: lightgray;
}

.memo.f-bk {
    color: #333;
        width: 94%;
}


footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 28px 0;
    font-size: 0.98em;
    letter-spacing: 0.03em;
}

footer a{
    color: #fff;
}