:root {
  --index_font_39: max(39px, 2.6vw);
  --index_font_17: max(17px, 1.24vw);
  --index_font_61: 3.6vw;
  --index_margin_70: max(70px, 4.67vw);
  --index_margin_60: max(60px, 4vw);
  --index_margin_120: max(120px, 8.78vw);
  --button_area_17: max(17px, 1.24vw);
  --button_area_10: max(10px, 0.67vw);
  --button_area_65: max(65px, 4.76vw);
}

@media screen and (max-width: 770px) {
  :root {
    --index_font_17: max(14px, 3.73vw);
    --index_font_39: max(22px, 5.87vw);
    --index_font_61: max(35px, 9.33vw);
    --index_margin_70: max(40px, 10.67vw);
    --index_margin_60: max(30px, 8vw);
    --index_margin_120: max(65px, 17.33vw);
    --button_area_17: max(14px, 3.73vw);
    --button_area_10: max(7px, 1.87vw);
    --button_area_65: max(55px, 14.67vw);
  }
}
.firstView {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.firstView video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.wrapper h1 {
  font-size: clamp(1.375rem, 0.929rem + 1.905vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 0.268rem + 9.524vw, 8.125rem);
}
@media screen and (max-width: 770px) {
  .wrapper h1 {
    width: 93%;
    margin: 0 auto 40px;
  }
}
.wrapper h1 span {
  font-size: clamp(0.688rem, 0.588rem + 0.423vw, 0.938rem);
  display: block;
  letter-spacing: 0.15em;
}
.wrapper .philosophyArea {
  max-width: 1320px;
  width: 93%;
  margin: clamp(3.75rem, 2.262rem + 6.349vw, 7.5rem) auto clamp(6.25rem, 3.274rem + 12.698vw, 13.75rem);
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea {
    width: 100%;
  }
}
.wrapper .philosophyArea ul {
  display: grid;
  gap: clamp(6.25rem, 4.514rem + 7.407vw, 10.625rem);
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul {
    gap: 0;
  }
}
.wrapper .philosophyArea ul li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.875rem, 1.627rem + 1.058vw, 2.5rem);
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li {
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    will-change: transform;
    transition: transform 0.6s ease;
    justify-content: flex-start;
    gap: 0;
    padding: 0 3.5vw;
  }
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li .textArea {
    order: 2;
    margin-top: clamp(23px, 6.41vw, 30px);
    align-self: self-start;
  }
}
.wrapper .philosophyArea ul li .textArea h2 {
  font-size: clamp(1.25rem, 1.076rem + 0.741vw, 1.688rem);
  line-height: 1.47;
  letter-spacing: 0.08em;
  margin-bottom: clamp(1.875rem, 1.205rem + 2.857vw, 3.563rem);
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li .textArea h2 {
    font-size: clamp(19px, 5.128vw, 21px);
    margin-bottom: clamp(20px, 5.897vw, 30px);
  }
}
.wrapper .philosophyArea ul li .textArea h2 span {
  font-size: clamp(0.75rem, 0.626rem + 0.529vw, 1.063rem);
  margin-bottom: clamp(0.5rem, 0.401rem + 0.423vw, 0.75rem);
  display: block;
  line-height: 1;
}
.wrapper .philosophyArea ul li .textArea h3 {
  font-size: clamp(0.875rem, 0.801rem + 0.317vw, 1.063rem);
  margin-bottom: clamp(1.438rem, 1.189rem + 1.058vw, 2.063rem);
  line-height: 1;
}
.wrapper .philosophyArea ul li .textArea h3 span {
  display: inline-block;
  font-size: clamp(0.875rem, 0.801rem + 0.317vw, 1.063rem);
  line-height: 1.64;
  letter-spacing: 0.14em;
  margin-bottom: 0.19em;
}
.wrapper .philosophyArea ul li .textArea h3 span:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li .textArea h3 {
    font-size: clamp(13px, 3.589vw, 15px);
    margin-bottom: clamp(17px, 5.128vw, 23px);
  }
  .wrapper .philosophyArea ul li .textArea h3 span {
    font-size: clamp(13px, 3.589vw, 15px);
  }
}
.wrapper .philosophyArea ul li .textArea p {
  font-size: clamp(0.75rem, 0.676rem + 0.317vw, 0.938rem);
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li .textArea p {
    font-size: clamp(11px, 3.076vw, 13px);
    line-height: 1.73;
  }
}
.wrapper .philosophyArea ul li .img {
  width: 100%;
  position: relative;
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea ul li .img {
    order: 1;
  }
}
.wrapper .philosophyArea ul li .img::before {
  content: "";
  width: 100%;
  padding-top: 68.75%;
  display: block;
}
.wrapper .philosophyArea ul li .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 770px) {
  .wrapper .philosophyArea .philosophywrapper {
    position: relative;
    overflow: hidden;
  }
  .wrapper .philosophyArea .container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
  }
  .wrapper .philosophyArea .horiz-gallery-strip,
  .wrapper .philosophyArea .horiz-gallery-wrapper {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    position: relative;
  }
}
.wrapper .handmadeArea {
  background-color: #EBEBEB;
  margin-bottom: 220px;
}
.wrapper .handmadeArea .handmadeContainer {
  max-width: 1320px;
  width: 93%;
  margin: 0 auto;
  padding: 60px 0 clamp(5rem, 2.876rem + 9.061vw, 13.75rem);
}
.wrapper .handmadeArea .handmadeContainer h1 {
  margin-bottom: clamp(2.5rem, 2.348rem + 0.647vw, 3.125rem);
}
.wrapper .handmadeArea .handmadeContainer .mainSub {
  font-size: clamp(0.875rem, 0.814rem + 0.259vw, 1.125rem);
}
.wrapper .handmadeArea .handmadeContainer .mainArea {
  margin-top: clamp(2.5rem, 2.348rem + 0.647vw, 3.125rem);
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea .img {
  width: 100%;
  position: relative;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea .img img {
  position: absolute;
  top: 0;
  left: 0;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.first {
  grid-column: 1/8;
  grid-row: 1;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.first .img::before {
  content: "";
  width: 100%;
  padding-top: 58.33%;
  display: block;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.second {
  grid-column: 10/13;
  grid-row: 3;
  align-self: start;
  margin-top: -60px;
  margin-right: 20px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.second .img::before {
  content: "";
  width: 100%;
  padding-top: 154.67%;
  display: block;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.third {
  grid-column: 2/7;
  grid-row: 5;
  margin-top: 130px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.third .img::before {
  content: "";
  width: 100%;
  padding-top: 64.68%;
  display: block;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.forth {
  grid-column: 6/13;
  grid-row: 6;
  margin-top: 150px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.forth .img::before {
  content: "";
  width: 100%;
  padding-top: 65.56%;
  display: block;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.fifth {
  grid-column: 2/8;
  grid-row: 7;
  margin-top: 150px;
  margin-left: 40px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.fifth .img::before {
  content: "";
  width: 100%;
  padding-top: 76.47%;
  display: block;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .firstText h3,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .secondText h3,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .thirdText h3,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .forthText h3,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .fifthText h3,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .sixthText h3 {
  font-size: clamp(0.875rem, 0.801rem + 0.317vw, 1.063rem);
  margin-bottom: clamp(1.875rem, 1.647rem + 0.971vw, 2.813rem);
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .firstText p,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .secondText p,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .thirdText p,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .forthText p,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .fifthText p,
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .sixthText p {
  font-size: clamp(0.75rem, 0.676rem + 0.317vw, 0.938rem);
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .firstText {
  grid-column: 9/13;
  grid-row: 1;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .secondText {
  grid-column: 2/6;
  grid-row: 3;
  margin-top: 120px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .thirdText {
  grid-column: 5/9;
  grid-row: 4;
  margin-left: 70px;
  margin-top: -150px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .forthText {
  grid-column: 9/13;
  grid-row: 5;
  flex-direction: column;
  display: flex;
  justify-content: center;
  margin-top: 130px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .fifthText {
  grid-column: 2/6;
  grid-row: 6;
  flex-direction: column;
  display: flex;
  justify-content: center;
  margin-top: 150px;
}
.wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .sixthText {
  grid-column: 9/12;
  grid-row: 7;
  flex-direction: column;
  display: flex;
  justify-content: center;
  margin-top: 150px;
}
@media screen and (max-width: 770px) {
  .wrapper .handmadeArea {
    margin-bottom: 0;
  }
  .wrapper .handmadeArea .handmadeContainer {
    width: 100%;
  }
  .wrapper .handmadeArea .handmadeContainer h1 {
    margin: 0 auto clamp(2.5rem, 2.348rem + 0.647vw, 3.125rem);
    width: 100%;
    padding-left: 20px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainSub {
    width: 100%;
    padding-left: 20px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.first {
    grid-column: 1/10;
    grid-row: 1;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.second {
    grid-column: 9/14;
    grid-row: 2;
    align-self: start;
    margin-top: 75px;
    margin-right: 0px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.third {
    grid-column: 1/11;
    grid-row: 5;
    margin: 80px auto 0 20px;
    width: 100%;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.forth {
    grid-column: 1/14;
    grid-row: 7;
    margin: 80px auto 0;
    width: 93%;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .imageArea.fifth {
    grid-column: 7/13;
    grid-row: 8;
    margin-top: 150px;
    margin-left: 0px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .firstText {
    grid-column: 1/7;
    grid-row: 2;
    width: 100%;
    margin: 0 auto;
    margin-top: 60px;
    padding-left: 20px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .secondText {
    grid-column: 3/11;
    grid-row: 3;
    margin-top: clamp(3.75rem, 2.84rem + 3.883vw, 7.5rem);
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .thirdText {
    grid-column: 5/13;
    grid-row: 4;
    margin-left: 0px;
    margin-top: 80px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .forthText {
    grid-column: 1/11;
    grid-row: 6;
    flex-direction: column;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
    margin-top: 80px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .fifthText {
    grid-column: 1/8;
    grid-row: 8;
    flex-direction: column;
    display: flex;
    justify-content: start;
    width: 100%;
    margin: 80px auto 0;
    padding-left: 20px;
  }
  .wrapper .handmadeArea .handmadeContainer .mainArea .contentArea .sixthText {
    grid-column: 3/12;
    grid-row: 9;
    flex-direction: column;
    display: flex;
    justify-content: center;
    margin-top: 80px;
  }
}
.wrapper .sustainabilityArea {
  display: flex;
  align-items: start;
  margin-bottom: clamp(3.75rem, 1.323rem + 10.356vw, 13.75rem);
}
.wrapper .sustainabilityArea .sustainImage {
  width: 50%;
  min-width: 0;
}
.wrapper .sustainabilityArea .sustainImage .img {
  width: 100%;
  position: relative;
}
.wrapper .sustainabilityArea .sustainImage .img::before {
  content: "";
  width: 100%;
  padding-top: 103.19%;
  display: block;
}
.wrapper .sustainabilityArea .sustainImage .img img {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-position: 25% center;
     object-position: 25% center;
}
.wrapper .sustainabilityArea .sustainImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.wrapper .sustainabilityArea .sustainTextArea {
  width: 50%;
  display: flex;
  justify-content: center;
  padding: 0 100px;
  flex-direction: column;
}
.wrapper .sustainabilityArea .sustainTextArea h1 {
  margin-bottom: clamp(2.5rem, 2.348rem + 0.647vw, 3.125rem);
}
.wrapper .sustainabilityArea .sustainTextArea ul li {
  border-bottom: 1px solid #000000;
  padding-bottom: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
}
.wrapper .sustainabilityArea .sustainTextArea ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.wrapper .sustainabilityArea .sustainTextArea ul li h3 {
  font-size: clamp(0.875rem, 0.801rem + 0.317vw, 1.063rem);
  margin-bottom: clamp(15px, -1.739px + 2.174vw, 20px);
}
.wrapper .sustainabilityArea .sustainTextArea ul li p {
  font-size: clamp(0.75rem, 0.676rem + 0.317vw, 0.938rem);
}
@media screen and (max-width: 770px) {
  .wrapper .sustainabilityArea {
    flex-direction: column;
  }
  .wrapper .sustainabilityArea .sustainImage {
    width: 100%;
    margin-bottom: 60px;
  }
  .wrapper .sustainabilityArea .sustainTextArea {
    width: 100%;
    padding: 0 20px;
  }
}