html {
  scroll-padding-top: 70px;
  scroll-behavior: smooth;
}

/* Style for PCs */
@media screen and (min-width: 1025px) {

/* =====================================
   TopSection
===================================== */
.topsection {
 width: 100%;
 height: auto;
 display: block;
 background-color: var(--color-3rd);
}
.tscov {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/tsimage.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
}
.tscc {
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 padding:15% 0 30% 0;
 background-image: linear-gradient(
  180deg,
  rgba(24, 29, 37, 0) 80%,
  rgba(24, 29, 37, 1) 100%
);
}
.tscc h2 {
 order:3;
 font-size: clamp(26px, 2vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 1.5em;
}
.tscc h3 {
 order:1;
 font-size: clamp(14px, 2vw, 20px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.tscc h4 {
 order:2;
 font-size: clamp(60px, 6vw, 200px);
 font-weight: 400;
 font-family: var(--font-en);
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.2em;
}
.tscc h3 br {
 display: none;
}
.tscc ul {
 order:4;
 width: 40%;
 max-width:700px;
 height: auto;
 display: flex;
 justify-content: space-between;
 gap:20px;
}
.tscc ul li {
 flex:1;
 height: auto;
 display: block;
 font-size:14px;
 font-weight: 400;
}
.tscc ul li a {
width: 100%;
height: auto;
display: block;
line-height: 1em;
text-decoration: none;
color:var(--color-white);
padding:1em 50px 1em 2em;
background-image: url(../img/header/ic-ar_h_g.webp);
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 50%;
border-radius: 9999px; 
border:1px solid rgba(255,255,255,0.3);
transition: .4s all;
}
.tscc ul li:nth-child(1) a {
 background-color: var(--color-1st);
}
.tscc ul li:nth-child(1) a:hover {
 background-color: var(--color-red);
}
.tscc ul li:nth-child(2) a {
 background-color: var(--color-3rd);
}
.tscc ul li:nth-child(2) a:hover {
 background-color: var(--color-red);
}


/* =====================================
   FindYourAudi
===================================== */

.findyouraudi {
width: 100%;
height: auto;
display: block;
padding:100px 5% 100px 5%;
margin:0 auto;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.fya_top {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.fya_top h2 {
 order:2;
 font-size: clamp(26px, 3vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.fya_top h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.fya_top p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}

/* タブボタン
===================================== */

.fyacc-tabs {
  display: flex;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.fyacc-tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* マウスオーバー */
.fyacc-tab:hover {
  color: var(--color-white);
}

/* 選択中のタブ */
.fyacc-tab.is-active {
  color: var(--color-white);
  background-color: var(--color-2nd);
  font-weight: 300;
}

/* タブ内コンテンツ
===================================== */
.fyacc-contents {
 width: 100%;
 height: auto;
 display: block;
 padding:20px 1%;
}
.formline {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin-bottom: 20px;
}
.formline .flm {
 flex:0 0 calc((100% - 20px * 3) / 4);
 height: auto;
 display: block;
}
.formline .flm3 {
 flex:0 0 calc((100% - 20px * 2) / 3);
 height: auto;
 display: block;
}
.formline h3 {
 font-size:14px;
 font-weight: 300;
 line-height: 1.1em;
 color: var(--color-white);
 margin:0 0 0.75em 0;
}
.formline select {
 width: 100%;
 height: auto;
 display: block;
 padding:0.75em 1em;
 font-size:14px;
 line-height: 1.5em;
 color: var(--color-white);
 background-color: var(--color-5th);
 border:1px solid var(--color-1st);
 border-radius: 5px;
}
.fyacc-contents input.submitbn {
 width: fit-content;
 height: auto;
 display: block;
 font-size:14px;
 font-weight: 300;
 line-height: 40px;
 padding:0 15px 0 70px;
 color: var(--color-white);
 background-color: var(--color-5th);
 border: 1px solid rgba(255,255,255,0.3);
 border-radius: 5px;
 background-image: url(../img/header/ic-search.webp);
 background-repeat: no-repeat;
 background-position: 10px center;
 background-size: auto 24px;
 margin:0 auto;
 cursor: pointer;
 transition: .4s all;
}
.fyacc-contents input.submitbn:hover {
 background-color: var(--color-2nd);
}


/* =====================================
   セクションタイトル
===================================== */
.sectiontitle {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.sectiontitle h2 {
 order:2;
 font-size: clamp(26px, 3vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.sectiontitle h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.sectiontitle p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}


/* =====================================
   Models
===================================== */
.modelmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
 margin-bottom: 100px;
}
.modelbody {
 width: 100%;
 height: auto;
 display: block;
}
.modelbody .sectiontitle {
 padding:50px 5% 0;
}


/* =====================================
   Special Offers
===================================== */
.spoffersmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/spofferbg_px.webp);
 background-repeat: no-repeat;
 background-position: 0 center;
 background-size: cover;
}
.spoffersbody {
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding:0 5%;
}
.spof_cc {
 width:50%;
 height: auto;
 display: flex;
 flex-direction: column;
 margin:0 0 0 auto;
}
.spoffersbody h2 {
 order:2;
 font-size: clamp(26px, 3vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.spoffersbody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-red);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.spoffersbody p.spoffertxt {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 1.5em;
}
.spoffersbody p.textbn_ar {
 order:4;
}


/* =====================================
   Showroom
===================================== */
.showroomsmm {
 width: 100%;
 height: auto;
 display: block;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.showroomsbody {
 width: 100%;
 height: auto;
 display: block;
 padding:100px 5%;
}

.showroomlist {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 gap:20px;
 margin-bottom: 2em;
}
.showroomlist li {
 flex:0 0 calc((100% - 20px * 3) / 4);
 height: auto;
 display: block;
 border-bottom: 1px solid var(--color-red);
 transition: .4s all;
}
.showroomlist li:hover {
 border-bottom: 1px solid var(--color-a9);
}
.showroomlist li a {
 width: 100%;
 height: auto;
 display: block;
 text-decoration: none;
}
.showroomlist li a .shr_img {
 width: 100%;
 height: auto;
 display: block;
 overflow: hidden;
 transition: .4s all;
 border-radius: 30px;
}
.showroomlist li a:hover .shr_img {
filter: brightness(0.5);
}
.showroomlist li a .shr_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:1.5em 1em 2em;
}
.showroomlist li a .shr_cc h3 {
 font-size: clamp(14px, 1.1vw, 20px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.5em;
 margin-bottom: 0.75em;
 transition: .4s all;
}
.showroomlist li a:hover .shr_cc h3 {
 color: var(--color-red);
}
.showroomlist li a .shr_cc h4 {
  width: fit-content;
  height: auto;
  display: block;
 font-size: clamp(10px, 1.1vw, 12px);
 font-weight: 400;
 color:var(--color-a9);
 border: 1px solid var(--color-a9);
 line-height: 1.1em;
 border-radius: 3px;
 padding:2px 3px;
 margin-bottom: 1em;
}

p.shr_addtxt {
 font-size: clamp(10px, 1.1vw, 12px);
 color: var(--color-a9);
 text-align: right;
 margin:0;
}
p.shr_ad01 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad02 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad03 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad04 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
.fs_s {
  display: block;
  font-size:10px;
}


/* =====================================
   Message
===================================== */
.messagemm {
 width: 100%;
 height: auto;
 display: block;
 background-color: var(--color-black);
 background-image: url(../img/index/messagebg_pc.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
}
.messagecov {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
}
.messagebody {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 text-align: center;
 padding:100px 5% 30%;
}
.messagebody h2 {
 order:2;
 font-size: clamp(26px, 3vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.messagebody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.messagebody h4 {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 1.5em;
}
.messagebody p.textbn_ar {
 order:4;
 margin-left:auto;
 margin-right:auto;
}
.messagebody p.messagetxt {
 order:5;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0em;
}



}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {


/* =====================================
   TopSection
===================================== */
.topsection {
 width: 100%;
 height: auto;
 display: block;
 background-color: var(--color-3rd);
}
.tscov {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/tsimage.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
}
.tscc {
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 padding:15% 0 30% 0;
 background-image: linear-gradient(
  180deg,
  rgba(24, 29, 37, 0) 80%,
  rgba(24, 29, 37, 1) 100%
);
}
.tscc h2 {
 order:3;
 font-size: clamp(24px, 1.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 1.5em;
}
.tscc h3 {
 order:1;
 font-size: clamp(14px, 1.25vw, 20px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.tscc h4 {
 order:2;
 font-size: clamp(40px, 5vw, 200px);
 font-weight: 400;
 font-family: var(--font-en);
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.2em;
}
.tscc h3 br {
 display: none;
}
.tscc ul {
 order:4;
 width: 50%;
 max-width:700px;
 height: auto;
 display: flex;
 justify-content: space-between;
 gap:20px;
}
.tscc ul li {
 flex:1;
 height: auto;
 display: block;
 font-size:12px;
 font-weight: 400;
}
.tscc ul li a {
width: 100%;
height: auto;
display: block;
line-height: 1em;
text-decoration: none;
color:var(--color-white);
padding:1em 50px 1em 2em;
background-image: url(../img/header/ic-ar_h_g.webp);
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 50%;
border-radius: 9999px; 
border:1px solid rgba(255,255,255,0.3);
transition: .4s all;
}
.tscc ul li:nth-child(1) a {
 background-color: var(--color-1st);
}
.tscc ul li:nth-child(1) a:hover {
 background-color: var(--color-red);
}
.tscc ul li:nth-child(2) a {
 background-color: var(--color-3rd);
}
.tscc ul li:nth-child(2) a:hover {
 background-color: var(--color-red);
}


/* =====================================
   FindYourAudi
===================================== */

.findyouraudi {
width: 100%;
height: auto;
display: block;
padding:100px 5% 100px 5%;
margin:0 auto;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.fya_top {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.fya_top h2 {
 order:2;
 font-size: clamp(26px, 4vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.fya_top h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.fya_top p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}

/* タブボタン
===================================== */

.fyacc-tabs {
  display: flex;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.fyacc-tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* マウスオーバー */
.fyacc-tab:hover {
  color: var(--color-white);
}

/* 選択中のタブ */
.fyacc-tab.is-active {
  color: var(--color-white);
  background-color: var(--color-2nd);
  font-weight: 300;
}

/* タブ内コンテンツ
===================================== */
.fyacc-contents {
 width: 100%;
 height: auto;
 display: block;
 padding:20px 1%;
}
.formline {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin-bottom: 20px;
}
.formline .flm {
 flex:0 0 calc((100% - 20px) / 2);
 height: auto;
 display: block;
}
.formline .flm3 {
 flex:0 0 calc((100% - 20px) / 2);
 height: auto;
 display: block;
}
.formline h3 {
 font-size:14px;
 font-weight: 300;
 line-height: 1.1em;
 color: var(--color-white);
 margin:0 0 0.75em 0;
}
.formline select {
 width: 100%;
 height: auto;
 display: block;
 padding:0.75em 1em;
 font-size:14px;
 line-height: 1.5em;
 color: var(--color-white);
 background-color: var(--color-5th);
 border:1px solid var(--color-1st);
 border-radius: 5px;
}
.fyacc-contents input.submitbn {
 width: fit-content;
 height: auto;
 display: block;
 font-size:14px;
 font-weight: 300;
 line-height: 40px;
 padding:0 15px 0 70px;
 color: var(--color-white);
 background-color: var(--color-5th);
 border: 1px solid rgba(255,255,255,0.3);
 border-radius: 5px;
 background-image: url(../img/header/ic-search.webp);
 background-repeat: no-repeat;
 background-position: 10px center;
 background-size: auto 24px;
 margin:0 auto;
 cursor: pointer;
 transition: .4s all;
}
.fyacc-contents input.submitbn:hover {
 background-color: var(--color-2nd);
}


/* =====================================
   セクションタイトル
===================================== */
.sectiontitle {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.sectiontitle h2 {
 order:2;
 font-size: clamp(26px, 3.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.sectiontitle h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.sectiontitle p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}


/* =====================================
   Models
===================================== */
.modelmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
 margin-bottom: 100px;
}
.modelbody {
 width: 100%;
 height: auto;
 display: block;
}
.modelbody .sectiontitle {
 padding:50px 5% 0;
}


/* =====================================
   Special Offers
===================================== */
.spoffersmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/spofferbg_px.webp);
 background-repeat: no-repeat;
 background-position: 0 center;
 background-size: cover;
}
.spoffersbody {
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding:0 5%;
}
.spof_cc {
 width:55%;
 height: auto;
 display: flex;
 flex-direction: column;
 margin:0 0 0 auto;
}
.spoffersbody h2 {
 order:2;
 font-size: clamp(26px, 3.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.spoffersbody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-red);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.spoffersbody p.spoffertxt {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 2em;
 margin-bottom: 1.5em;
}
.spoffersbody p.textbn_ar {
 order:4;
}


/* =====================================
   Showroom
===================================== */
.showroomsmm {
 width: 100%;
 height: auto;
 display: block;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.showroomsbody {
 width: 100%;
 height: auto;
 display: block;
 padding:100px 5%;
}

.showroomlist {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 gap:40px 30px;
 margin-bottom: 2em;
}
.showroomlist li {
 flex:0 0 calc((100% - 30px) / 2);
 height: auto;
 display: block;
 border-bottom: 1px solid var(--color-red);
 transition: .4s all;
}
.showroomlist li:hover {
 border-bottom: 1px solid var(--color-a9);
}
.showroomlist li a {
 width: 100%;
 height: auto;
 display: block;
 text-decoration: none;
}
.showroomlist li a .shr_img {
 width: 100%;
 height: auto;
 display: block;
 overflow: hidden;
 transition: .4s all;
 border-radius: 30px;
}
.showroomlist li a:hover .shr_img {
filter: brightness(0.5);
}
.showroomlist li a .shr_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:1.25em 1em 2em;
}
.showroomlist li a .shr_cc h3 {
 font-size: clamp(14px, 2vw, 30px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.5em;
 margin-bottom: 0.75em;
 transition: .4s all;
}
.showroomlist li a:hover .shr_cc h3 {
 color: var(--color-red);
}
.showroomlist li a .shr_cc h4 {
  width: fit-content;
  height: auto;
  display: block;
 font-size: clamp(10px, 1.1vw, 12px);
 font-weight: 400;
 color:var(--color-a9);
 border: 1px solid var(--color-a9);
 line-height: 1.1em;
 border-radius: 3px;
 padding:2px 3px;
 margin-bottom: 1em;
}


p.shr_addtxt {
 font-size: clamp(10px, 1.1vw, 12px);
 color: var(--color-a9);
 text-align: right;
 margin:0;
}
p.shr_ad01 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad02 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad03 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad04 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
  color:var(--color-white);
  line-height: 2em;
  margin:0;
}
.fs_s {
  display: block;
  font-size:10px;
}



/* =====================================
   Message
===================================== */
.messagemm {
 width: 100%;
 height: auto;
 display: block;
 background-color: var(--color-black);
 background-image: url(../img/index/messagebg_pc.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
}
.messagecov {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
}
.messagebody {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 text-align: center;
 padding:100px 5% 30%;
}
.messagebody h2 {
 order:2;
 font-size: clamp(26px, 3.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.messagebody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.messagebody h4 {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 1.5em;
}
.messagebody p.textbn_ar {
 order:4;
 margin-left:auto;
 margin-right:auto;
}
.messagebody p.messagetxt {
 order:5;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0em;
}


}

/* Style for Smartphone */
@media screen and (max-width: 768px) {


/* =====================================
   TopSection
===================================== */
.topsection {
 width: 100%;
 height: auto;
 display: block;
}
.tscov {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/tsimage_m.jpg);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
}
.tscc {
 width: 100%;
 height: auto;
 aspect-ratio: 9 / 16;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 padding:45% 5% 30% 5%;
 background-image: linear-gradient(
  180deg,
  rgba(24, 29, 37, 0) 80%,
  rgba(24, 29, 37, 1) 100%
);
}
.tscc h2 {
 order:3;
 font-size: clamp(16px, 1.1vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 2.5em;
}
.tscc h3 {
 order:1;
 font-size: clamp(14px, 1.25vw, 20px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.tscc h4 {
 order:2;
 font-size: clamp(40px, 4vw, 200px);
 font-weight: 400;
 font-family: var(--font-en);
 color:var(--color-white);
 text-shadow: 0px 3px 8px rgba(0,0,0,0.5);
 line-height: 1.1em;
 margin-bottom: 0.2em;
}
.tscc ul {
 order:4;
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 margin:0 auto;
 gap:10px;
}
.tscc ul li {
 width: 200px!important;
 height: auto;
 display: block;
 font-size:14px;
 font-weight: 400;
 margin:0 auto!important;
}
.tscc ul li a {
width: 100%;
height: auto;
display: block;
line-height: 1em;
text-decoration: none;
color:var(--color-white);
padding:1em 50px 1em 2em;
background-image: url(../img/header/ic-ar_h_g.webp);
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 50%;
border-radius: 9999px; 
border:1px solid rgba(255,255,255,0.3);
transition: .4s all;
margin:0;
}
.tscc ul li:nth-child(1) a {
 background-color: var(--color-1st);
}
.tscc ul li:nth-child(1) a:hover {
 background-color: var(--color-red);
}
.tscc ul li:nth-child(2) a {
 background-color: var(--color-3rd);
}
.tscc ul li:nth-child(2) a:hover {
 background-color: var(--color-red);
}


/* =====================================
   FindYourAudi
===================================== */

.findyouraudi {
width: 100%;
height: auto;
display: block;
padding:50px 8% 100px 8%;
margin:0 auto;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.fya_top {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.fya_top h2 {
 order:2;
 font-size: clamp(32px, 5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.25em;
 margin-bottom: 0.5em;
}
.fya_top h3 {
 order:1;
 font-size: clamp(12px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.fya_top p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}

/* タブボタン
===================================== */

.fyacc-tabs {
  display: flex;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.fyacc-tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* マウスオーバー */
.fyacc-tab:hover {
  color: var(--color-white);
}

/* 選択中のタブ */
.fyacc-tab.is-active {
  color: var(--color-white);
  background-color: var(--color-2nd);
  font-weight: 300;
}

/* タブ内コンテンツ
===================================== */
.fyacc-contents {
 width: 100%;
 height: auto;
 display: block;
 padding:20px 1%;
}
.formline {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom:20px
}
.formline .flm {
 width:100%;
 height: auto;
 display: block;
 margin-bottom: 10px;
}
.formline .flm3 {
 width:100%;
 height: auto;
 display: block;
}
.formline h3 {
 font-size:12px;
 font-weight: 300;
 line-height: 1.1em;
 color: var(--color-white);
 margin:0 0 0.75em 0;
}
.formline select {
 width: 100%;
 height: auto;
 display: block;
 padding:0.75em 1em;
 font-size:14px;
 line-height: 1.5em;
 color: var(--color-white);
 background-color: var(--color-5th);
 border:1px solid var(--color-2nd);
 border-radius: 5px;
}
.fyacc-contents input.submitbn {
 width: fit-content;
 height: auto;
 display: block;
 font-size:14px;
 font-weight: 300;
 line-height: 40px;
 padding:0 15px 0 70px;
 color: var(--color-white);
 background-color: var(--color-5th);
 border: 1px solid rgba(255,255,255,0.3);
 border-radius: 5px;
 background-image: url(../img/header/ic-search.webp);
 background-repeat: no-repeat;
 background-position: 10px center;
 background-size: auto 24px;
 margin:0 auto;
 cursor: pointer;
 transition: .4s all;
}
.fyacc-contents input.submitbn:hover {
 background-color: var(--color-2nd);
}


/* =====================================
   セクションタイトル
===================================== */
.sectiontitle {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}
.sectiontitle h2 {
 order:2;
 font-size: clamp(26px, 3.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.sectiontitle h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.sectiontitle p {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 2em;
}


/* =====================================
   Models
===================================== */
.modelmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
 margin-bottom: 100px;
}
.modelbody {
 width: 100%;
 height: auto;
 display: block;
}
.modelbody .sectiontitle {
 padding:50px 8% 0;
}


/* =====================================
   Special Offers
===================================== */
.spoffersmm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/spofferbg_m.webp);
 background-repeat: no-repeat;
 background-position: 0 bottom;
 background-size: cover;
 background-color: var(--color-3rd);
 margin:0 auto;
}
.spoffersbody {
 width: 100%;
 height: auto;
 aspect-ratio: 9 / 15;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 padding:15% 8% 0;
 margin:0 auto;
}
.spof_cc {
 width:100%;
 height: auto;
 display: flex;
 flex-direction: column;
 margin:0 auto 0 auto;
}
.spoffersbody h2 {
 order:2;
 font-size: clamp(32px, 4vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.25em;
 margin-bottom: 0.5em;
}
.spoffersbody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-red);
 letter-spacing: 0.2em;
 line-height: 1.1em;
 margin-bottom: 0.75em;
}
.spoffersbody p.spoffertxt {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 2em;
 margin-bottom: 1.5em;
}
.spoffersbody p.textbn_ar {
 order:4;
 margin:0!important;
}


/* =====================================
   Showroom
===================================== */
.showroomsmm {
 width: 100%;
 height: auto;
 display: block;
background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 1) 0%,
  rgba(24, 29, 37, 0) 100%
);
}
.showroomsbody {
 width: 100%;
 height: auto;
 display: block;
 padding:100px 8% 50px;
}

.showroomlist {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 margin-bottom: 0px;
}
.showroomlist li {
 width:100%;
 height: auto;
 display: block;
 border-bottom: 1px solid var(--color-red);
 transition: .4s all;
 margin-bottom: 40px;
}
.showroomlist li:hover {
 border-bottom: 1px solid var(--color-a9);
}
.showroomlist li a {
 width: 100%;
 height: auto;
 display: block;
 text-decoration: none;
}
.showroomlist li a .shr_img {
 width: 100%;
 height: auto;
 display: block;
 overflow: hidden;
 transition: .4s all;
 border-radius: 30px;
}
.showroomlist li a:hover .shr_img {
filter: brightness(0.5);
}
.showroomlist li a .shr_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:1.25em 1em 2em;
}
.showroomlist li a .shr_cc h3 {
 font-size: clamp(18px, 3vw, 30px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.5em;
 margin-bottom: 0.75em;
 transition: .4s all;
}
.showroomlist li a:hover .shr_cc h3 {
 color: var(--color-red);
}
.showroomlist li a .shr_cc h4 {
  width: fit-content;
  height: auto;
  display: block;
 font-size: clamp(10px, 1.1vw, 12px);
 font-weight: 400;
 color:var(--color-a9);
 border: 1px solid var(--color-a9);
 line-height: 1.1em;
 border-radius: 3px;
 padding:2px 3px;
 margin-bottom: 1em;
}

p.shr_addtxt {
 font-size: clamp(10px, 1.1vw, 12px);
 color: var(--color-a9);
 text-align: left;
 margin:0;
}
p.shr_ad01 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
 color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad02 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
 color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad03 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
 color:var(--color-white);
  line-height: 2em;
  margin:0;
}
p.shr_ad04 {
  width: 100%;
  height: auto;
  display: block;
  font-size: clamp(12px, 1.1vw, 14px);
 color:var(--color-white);
  line-height: 2em;
  margin:0;
}
.fs_s {
  display: block;
  font-size:10px;
}



/* =====================================
   Message
===================================== */
.messagemm {
 width: 100%;
 height: auto;
 display: block;
 background-color: var(--color-black);
 background-image: url(../img/index/messagebg_m.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
}
.messagecov {
 width: 100%;
 height: auto;
 display: block;
 background-image: linear-gradient(
  0deg,
  rgba(24, 29, 37, 0) 0%,
  rgba(24, 29, 37, 1) 100%
);
}
.messagebody {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 text-align: left;
 padding:20% 8% 50%;
}
.messagebody h2 {
 order:2;
 font-size: clamp(26px, 3.5vw, 60px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.1em;
 margin-bottom: 0.5em;
}
.messagebody h3 {
 order:1;
 font-size: clamp(10px, 1.5vw, 14px);
 font-weight: 300;
 font-family: var(--font-en);
 color:var(--color-white);
 letter-spacing: 0.2em;
 line-height: 1.25em;
 margin-bottom: 0.75em;
}
.messagebody h4 {
 order:3;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.5em;
 margin-bottom: 1.5em;
}
.messagebody p.textbn_ar {
 order:4;
 margin-right:0;
 margin-left:0;
}
.messagebody p.messagetxt {
 order:5;
 font-size: clamp(14px, 1.1vw, 16px);
 font-weight: 300;
 color:var(--color-white);
 line-height: 1.5em;
 margin-bottom: 0em;
}



}




/* =========================================
   TopSection
========================================= */

.topsection {
  width: 100%;
  height: auto;
  display: block;
  background-color: var(--color-3rd);

  /* 0〜0.5秒：セクション全体を非表示 */
  animation: topsectionStart 0.5s step-end both;
}

/* =========================================
   Main Visual
========================================= */

.tscov {
  width: 100%;
  height: auto;
  display: block;
  background-image: url(../img/index/tsimage.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  /* 0.5〜2秒：フェードイン＋ぼかし解除 */
  animation: tscovReveal 2s linear both;
}

/* Style for Smartphone */
@media screen and (max-width: 768px) {
.tscov {
  background-image: url(../img/index/tsimage_m.jpg);
  background-position: center bottom;
}
}

/* =========================================
   Gradient Overlay
========================================= */

.tscc {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 15% 0 30% 0;

  background-image: linear-gradient(
    180deg,
    rgba(24, 29, 37, 0) 80%,
    rgba(24, 29, 37, 1) 100%
  );
}

/* Style for Smartphone */
@media screen and (max-width: 768px) {
.tscc {
  aspect-ratio: 9 / 16;
 padding:45% 5% 30% 5%!important;
}
}

/* =========================================
   Animation 01
   0〜0.5s：全体を非表示
========================================= */

@keyframes topsectionStart {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =========================================
   Animation 02
   0.5〜1.5s：Fade In
   1.5〜2.0s：Blur Out
========================================= */

@keyframes tscovReveal {

  /* 0〜0.5秒：透明 */
  0%,
  25% {
    opacity: 0;
    filter: blur(10px);
  }

  /* 1.5秒：完全表示、ぼかし維持 */
  75% {
    opacity: 1;
    filter: blur(10px);
  }

  /* 2秒：ぼかし解除 */
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* =========================================
   Animation 03
   2〜3s：Text Fade Up
========================================= */

/* 文字だけをアニメーション対象にする */
.tscc > h1,
.tscc > h2,
.tscc > h3,
.tscc > ul {
  animation-name: tsccTextReveal;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

@keyframes tsccTextReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 順次フェードイン */
.tscc > h1 {
  animation-delay: 2s;
}

.tscc > h2 {
  animation-delay: 2.1667s;
}

.tscc > h3 {
  animation-delay: 2.3333s;
}

.tscc > ul {
  animation-delay: 2.5s;
}

/* =========================================
   Accessibility
========================================= */

@media (prefers-reduced-motion: reduce) {
  .topsection,
  .tscov,
  .tscc > h1,
  .tscc > h2,
  .tscc > h3,
  .tscc > ul {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
}