@import url('./font.css');
@import url('./responsive.css');

body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
/* Scrollbar */
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: #d6dee1;
  border: 6px solid transparent;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* Navbar */
header {
  max-width: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.navbar {
  align-items: center;
  background-color: #353535;
  color: #fff;
  display: flex;
  justify-content: space-between;
  transition: all 0.3s ease;
}
.navbar .navbar-logo {
  align-items: center;
  display: flex;
  transition: all 0.3s ease;
}
.navbar .navbar-brand-name {
  font-size: clamp(12px, 11vw, 24px);
  font-weight: 700;
  margin: 0 8px;
  transition: all 0.3s ease;
}
.navbar .navbar-actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  transition: all 0.3s ease;
}
.navbar .navbar-actions .navbar-actions-list {
  align-items: center;
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar .navbar-actions .navbar-actions-list .navbar-actions-item {
  color: #fff;
}
.navbar .navbar-actions .navbar-actions-list .navbar-actions-item.active {
  color: #e6232a;
  transition: all 0.3s ease;
}
.navbar
  .navbar-actions
  .navbar-actions-list
  .navbar-actions-item
  .navbar-contact-btn {
  background-color: #0079fb;
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.4s;
}
.navbar
  .navbar-actions
  .navbar-actions-list
  .navbar-actions-item
  .navbar-contact-btn:hover {
  background-color: #004ec7;
}
.navbar .navbar-menu {
  align-items: center;
  background-color: #353535;
  cursor: pointer;
  height: 20px;
  border: none;
  padding: 0;
  transition: all 0.3s ease;
  width: 20px;
}

/* Mobile Drawer */
.navbar .backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  transition: all 0.3s ease;
  width: 0;
}
.navbar .mobile-drawer {
  background-color: #fff;
  display: flex;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease;
  width: 0;
}
.navbar .mobile-drawer .mobile-drawer-list {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  width: 100%;
}
.navbar .mobile-drawer .mobile-drawer-list .mobile-drawer-item {
  align-items: center;
  color: #000;
  display: flex;
  height: 48px;
}
.navbar .mobile-drawer .mobile-drawer-list .mobile-drawer-item.active {
  color: #e6232a;
  transition: all 0.3s ease;
}
.navbar
  .mobile-drawer
  .mobile-drawer-list
  .mobile-drawer-item
  .mobile-drawer-close-icon {
  cursor: pointer;
  height: 48px;
  width: 48px;
}
.navbar .mobile-drawer .mobile-drawer-list .mobile-drawer-item a {
  font-size: 20px;
  font-weight: 700;
}
.navbar .mobile-drawer-pattern-container {
  background-image: url(../images/drawer-pattern.svg);
  display: flex;
  flex-direction: column;
  height: calc(100% - 150px);
  overflow: hidden;
  width: 100%;
}

/* Footer */
footer {
  width: 100%;
}
.footer {
  align-items: center;
  background-color: #353535;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 48px;
  transition: all 0.3s ease;
}
.footer .footer-container {
  display: grid;
  max-width: 1440px;
  width: 100%;
}
.footer .footer-container .footer-socials-section {
  align-items: center;
  grid-area: socials;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.footer .footer-container .footer-socials-section .footer-logo {
  max-width: 100%;
}
.footer .footer-container .footer-socials-section .footer-socials {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer
  .footer-container
  .footer-socials-section
  .footer-socials
  .footer-social-logo {
  max-width: 100%;
}
.footer .footer-container .footer-links-section {
  align-items: flex-start;
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}
.footer .footer-container .footer-logo-links-section {
  align-items: flex-start;
  grid-area: logo-links;
  display: flex;
  gap: 24px;
  justify-content: flex-start;
}
.footer .footer-container .footer-logo-links-section a {
  width: 100%;
}
.footer
  .footer-container
  .footer-logo-links-section
  .footer-logo-link-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.footer
  .footer-container
  .footer-logo-links-section
  .footer-logo-link-container
  .footer-logo-link {
  height: 40px;
  width: 40px;
}
.footer
  .footer-container
  .footer-logo-links-section
  .footer-logo-link-container
  .footer-logo-link-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0;
  margin: 0;
}
.footer .footer-container .footer-address-section {
  align-items: flex-start;
  grid-area: address;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}
.footer .footer-container .footer-address-section .footer-phones-container {
  display: flex;
  gap: 24px;
  width: 100%;
}
.footer
  .footer-container
  .footer-address-section
  .footer-phones-container
  .footer-phone-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.footer
  .footer-container
  .footer-address-section
  .footer-phones-container
  .footer-phone-container
  .footer-phone-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 24px;
  padding: 0;
  margin: 0;
}
.footer
  .footer-container
  .footer-address-section
  .footer-phones-container
  .footer-phone-container
  .footer-phone-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.footer .footer-container .footer-address-section .footer-address {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  padding: 0;
}
.footer .footer-pattern {
  height: 80px;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.2;
}
.footer .footer-copyright-container {
  align-items: center;
  display: flex;
  gap: 24px;
  max-width: 100%;
  width: 100%;
}
.footer .footer-hr {
  width: 100%;
}
.footer .footer-copyright-container .footer-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  max-width: 100%;
  text-align: center;
}

/* サブコンテンツ 全体 */
.sub-contents {
  padding: 130px 0 150px;
  max-width: 1000px;
  margin: 0 auto;
}
.sub-contents h2 {
  font-size: 60px;
  color: #353535;
}
/* サイトマップ */
.sitemap-contents a {
  font-size: 18px;
  margin-bottom: 15px;
}
.sitemap-contents li a {
  font-size: 16px;
}
.sitemap-contents a:hover {
  color: #727272;
}
.sitelist {
  display: flex;
  gap: 80px;
  /* justify-content: space-between; */
}
.sitelist ul {
  margin: 0;
}
.sitelist p {
  margin-top: 0;
}
.main-item {
  display:flex;
  flex-direction:column;
}
@media (max-width: 380px){
  .sitemap-contents {
    margin: 0 30px;
  }
  .sitelist {
    display: block;
  }
}
/* カスタマーレビュー */
.reviews-items1,.reviews-items2,.reviews-items3 {
  display: flex;
  /* border: 1px solid #353535; */
  padding: 10px;
  gap: 50px;
  margin-bottom: 50px;
  background-color: #e6e6e6;
}
.reviews-items img {
  height: 270px;
  object-fit: contain;
}
.reviews-items span {
  color:#e6232a;
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
}
.reviews-items p{
  max-width: 600px;
  word-break:break-all;
}
.reviews-end-message {
  font-size: 30px;
  text-align: center;
  color: #d3d3d3;
}
@media (max-width: 786px){
  .reviews-items1,.reviews-items2,.reviews-items3 {
    display: block;
  }
}

/* FAQs */
/* 必須 */
.accordion-content {
  display: none;
}

/* 装飾用 */
/* body {
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
  background: #75E1D6;
} */

.accordion-header {
  background-color: #FFF;
  padding: 12px 45px 10px 20px;
  margin: 10px 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}

.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:12px;
  height:2px;
  margin:auto;
  background:#151E2F;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
  background-color: #FFF;
  padding: 12px 20px 10px;
}

.accordion-header span,
.accordion-content span{
  padding-left: 25px;
  position: relative;
}

.accordion-header span::before{
  position: absolute;
  content:"Q";
  top: 2px;
  left: 0;
  color: #151E2F;
  font-size: 17px;
}


.accordion-content span::before{
    position: absolute;
  content:"A";
  top: 3px;
  left: 0;
  color: #151E2F;
  font-size: 17px;
}

/* hover */
.accordion-header:hover {
  background-color: #F2F2F2;
}

/* オークションLP */
/* メインビジュアル */
.main-view {
  background-image: url(../images/main-view.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 1000px;

}
.main-view img {
  height: 50px;
  margin: 30px;
}
.main-view p {
  color: #dfdfdf;
    font-size: 160px;
    line-height: 155px;
    position: relative;
    top: 135px;
}
.main-view span {
  font-size: 18px;
}
/* 全体 */
.lp-width {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-contents h2 {
  text-align: center;
  color: #505050;
}
.lp-contents p {
  color: #505050;
}
.lp-blank {
  margin-bottom: 150px;
}
/* ホバー時ズーム */
.zoom-box {
  overflow: hidden;
}
.c-bnr.zoom {
  transition-duration: .5s;
}
.c-bnr.zoom:hover {
  transform: scale(1.2);
}
.c-btn.big {
  transition-duration: .4s;
}
.c-btn.big:hover {
  transform: scale(1.1);
}
/* About Valleyhill */
.lp-about-item {
  display: flex;
  gap: 50px;
}
.lp-about-item img {
  height: 350px;
}
/* Valleyhillオークションが選ばれる理由 */
.lp-choice-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.lp-choice-title img {
  height: 50px;
}
.lp-choice-contents1 {
  background-color: #E3E8F2;
  padding: 50px 0;
}
.lp-choice-item1,
.lp-choice-item2,
.lp-choice-item3 {
  padding: 20px;
  background-color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  
}
.lp-choice-contents2 img,
.lp-choice-contents3 img {
  height: 350px;
}
.lp-choice-contents1 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.lp-choice-contents1 .lp-number-w {
  margin-right: 80px;
}
.lp-choice-contents2-item,
.lp-choice-contents3-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.lp-choice-contents1 img {
  height: 100px;
}
.lp-kigou {
  font-size: 100px;
  color: #707070;
}
.lp-number {
  font-size: 200px;
  color: #E3E8F2;
}
.lp-number-w {
  font-size: 200px;
  color: #F5F5F5;
}
.lp-choice-contents1,
.lp-choice-contents3-item {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-bg-color {
  background-color: #E3E8F2;

}
.text-mij {
  font-size: 130px;
  color: #F5F5F5 !important;
  position: relative;
  bottom: 142px;
  line-height: 0px;
  text-align: right;
}
/* オークション＆ストック出品までの流れ */
.lp-step {
  background-color: #E3E8F2;
  padding: 50px;
}
.lp-step-w {
  background-color: #fff;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  height: 230px;
}
.lp-step-item {
  display: flex;
  justify-content: center;
  gap: 150px;
}
.lp-step-item img {
  height: 100px;
}
.lp-step-item a {
  color: #FF5858;
  border-bottom: 1px solid #FF5858;
}
.lp-step-item a:hover {
  color: #ff9797;
  border-bottom: 1px solid #ff9797;
}
.lp-step1,
.lp-step2,
.lp-step3 {
  width: 200px;
}
.lp-step-item span {
      font-size: 100px;
      color: #B3C1DE;
      position: relative;
      top: 60px;
      right: 50px;
}
.banner3 a{
  margin: 0 auto;
  background-color: #FF5858;
  box-shadow: 0 6px 0 #d01a0a;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 27px;
  width: 560px;
  border-radius: 10px;
  transition: .3s;
}
.banner3 a:hover {
  transform: translateY(4px);
  box-shadow: none;
}
.banner3 p {
  color: #fff;
}
.banner3 img {
  height: 50px;
}
/* Client Testimonials */
.lp-clienttestimonials-item {
  display: flex;
  justify-content: space-between;
}
.lp-clienttestimonials-item1,
.lp-clienttestimonials-item2,
.lp-clienttestimonials-item3 {
  background-color: #EEEFFF;
  width: 390px;
  padding: 20px;
}
/* オークションLP Mobile*/
@media (max-width: 380px) {
  .main-view p {
    font-size: 80px;
    line-height: 90px;
  }
  .main-view {
    background-image: url(../images/slider-item-4.JPG);
  }
  .lp-contents {
    padding: 2%;
  }
  .lp-blank {
    margin-bottom: 50px;
}
  .lp-contents h2 {
    font-size: 18px;
  }
  .lp-about-item,
  /* .lp-choice-contents1, */
  .lp-choice-contents2-item, 
  .lp-choice-contents3-item,
  .lp-step-item, 
  .lp-clienttestimonials-item{
    display: block;
  }
  .lp-about-item img,
  .lp-choice-contents2 img, 
  .lp-choice-contents3 img {
    width: 100%;
    object-fit: contain;
  }
  .banner1 img {
    height: 50px;
    width: 100%;
  }
  .lp-choice-title img {
    height: 30px;
  }
  .lp-choice-contents1 {
    gap: 0px;
  }
  .lp-number-w,
  .lp-number {
    font-size: 50px;
  }
  .lp-choice-contents1 .lp-number-w  {
    margin-right: 0;
  }
  .lp-choice-item1, .lp-choice-item2, .lp-choice-item3 {
    width: 100px;
    height: 100px;
    padding: 0;
  }
  .lp-choice-contents1 img {
    height: 50px;
  }
  .lp-kigou {
    font-size: 30px;
  }
  .lp-contents .lp-choice-contents1 p {
    font-size: 14px;
    margin: 0;
  }
  .banner3 a{
    gap: 18px;
    width: 300px;
    padding: 10px;
  }
  .banner3 img {
    height: 30px;
  }
  .text-mij {
    font-size: 50px;
    bottom: 55px;
    text-align: center;
  }
  .lp-step {
    padding: 0px 80px 50px 80px;
  }
  .lp-step1, .lp-step2, .lp-step3 {
    width: 100%;
  }
  .lp-clienttestimonials-item1, 
  .lp-clienttestimonials-item2, 
  .lp-clienttestimonials-item3 {
    width: 100%;
    margin-bottom: 10px;
  }
}