/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */

main {
  max-width: 100%!important;
}

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

.searchbody {
  width: 100%;
  height: auto;
  display: block;
  padding:50px 5%;
}

.searchtitle {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.searchtitle h2 {
   font-size: clamp(14px, 1vw, 20px);
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 0;
  color:var(--color-1st);
  margin-bottom: 1.5em;
  order:2;
}
.searchtitle p {
  order:1;
  font-size: clamp(30px, 2.5vw, 100px);
  font-weight: 100;
  line-height: 1em;
  text-align: left;
  color:var(--color-1st);
  font-family: var(--font-en);
  letter-spacing: -0.03em;
  margin: 0 auto 0.25em 0;
}
.searchtitle p strong {
  font-weight: 400;
}

/* Brand search */
ul.brandlist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.brandlist li {
width:24%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.brandlist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 10px 15px 10px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.brandlist li a:hover {
  border:1px solid var(--color-1st);
}


/* Body Type */
ul.bodytypelist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.bodytypelist li {
width:24%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.bodytypelist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 10px 15px 10px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.bodytypelist li a:hover {
  border:1px solid var(--color-1st);
}


/* Shop stock */
ul.shopstocklist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.shopstocklist li{
width:49%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.shopstocklist li a {
width:100%;
height: auto;
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding:15px 10px 15px 10px;
text-decoration: none;
text-align: left!important;
background-color:var(--color-white);
background-image: url(../img-group/header/ic-ar_h_b.webp)!important;
background-repeat: no-repeat;
background-position: 96% center!important;
background-size: auto 20px!important;
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.shopstocklist li a h4 {
  font-size:16px;
  font-weight: 700;
  line-height: 1.1em;
  color:var(--color-1st);
  margin-bottom: 0.3em;
}
ul.shopstocklist li a p {
  font-size:12px;
  font-weight: 300;
  line-height: 1.5em;
  text-align: left;
  color:var(--color-black);
  margin: 0 auto 0 0;
}
ul.shopstocklist li a:hover {
  border:1px solid var(--color-1st);
background-position: 98% center!important;
}


}

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

.searchbody {
  width: 100%;
  height: auto;
  display: block;
  padding:50px 5%;
}

.searchtitle {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.searchtitle h2 {
   font-size: clamp(14px, 1vw, 20px);
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 0;
  color:var(--color-1st);
  margin-bottom: 1.5em;
  order:2;
}
.searchtitle p {
  order:1;
  font-size: clamp(30px, 2.5vw, 100px);
  font-weight: 100;
  line-height: 1em;
  text-align: left;
  color:var(--color-1st);
  font-family: var(--font-en);
  letter-spacing: -0.03em;
  margin: 0 auto 0.25em 0;
}
.searchtitle p strong {
  font-weight: 400;
}

/* Brand search */
ul.brandlist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.brandlist li {
width:32.333333333%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.brandlist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 10px 15px 10px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.brandlist li a:hover {
  border:1px solid var(--color-1st);
}


/* Body Type */
ul.bodytypelist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.bodytypelist li {
width:32.333333333%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.bodytypelist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 10px 15px 10px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.bodytypelist li a:hover {
  border:1px solid var(--color-1st);
}


/* Shop stock */
ul.shopstocklist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.shopstocklist li{
width:49%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.shopstocklist li a {
width:100%;
height: auto;
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding:15px 10px 15px 10px;
text-decoration: none;
text-align: left!important;
background-color:var(--color-white);
background-image: url(../img-group/header/ic-ar_h_b.webp)!important;
background-repeat: no-repeat;
background-position: 96% center!important;
background-size: auto 20px!important;
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.shopstocklist li a h4 {
  font-size:16px;
  font-weight: 700;
  line-height: 1.1em;
  color:var(--color-1st);
  margin-bottom: 0.3em;
}
ul.shopstocklist li a p {
  font-size:12px;
  font-weight: 300;
  line-height: 1.5em;
  text-align: left;
  color:var(--color-black);
  margin: 0 auto 0 0;
}
ul.shopstocklist li a:hover {
  border:1px solid var(--color-1st);
background-position: 98% center!important;
}

}


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

  .searchbody {
  width: 100%;
  height: auto;
  display: block;
  padding:50px 5%;
}

.searchtitle {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.searchtitle h2 {
   font-size: clamp(14px, 1vw, 20px);
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 0;
  color:var(--color-1st);
  margin-bottom: 1.5em;
  order:2;
}
.searchtitle p {
  order:1;
  font-size: clamp(30px, 2.5vw, 100px);
  font-weight: 100;
  line-height: 1em;
  text-align: left;
  color:var(--color-1st);
  font-family: var(--font-en);
  letter-spacing: -0.03em;
  margin: 0 auto 0.25em 0;
}
.searchtitle p strong {
  font-weight: 400;
}

/* Brand search */
ul.brandlist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.brandlist li {
width:32.333333333%;
height: auto;
display: block;
font-size:11px!important;
font-weight:300;
letter-spacing: -1px;
margin:0 0.5% 1%;
border:none;
}
ul.brandlist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 5px 10px 5px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.brandlist li a:hover {
  border:1px solid var(--color-1st);
}


/* Body Type */
ul.bodytypelist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.bodytypelist li {
width:32.333333333%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0.5% 1%;
border:none;
}
ul.bodytypelist li a {
width:100%;
height: auto;
display:flex;
justify-content: center;
padding:60px 10px 15px 10px;
text-decoration: none;
text-align: center!important;
background-repeat: no-repeat;
background-position: center 5px!important;
background-size: auto 50px!important;
background-color:var(--color-white);
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.bodytypelist li a:hover {
  border:1px solid var(--color-1st);
}


/* Shop stock */
ul.shopstocklist {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
ul.shopstocklist li{
width:100%;
height: auto;
display: block;
font-size:14px!important;
font-weight:300;
margin:0 0 1%;
border:none;
}
ul.shopstocklist li a {
width:100%;
height: auto;
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding:15px 10px 15px 10px;
text-decoration: none;
text-align: left!important;
background-color:var(--color-white);
background-image: url(../img-group/header/ic-ar_h_b.webp)!important;
background-repeat: no-repeat;
background-position: 96% center!important;
background-size: auto 20px!important;
border:1px solid var(--color-ccc);
border-radius: 5px;
transition: .4s all;
}
ul.shopstocklist li a h4 {
  font-size:16px;
  font-weight: 700;
  line-height: 1.1em;
  color:var(--color-1st);
  margin-bottom: 0.3em;
}
ul.shopstocklist li a p {
  font-size:12px;
  font-weight: 300;
  line-height: 1.5em;
  text-align: left;
  color:var(--color-black);
  margin: 0 auto 0 0;
}
ul.shopstocklist li a:hover {
  border:1px solid var(--color-1st);
background-position: 98% center!important;
}

}