@charset "utf-8";

/* =====================================================
    調整
===================================================== */
html {
	background-color: transparent !important;
}

/*--帯バナー非表示用--*/
.h_bar, #beltbnr {
	display: none;
}

/* #specialty {
  overflow: hidden;
} */

#specialty a {
  text-decoration: none;
}

#specialty a:hover img {
  opacity: 1 !important;
}

#specialty figure {
  margin: 0;
}

@media only screen and (min-width: 768px) {
  #specialty {
    margin-top: 6px;
  }
}

/*--sticky用--*/
html, body, div.wrapper_ {
  overflow: visible !important;
}

/*--SPのみ表示用--*/
@media only screen and (max-width: 429px) {
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }
}

@media only screen and (min-width: 430px) and (max-width: 767px) {
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }
}

/*--PCのみ表示用--*/
@media only screen and (min-width: 768px) {
  .sp {
    display: none;
  }

  .pc {
    display: block;
  }
}

.is-hidden {
  display: none !important;
}

/* =====================================================
    FONT
===================================================== */
:root {
  --leading-trim: calc((1em - 1lh) / 2);
  --font-size-8: min(1.8604651162790697vw, 8px);
  --font-size-10: min(2.3255813953488373vw, 10px);
  --font-size-12: min(2.7906976744186047vw, 12px);
  --font-size-13: min(3.0232558139534884vw, 13px);
  --font-size-14: min(3.255813953488372vw, 14px);
  --font-size-15: min(3.488372093023256vw, 15px);
  --font-size-16: min(3.7209302325581395vw, 16px);
  --font-size-17: min(3.953488372093023vw, 17px);
  --font-size-18: min(4.186046511627907vw, 18px);
  --font-size-19: min(4.4186046511627906vw, 19px);
  --font-size-20: min(4.651162790697675vw, 20px);
  --font-size-22: min(5.116279069767442vw, 22px);
  --font-size-24: min(5.5813953488372094vw, 24px);
  --font-size-26: min(6.046511627906977vw, 26px);
  --font-size-28: min(6.511627906976744vw, 28px);
  --font-size-30: min(6.976744186046512vw, 30px);
  --font-size-32: min(7.441860465116279vw, 32px);
  --font-size-34: min(7.906976744186046vw, 34px);
  --font-size-36: min(8.372093023255815vw, 36px);
  --font-size-38: min(8.837209302325581vw, 38px);
  --font-size-40: min(9.30232558139535vw, 40px);
  --font-size-42: min(9.767441860465116vw, 42px);
  --font-size-44: min(10.232558139534884vw, 44px);
  --font-size-46: min(910.69767441860465vw, 46px);
  --font-size-48: min(11.162790697674419vw, 48px);
  --font-size-50: min(11.627906976744185vw, 50px);
  --font-size-60: min(13.953488372093023vw, 60px);
}

@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}

/* Noto Serif JP Regular */
.noto-serif-jp-400 {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Noto Serif JP Bold */
.noto-serif-jp-700 {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Oswald ExtraLight */
.oswald-200 {
  font-family: "oswald", sans-serif;
  font-weight: 200;
  font-style: normal;
}

/* Oswald Light */
.oswald-300 {
  font-family: "oswald", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* Oswald Regular */
.oswald-400 {
  font-family: "oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Times New Roman Italic */
.times-new-roman-400 {
  font-family: "times-new-roman", sans-serif;
  font-weight: 400;
  font-style: italic;
}

/* =====================================================
    KV
===================================================== */
.kv {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* =====================================================
    LEAD
===================================================== */
.lead {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.lead p {
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: left;
}

/* PC */
@media only screen and (min-width: 768px) {
  .lead {
    margin: 80px auto 0;
  }

  .lead p {
    text-align: center;
  }
}

/* =====================================================
    Dashed Line
===================================================== */
.dashed-line {
  width: calc(100% - 30px * 2);
  height: 1px;
  margin: 60px auto 0;
  background: repeating-linear-gradient(
    to right,
    #E9E0CF 0,
    #E9E0CF 3px,
    transparent 3px,
    transparent 6px
  );
}

/* PC */
@media only screen and (min-width: 768px) {
  .dashed-line {
    max-width: 800px;
    margin: 120px auto 0;
  }
}

/* =====================================================
    My Essentials 01,02
===================================================== */
.essentials {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
}

.essentials__visual {
  position: relative;
}

.essentials__title {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 2;
  font-size: var(--font-size-50);
  line-height: 1;
  color: #000000;
  letter-spacing: 0.1em;
  text-align: left;
}

.essentials__title span {
  display: block;
  white-space: nowrap;
}

.essentials__image {
  padding-top: 20%;
}

.essentials__content {
  width: calc(100% - 20px * 2);
  margin: 30px auto 0;
}

.essentials__subtitle {
  font-size: var(--font-size-16);
  line-height: 1;
  color: #AA9057;
  text-align: left;
}

.essentials__description {
  padding-top: 20px;
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: left;
}

.variation {
  margin-top: 30px;
}

.variation__name {
  font-size: var(--font-size-12);
  line-height: 1;
  color: #000000;
  text-align: left;
}

.variation__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
}

.variation__color {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.variation__color a {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
}

.variation__color a span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.variation__color a:hover {
  opacity: 0.6;
  scale: 1.2;
}

.color01 {
  background: #E9E4D1;
}

.color02 {
  background: #666762;
}

.color03 {
  background: #6D443E;
}

.color04 {
  background: #E6D5CE;
}

.color05 {
  background: #E3C798;
}

.color06 {
  background: #BCC1CA;
}

.color07 {
  background: #9FADD8;
}

.color08 {
  background: #3C465D;
}

.color09 {
  background: #939492;
}

.color10 {
  background: #E6D5CE;
}

.color11 {
  background: #DDD9D5;
}

/* PC */
@media only screen and (min-width: 768px) {
  .essentials__visual {
    width: 500px;
    margin: 0 auto;
  }

  .essentials__title {
    top: 15px;
    left: -40px;
  }

  .essentials__content {
    width: 580px;
    margin: 60px auto 0;
  }
}

/* =====================================================
    Henry neck,V-neck (My Essentials 01)
===================================================== */
.neck-style01, 
.neck-style02 {
  width: 100%;
  max-width: 700px;
  margin: 60px auto 0;
}

.neck-style01 .look-visual {
  position: relative;
  aspect-ratio: 700 / 890;
  overflow: hidden;
}

.neck-style02 .look-visual {
  position: relative;
  aspect-ratio: 700 / 935;
  overflow: hidden;
}

.look-visual__image {
  position: absolute;
  overflow: hidden;
}

.neck-style01 .look-visual__image--main {
  top: 12.24%;
  left: 0;
  width: 50%;
}

.neck-style01 .look-visual__image--back {
  top: 3.66%;
  left: 44.64%;
  width: 40.69%;
  z-index: 2;
}

.neck-style01 .look-visual__image--front {
  top: 55.33%;
  right: 0;
  width: 45.34%;
  z-index: 3;
}

.neck-style02 .look-visual__image--main {
  top: 16.35%;
  left: 47.38%;
  width: 50%;
}

.neck-style02 .look-visual__image--back {
  top: 3.56%;
  left: 10.24%;
  width: 45.34%;
  z-index: 2;
}

.neck-style02 .look-visual__image--front {
  top: 50.57%;
  left: 0;
  width: 43.02%;
  z-index: 3;
}

.look-visual__label {
  position: absolute;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  margin-block: var(--leading-trim);
}

.look-visual__label::before,
.look-visual__label::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: 1px solid #000000;
}

.look-visual__label::before {
  margin: 0 0 -5px -3px;
  border-left: 1px solid #000000;
  border-radius: 85% 0 0 0;
  transform: rotate(45deg);
}

.look-visual__label::after {
  margin: -5px 0 0 -3px;
  border-right: 1px solid #000000;
  border-radius: 0 85% 0 0;
  transform: rotate(135deg);
}

.neck-style01 .look-visual__label {
  top: 0;
  left: 91%;
  z-index: 4;
}

.neck-style02 .look-visual__label {
  top: 0;
  left: 4%;
  z-index: 4;
}

.look-visual__title {
  position: absolute;
  font-size: var(--font-size-36);
  line-height: 1;
  color: #000000;
}

.neck-style01 .look-visual__title {
  bottom: 1.91%;
  left: 7%;
  z-index: 4;
}

.neck-style02 .look-visual__title {
  bottom: 1.68%;
  left: 61.42%;
  z-index: 4;
}

.look-content {
  width: calc(100% - 30px * 2);
  margin: 30px auto 0;
}

.look-content__description {
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: left;
}

.look-products {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 30px;
  font-size: var(--font-size-12);
  line-height: 1.5;
  color: #000000;
}

.look-products__item a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  transition: opacity 0.3s ease;
}

.look-products__item a:hover {
  opacity: 0.5;
}

/* PC */
@media only screen and (min-width: 768px) {
  .neck-style01, 
  .neck-style02 {
    margin: 120px auto 0;
  }

  .look-content {
    width: 580px;
    margin: 60px auto 0;
  }
}

/* =====================================================
    High neck,V-neck (My Essentials 02)
===================================================== */
.neck-style03, 
.neck-style04 {
  width: 100%;
  max-width: 800px;
  margin: 60px auto 0;
}

.main-visual__title {
  font-size: var(--font-size-36);
  line-height: 1;
  color: #000000;
  text-align: center;
}

.main-visual__image {
  position: relative;
  width: calc(100% - 20px * 2);
  margin: 20px auto 0;
}

.main-visual__label {
  position: absolute;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  margin-block: var(--leading-trim);
}

.main-visual__label::before,
.main-visual__label::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: 1px solid #000000;
}

.main-visual__label::before {
  margin: 0 0 -5px -3px;
  border-left: 1px solid #000000;
  border-radius: 85% 0 0 0;
  transform: rotate(45deg);
}

.main-visual__label::after {
  margin: -5px 0 0 -3px;
  border-right: 1px solid #000000;
  border-radius: 0 85% 0 0;
  transform: rotate(135deg);
}

.neck-style03 .main-visual__label {
  bottom: 20px;
  left: 25px;
  z-index: 2;
}

.neck-style04 .main-visual__label {
  top: 20px;
  left: 20px;
  z-index: 2;
}

.tips {
  width: calc(100% - 30px * 2);
  margin: 60px auto 0;
  border-top: 1px solid #E9E0CF;
}

.tips + .tips {
  padding-bottom: 60px;
  border-bottom: 1px solid #E9E0CF;
}

.tips__heading {
  text-align: center;
}

.tips__label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  font-size: var(--font-size-16);
  line-height: 2;
  color: #AA9057;
  margin-block: var(--leading-trim);
}

.tips__label::before,
.tips__label::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AA9057;
}

.tips__label::before {
  margin: 3px -2px 0 0;
  border-left: 1px solid #AA9057;
  border-radius: 85% 0 0 0;
  transform: rotate(-45deg);
}

.tips__label::after {
  margin: 3px 0 0 -2px;
  border-right: 1px solid #AA9057;
  border-radius: 0 85% 0 0;
  transform: rotate(45deg);
}

.tips__title {
  padding-top: 10px;
  font-size: var(--font-size-20);
  line-height: 1.5;
  color: #AA9057;
}

.tips__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tips__image {
  width: calc(100% - 10px * 2);
  margin: 20px auto 0;
}

.tips__number {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tips__number span {
  font-size: var(--font-size-16);
  line-height: 1;
  color: #AA9057;
}

.tips__number span + span {
  font-size: var(--font-size-36);
  line-height: 1;
  color: #AA9057;
}

.tips__detail {
  width: calc(100% - 10px * 2);
  margin: 30px auto 0;
}

.tips__description {
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: left;
}

.tips-products {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 30px;
  font-size: var(--font-size-12);
  line-height: 1.5;
  color: #000000;
}

.tips-products__item a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  transition: opacity 0.3s ease;
}

.tips-products__item a:hover {
  opacity: 0.5;
}

/* PC */
@media only screen and (min-width: 768px) {
  .neck-style03, 
  .neck-style04 {
    margin: 120px auto 0;
  }

  .main-visual__image {
    width: 500px;
    margin: 20px auto 0;
  }

  .tips-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
  }

  .tips {
    margin: 120px auto 0;
  }

  .tips + .tips {
    border-bottom: none;
  }
}

/* =====================================================
    STAFF STYLING
===================================================== */
.staff-styling {
  width: 100%;
  max-width: 900px;
  margin: 60px auto 0;
}

.styling__title {
  font-size: var(--font-size-22);
  line-height: 1;
  color: #000000;
  text-align: center;
}

.styling__list {
  margin-top: 20px;
}

/* スッタフスタイリング表示調整 */
@media(min-width:1200px) {
  .hacobune-grid-col{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* =====================================================
    ALL STAFF STYLING
===================================================== */
.all-styling {
  width: 100%;
  margin: 60px auto 0;
}

.all-styling__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: #ffffff;
}

.all-styling__sub {
  font-size: var(--font-size-14);
  line-height: 1.5;
  color: #000000;
  text-align: center;
}

.all-styling__title {
  padding-top: 5px;
  font-size: var(--font-size-22);
  line-height: 1.5;
  color: #000000;
  text-align: center;
}

.all-styling__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(300px, 100%);
  height: 40px;
  margin: 20px auto 0;
  border: 1px solid #000000;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.all-styling__arrow {
  position: relative;
  display: inline-block;
  width: 4.7px;
  height: 5.4px;
}

.all-styling__arrow::before,
.all-styling__arrow::after {
  content: "";
  position: absolute;
  top: calc(55% - 0.5px);
  right: 0;
  width: 5px;
  height: 1px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0.5px) 50%;
}

.all-styling__arrow::before {
  transform: rotate(45deg);
}

.all-styling__arrow::after {
  transform: rotate(-45deg);
}

.all-styling__button:hover {
  border: 1px solid #AA9057;
  background-color: #AA9057;
  color: #ffffff;
}

.all-styling__button:hover .all-styling__arrow::before,
.all-styling__button:hover .all-styling__arrow::after {
  background-color: #ffffff;
}

/* PC */
@media only screen and (min-width: 768px) {
  .all-styling {
    margin: 120px auto 0;
  }
}

/* =====================================================
    WOMEN'S CTA
===================================================== */
.womens-cta {
  width: 100%;
  margin: 60px auto 0;
}

.womens-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 80px 0;
  background: #E9E0CF;
}

.womens-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(300px, 100%);
  height: 40px;
  margin: 0 auto;
  border: 1px solid #000000;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: var(--font-size-14);
  line-height: 2;
  color: #000000;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.womens-cta__arrow {
  position: relative;
  display: inline-block;
  width: 4.7px;
  height: 5.4px;
}

.womens-cta__arrow::before,
.womens-cta__arrow::after {
  content: "";
  position: absolute;
  top: calc(55% - 0.5px);
  right: 0;
  width: 5px;
  height: 1px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0.5px) 50%;
}

.womens-cta__arrow::before {
  transform: rotate(45deg);
}

.womens-cta__arrow::after {
  transform: rotate(-45deg);
}

.womens-cta__button:hover {
  border: 1px solid #AA9057;
  background-color: #AA9057;
  color: #ffffff;
}

.womens-cta__button:hover .womens-cta__arrow::before,
.womens-cta__button:hover .womens-cta__arrow::after {
  background-color: #ffffff;
}

/* PC */
@media only screen and (min-width: 768px) {
  .womens-cta {
    margin: 120px auto 0;
  }

  .womens-cta__inner {
    padding: 120px 0;
  }
}

/* =====================================================
    ANIMATION
===================================================== */
/* KV */
.kv picture {
  opacity: 0;
  transition: opacity 2s ease;
}

.kv.is-active picture {
  opacity: 1;
}

/* FADE IN ANIMATION */
.js-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

.js-fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* FADE SCALE ANIMATION */
.js-fade-scale {
  opacity: 0;
  scale: 1.1;
  transition:
    opacity 1.4s ease,
    scale 1.4s ease;
}

.js-fade-scale.is-active {
  opacity: 1;
  scale: 1;
}

/* FADE LEFT ANIMATION */
.js-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

.js-fade-left.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* FADE RIGHT ANIMATION */
.js-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}

.js-fade-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* FADE ANIMATION */
.js-fade {
  opacity: 0;
  transition:
    opacity 1.5s ease;
}

.js-fade.is-active {
  opacity: 1;
}