:root {
  --index_font_14: max(14px, 1.02vw);
  --index_font_17: clamp(15px, 12.701px + 0.299vw, 17px);
  --index_font_17_2: clamp(15px, 12.701px + 0.299vw, 17px);
  --index_font_19: max(19px, 1.39vw);
  --index_font_20: max(20px, 1.46vw);
  --index_font_28: clamp(18px, 6.507px + 1.493vw, 28px);
  --index_font_51: max(51px, 3.73vw);
  --margin_19: max(19px, 1.39vw);
  --margin_30: max(30px, 2.20vw);
  --margin_50: max(50px, 3.66vw);
  --margin_60: max(60px, 4.39vw);
  --gap_15: max(15px, 1vw);
  --padding_30: max(30px, 2.20vw);
  --padding_20: max(20px, 1.46vw);
  --padding_70: max(20px, 5.12vw);
  --margin_scroll_120: max(140px, 10.25vw)
}

@media screen and (max-width: 770px) {
  :root {
    --index_font_19: max(13px, 3.47vw);
    --index_font_51: max(41px, 10.9vw);
    --margin_19: max(15px, 4vw);
    --margin_50: max(10px, 2.67vw);
    --margin_60: max(50px, 13.33vw);
    --gap_15: max(5px, 1.33vw);
    --padding_70: max(35px, 9.33vw);
    --margin_scroll_120: max(100px, 26.67vw)
  }
}

html {
  scroll-behavior: smooth;
}


#companyInfo,
#paymentArea,
#cancelArea,
#shippingArea,
#fabricArea,
#returnExchangeArea,
#serviceArea,
#ownerArea,
#showroomArea {
  scroll-margin-top: var(--margin_scroll_120);
}

main .firstView {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (max-width: 770px) {
  main .firstView {
    height: auto;
    flex-direction: column;
  }
}

main .firstView .title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--block_margin) auto;
}

main .firstView h1 {
  font-size: var(--index_font_51);
}

main .firstView .title .subTitleEnglish {
  font-size: var(--index_font_19);
  letter-spacing: 0.15em;
  margin-top: var(--margin_19);
  line-height: 1;
}

main .firstView .buttonAreaList {
  max-width: 1200px;
  width: 93%;
  margin: 0 auto;
}

main .firstView .buttonAreaList ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap_15);
  margin: var(--margin_60) auto var(--margin_60) auto;
}

main .firstView .buttonAreaList ul li .base_btn {
  border-radius: 30px;
  border: 1px solid #000000;
  padding: 14px 16px;
}

main .firstView .buttonAreaList ul li .base_btn span {
  font-size: clamp(13px, 9.552px + 0.448vw, 16px);
}

main .firstView .searchArea {
  width: 100%;
  height: auto;
  max-width: 519px;
  margin: 0 auto;
  line-height: 1;
  position: relative;
  z-index: 0;
}

main .firstView .searchArea #searchInput {
  width: 100%;
  height: auto;
  border: 1px solid #333333;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: var(--index_font_17);
}

main .firstView .searchArea #changeButton {
  position: absolute;
  top: 50%;
  right: 0px;
  width: 55px;
  height: 100%;
  padding: 9px;
  transform: translateY(-50%);
  z-index: 1;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 770px) {
main .firstView .searchArea #changeButton {
  width: 49px;
}
}
main .firstView .searchArea #changeButton img {
  object-fit: contain;
  width: 77%;
  height: auto;
}

main .firstView .search_result .container #vw_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main .firstView .search_result {
  width: 100%;
}

main .firstView .search_result .container ul li {
  width: 93%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 10px;
}

main .firstView .search_result .container ul li h5 {
  font-size: var(--index_font_20);
  margin: var(--margin_30) 0;
  text-align: center;
}

main .firstView .search_result .container ul li h5 span {
  font-size: var(--small_font);
}

main .firstView .search_result .container .questionArea {
  background-color: #DEDEDE;
}

main .firstView .search_result .container .questionArea>div {
  display: flex;
  justify-content: start;
  align-items: baseline;
  padding: var(--index_font_17_2);
}

main .firstView .search_result .container .questionArea span {
  font-size: var(--index_font_17_2);
  color: #1172C6;
  margin-right: 10px;
}

main .firstView .search_result .container .questionArea p {
  margin-top: 0;
}

main .firstView .search_result .container .answerArea span {
  font-size: var(--index_font_17_2);
  color: #AF1515;
  margin-right: 10px;
}

main .firstView .search_result .container .answerArea .answerContent {
  padding: var(--index_font_17_2) var(--index_font_17_2) 0 var(--index_font_17_2);
}
main .fontAnswerArea{
  width: 97%;
}
.fontQuestionArea p,
.fontAnswerArea p,
.fontAnswerArea p a {
font-size: clamp(13px, 10.701px + 0.299vw, 15px);
} 


@media screen and (max-width: 770px) {
  main .firstView .buttonAreaList ul {
    row-gap: 10px;
  }

  main .firstView .buttonAreaList ul {
    margin-top: max(30px, 8vw);
  }

  main .firstView .searchArea {
    width: 93%;
  }
}

main .contentAllArea {
  background-color: #F7F7F7;
}

main .contentAllArea .faqList {
  width: 93%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--padding_70) 0;
  display: flex;
  gap: clamp(35px, 17.761px + 2.239vw, 50px);
}

main .contentAllArea .faqList .categoryLeft {
  position: sticky;
  align-self: flex-start;
  width: 192px;
  top: 150px;
  white-space: nowrap;
}
main .contentAllArea .faqList .categoryLeft ul{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9, 1fr);
}
main .contentAllArea .faqList .categoryLeft ul li {
  border-top: 1px solid #B0B2AF;
  padding: 19px 0;
  width: 192px;
  height: calc(68vh / 8);
  max-height: 73px;
  display: flex;
  align-items: center;
  justify-content: start;
}

main .contentAllArea .faqList .categoryLeft ul li:last-child {
  border-bottom: 1px solid #B0B2AF;
}

main .contentAllArea .faqList .categoryLeft ul li a {
  font-size: 14px; 
  line-height: 1;
  display: block;
}

main .contentAllArea .faqList .categoryLeft ul li a:hover {
  color: #B0B2AF;
}

main .contentAllArea .QandAright {
  width: calc(100% - 192px)
}

main .contentAllArea .QandAright ul li {
  margin-bottom: var(--margin_50);
}

main .contentAllArea .QandAright h3 {
  font-size: var(--index_font_28);
  line-height: 1;
  margin-bottom: var(--title_margin);
}

main .contentAllArea .QandAright .questionArea {
  transition: background-color .35s ease;
  background-color: #DEDEDE;
}
main .contentAllArea .QandAright .questionArea:active{
  background-color: #B0B2AF;
}

main .contentAllArea .QandAright .questionArea>div {
  display: flex;
  justify-content: start;
  align-items: baseline;
  padding: var(--index_font_17_2);
}

main .contentAllArea .QandAright .questionArea p {
font-size: clamp(13px, 10.701px + 0.299vw, 15px);
}

main .contentAllArea .QandAright .questionArea span {
  font-size: var(--index_font_17_2);
  color: #1172C6;
  margin-right: 10px;
}

.answerContent {
  font-size: var(--base_font);
  padding: var(--index_font_17_2);
}

.answerContent>div:first-of-type {
  display: flex;
  justify-content: start;
  align-items: baseline;
}

.answerContent>div {
  margin-bottom: var(--list_margin)
}

.answerContent>div a:hover,
.answerContent a:hover {
  color: #B0B2AF;
}

.answerContent .flex {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(13px, 10.701px + 0.299vw, 15px) clamp(20px, 8.507px + 1.493vw, 30px);
}

.exchangeAreaImage img {
  width: 100%;
  height: auto;
  max-width: 430px;
  margin-bottom: var(--list_margin, 30px);
}

.answerContent>div:last-child {
  margin-bottom: 0;
}

.answerContent small {
  display: block;
}

.answerContent .tableAnswer table tr {
  border-bottom: #B0B2AF 1px solid;
}

.answerContent .tableAnswer table tr:first-of-type td {
  padding-top: 0;
}

.answerContent .tableAnswer table td:first-child {
  padding-left: 0;
}

.answerContent .tableAnswer table td {
  padding: 15px 0 15px var(--list_margin);
}

.answerContent .tableAnswer table td p {
  width: auto;
  text-wrap: nowrap;
}

m.answerContent .tableAreaReturn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--list_margin) var(--title_margin);
}
.tableAreaReturn {
  width: 100%;
}
.tableAreaReturn div{
  width: 100%;
  overflow-x: scroll;
}
main .contentAllArea .QandAright .answerArea span {
  font-size: var(--index_font_17_2);
  color: #AF1515;
  margin-right: 10px;
}

.tableAnswer, .kijiStyle {
  margin-top: var(--list_margin, 30px)
}

.tableAnswer, .kijiStyle a,.tableAnswer, .kijiStyle p{
  font-size: clamp(13px, 10.701px + 0.299vw, 15px);
}

.supportArea {
  display: flex;
  align-items: center;
  font-size: clamp(13px, 10.701px + 0.299vw, 15px);
  margin-top: var(--list_margin, 30px);
}
@media screen and (max-width: 770px) {
.supportArea {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
}

.supportArea a.tel {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(16px, 1.8vw, 18px);
  transition: opacity .3s;
}

.supportArea a.tel img {
  width: 20px;
  height: auto;
}

.supportArea a.tel img {
  width: 20px;
  height: auto;
}


.supportArea a.arrow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, 10.701px + 0.299vw, 15px);
  transition: opacity .3s;
  margin-left: clamp(15px, 1.8vw, 30px);
}
@media screen and (max-width: 770px) {
.supportArea a.arrow {
  margin-left:0;
}
}


@media screen and (max-width: 770px) {
  main .contentAllArea .QandAright {
    width: 100%;
  }

  main .contentAllArea .QandAright h3:not(:first-of-type) {
    margin-top: var(--title_margin);
  }

  .answerContent .tableAnswer {
    overflow-x: scroll;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.answerArea {
  height: 0;
  overflow: hidden;
  transition: height 0.35s;
}

.answerArea.open,
.paymentContent.open,
.paidyContent.open {
  height: auto;
  overflow: hidden;
  transition: height 0.35s;
}

.paymentContent,
.paidyContent {
  height: 0;
  overflow: hidden;
  transition: height 0.35s;
}

.paymentDetails,
.paidyDetails {
  cursor: pointer;
  position: relative;
  display: flex;
  width: fit-content;
  justify-content: start;
  align-items: center;
}

.paymentDetails::after,
.paidyDetails::after {
  content: "+";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.paymentDetails.open::after,
.paidyDetails.open::after {
  transform: translateY(-50%) rotate(45deg);
}

.paymentContent>div:first-child,
.paidyContent>div:first-child {
  margin-top: var(--list_margin, 30px);
}

.paymentContent>div,
.paidyContent>div {
  margin-bottom: var(--list_margin, 30px);
}

.paymentContent>.creditCardArea img {
  max-width: 430px;
  margin: 5px 0;
  width: 100%;
}

.paymentContent>div:last-child,
.paidyContent>div:last-child {
  margin-bottom: 0;
}