@charset "UTF-8";

/*SP、PC共通スタイルここに*/
/* base */
.ftool-wrapper>.article,
.ftool-wrapper .description,
.ss-article-main-image,
.ftool-wrapper p,
.ftool-wrapper h1,
.ftool-wrapper h2,
.ftool-wrapper h3,
.ftool-wrapper h4,
.ftool-wrapper h5 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  color: #26211F;
}

.ftool-wrapper .col--02--Y>div {
  margin-bottom: 4px !important;
}

.ftool-wrapper p {
  margin-block-start: 0em;
  margin-block-end: 0em;
  font-size: 14px;
  font-weight: normal;
  line-height: 160%;
}

.ftool-wrapper p,
.ftool-wrapper h1,
.ftool-wrapper h2,
.ftool-wrapper h3,
.ftool-wrapper h4,
.ftool-wrapper h5,
.ftool-wrapper li {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: normal;
}

/* setting */
html,
body {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overflow-x: visible;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ftool-wrapper h1,
.ftool-wrapper h2,
.ftool-wrapper h3,
.ftool-wrapper h4,
.ftool-wrapper h5 {
  line-height: 1em;
}

:root {
  --primary: #26211F;
  --secondary: #808080;
}

:root {
  --w-100: 100%;
  --w-90: 90%;
  --w-80: 80%;
}

:root {
  --font-IvyOra: "ivyora-text", serif;
}

@media (hover: hover) {
  a:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
    transition: 0.1s;
  }

}

/* setting */

/* credit */

.credit li.title,
.credit li.description {
  display: none;
}

.ftool-wrapper .ref-item {
  font-size: 10px;
  margin-bottom: 12px;

  .thumb {
    width: 50px;
  }

  .brand {
    display: none;
  }

  .name {
    margin-left: 60px;
  }

  .price {
    margin-left: 60px;
  }
}

.ftool-wrapper .credit ul {
  display: flex;
  flex-flow: wrap;
  margin: 0 auto;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.ftool-wrapper .credit li {
  width: calc(164 / 375 * 100vw);
  font-size: 10px;
}

.ftool-wrapper .ref-item .thumb {
  width: 50px;
}

.ftool-wrapper .ref-item .name {
  margin-left: 60px;
}

.ftool-wrapper .ref-item .price {
  margin-left: 60px;
  font-size: 10px;
}

.ftool-wrapper .line_up_two {
  width: 100%;
  float: none;
  padding-right: 0;
}

.ftool-wrapper .col--02--Y {
  max-width: 1000px !important;
}

.type1 {
  display: flex;
  flex-flow: nowrap;
  width: 100%;
  justify-content: space-between;
}

.type2 {
  display: flex;
  flex-flow: nowrap;
  width: 100%;
  gap: 16px;
}

.type3 {
  display: flex;
  flex-flow: nowrap;
  width: 100%;
  justify-content: center;
}

.type4 {
  display: flex;
  flex-flow: nowrap;
  width: 100%;
  justify-content: right;
}

#container {
  width: 100%;
  position: relative;
}

#container .l-articleLayout__article .visual {
  position: relative;
}

#container .visual__title {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: fit-content;
}

#container .category h2 {
  padding-top: var(--space-sm);
  font-size: 10px;
  letter-spacing: 5%;
}

#container .leadBlock {
  margin: var(--space-lg) auto;
  width: var(--w-80);
}

#container .look__main-image {
  position: relative;
}

#container .look {
  scroll-margin-top: 0;
}

#container .look1 {
  background-color: #E4E2E2;
}

#container .look2 {
  background-color: #DDE3E5;
}

#container .look3 {
  background-color: #E5E3DD;
}

#container .look__main-title {
  display: flex;
  width: var(--w-80);
  justify-content: space-between;
  margin: auto;
  align-items: center;
}

#container .look__main-title p {
  text-align: right;
  font-weight: bold;
  line-height: 1.4em;
  font-size: 15px;
  letter-spacing: 0;
}

#container .look__header {
  position: sticky;
  top: 0;
  z-index: 999;
}

#container .look1 .look__header {
  background: rgba(228, 226, 226, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#container .look2 .look__header {
  background: rgba(221, 227, 229, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#container .look3 .look__header {
  background: rgba(229, 227, 221, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#container .look__header h2 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-IvyOra);
  font-size: 18px;
  padding-right: 20px;
  border-top: solid 1px #26211F;
  border-bottom: solid 1px #26211F;
}

#container .look__header h2 span.look__number {
  font-family: var(--font-IvyOra);
  font-size: 20px;
  font-style: italic;
  padding: 20px;
  border-right: solid 1px #26211F;
}

#container .look__body {
  margin-top: var(--space-lg);
  position: relative;
}

#container .look__body-first {
  position: relative;
}

#container .look__body-first::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: solid 1px #26211F;
  width: var(--w-90);
  left: 0;
  right: 0;
  margin: auto;
}

#container .look__content {
  width: var(--w-100);
  margin: auto;
}

#container .look__main-image {
  width: var(--w-90);
  margin: auto;
}

#container .look__lead {
  margin: var(--space-md) auto;
  position: relative;
  width: var(--w-90);
}

#container .look__lead::after,
#container .look__lead::before {
  position: absolute;
  width: 32px;
  height: 16px;
  content: '';
}

#container .look__lead::before {
  border-left: solid 1px #26211F;
  border-top: solid 1px #26211F;
  top: 0;
  left: 0;
}

#container .look__lead::after {
  border-right: solid 1px #26211F;
  border-bottom: solid 1px #26211F;
  bottom: 0;
  right: 0;
}

#container .look__lead p {
  padding: 16px 24px !important;
}

#container .look__credit {
  width: var(--w-90);
  margin: 0 auto;
  padding-bottom: var(--space-lg);
}

#container .look__credit p {
  font-size: 10px;
  line-height: 1em;
  margin-bottom: 8px !important;
}

#container .profile__detail {
  border-top: solid 1px #26211F;
  border-bottom: solid 1px #26211F;
}

#container .profile__detail-text h2 {
  font-family: "fot-matisse-pron", sans-serif;
  font-weight: 500;
  font-style: normal;
}

#container .profile__detail-text a {
  border-bottom: solid 1px #26211F;
}

#container li.profile__list-name {
  font-size: 10px;
  line-height: 1em;
  color: #777777;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  /*SP用スタイル*/

  :root {
    --space-xs: calc(4 / 375 * 100vw);
    --space-sm: calc(8 / 375 * 100vw);
    --space-md: calc(32 / 375 * 100vw);
    --space-lg: calc(40 / 375 * 100vw);
    --space-xl: calc(80 / 375 * 100vw);
  }

  .scale1 {
    width: calc(176 / 375 * 100vw);
  }

  .scale2 {
    width: calc(183 / 375 * 100vw);
  }

  .scale3 {
    width: calc(160 / 375 * 100vw);
  }

  .scale4 {
    width: calc(175 / 375 * 100vw);
  }

  .scale5 {
    width: calc(200 / 375 * 100vw);
  }

  .scale6 {
    width: calc(145 / 375 * 100vw);
  }

  .scale7 {
    width: calc(224 / 375 * 100vw);
  }

  .style1 {
    margin-top: calc(63 / 375 * 100vw);
  }

  .style2 {
    margin-top: calc(57 / 375 * 100vw);
  }

  .style3 {
    margin-top: calc(145 / 375 * 100vw);
    margin-left: calc(-20 / 375 * 100vw);
  }

  .style4 {
    margin-top: calc(138 / 375 * 100vw);
    margin-right: calc(-15 / 375 * 100vw);
    z-index: 100;
  }

  #container {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .visual {
    overflow: hidden;
  }

  .pc {
    display: none;
  }

  #container .visual__title {
    width: calc(234 / 375 * 100vw);
  }

  #container .leadBlock p {
    font-size: 11px;
  }

  #container .category {
    margin: 0 auto calc(64 / 375 * 100vw);
    width: calc(295 / 375 * 100vw);
    max-width: 295px;
  }

  #container ul.category__list {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: baseline;
  }

  #container li.category__item {
    width: 89px;
    border-bottom: solid 1px #26211F;
  }

  #container li.category__item a {
    font-family: var(--font-IvyOra);
    font-size: 11px;
    letter-spacing: 5%;
    padding: 8px 6px 2px;
    width: 77px;
    display: block;
    position: relative;
  }

  #container li.category__item a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 5px;
    height: 5px;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
    position: absolute;
    bottom: 0;
    top: 6px;
    margin: auto 0;
    right: 6px;
  }

  #container li.category__item a span {
    font-family: var(--font-IvyOra);
    font-style: italic;
    font-size: 14px;
  }

  #container .look__main-title {
    margin-bottom: calc(22 / 375 * 100vw) !important;
    width: var(--w-90);
  }

  #container .look__main-title h3 {
    width: calc(80 / 375 * 100vw);
  }

  #container .look__gallery .look__gallery-unit {
    margin: calc(24 / 375 * 100vw) auto 0;
  }

  #container section.profile {
    margin: calc(64 / 375 * 100vw) auto calc(72 / 375 * 100vw);
    width: 64%;
  }

  .ftool-wrapper .credit {
    padding-top: calc(32 / 375 *100vw);
  }

  .ftool-wrapper .credit li {
    width: calc(164 / 375 * 100vw);
  }

  #container .profile__detail {
    padding: var(--space-md) 0;
  }

  #container .profile__detail-img {
    width: calc(160 / 375 * 100vw);
    margin: auto;
  }

  #container .profile__detail-text {
    margin-top: var(--space-md);
  }

  #container .profile__detail-text h2 {
    font-size: 16px;
  }

  #container .profile__detail-text p {
    font-size: 10px;
    line-height: 180%;
    margin-top: 20px;
  }

  #container ul.profile__list {
    margin-top: calc(48 / 375 * 100vw);
  }
}

/*SP用スタイルここまで*/

@media screen and (min-width: 768px) {
  /*PC用スタイル*/

  :root {
    --space-xs: calc(8 / 1280 * 100vw);
    --space-sm: calc(24 / 1280 * 100vw);
    --space-md: calc(40 / 1280 * 100vw);
    --space-lg: calc(48 / 1280 * 100vw);
    --space-xl: calc(80 / 1280 * 100vw);
  }

  .scale1 {
    width: calc(273 / 1280 * 100vw);
    max-width: 273px;
  }

  .scale2 {
    width: calc(285 / 1280 * 100vw);
    max-width: 285px;
  }

  .scale3 {
    width: calc(248 / 1280 * 100vw);
    max-width: 248px;
  }

  .scale4 {
    width: calc(271 / 1280 * 100vw);
    max-width: 271px;
  }

  .scale5 {
    width: calc(310 / 1280 * 100vw);
    max-width: 310px;
  }

  .scale6 {
    width: calc(225 / 1280 * 100vw);
    max-width: 225px;
  }

  .scale7 {
    width: calc(348 / 1280 * 100vw);
    max-width: 348px;
  }

  .style1 {
    margin-top: calc(101 / 1280 * 100vw);
  }

  .style2 {
    margin-top: calc(56 / 1280 * 100vw);
  }

  .style3 {
    margin-top: calc(222 / 1280 * 100vw);
    margin-left: calc(-33 / 1280 * 100vw);
  }

  .style4 {
    margin-top: calc(232 / 1280 * 100vw);
    margin-right: calc(-38 / 1280 * 100vw);
    z-index: 100;
  }

  .type2 {
    gap: 25px;
  }

  .containerWrap {
    width: 1000px;
  }

  .contentsBlock .inner {
    width: 85%;
  }

  #container .contentsBlock {
    max-width: 560px;
    margin: 0 auto;
  }

  .br-sp {
    display: none;
  }

  .sp {
    display: none;
  }

  #container {
    position: relative;
    width: calc(982 / 1280 * 100vw);
    margin: auto;
    max-width: 982px;
  }

  #container .category {
    height: 100vh;
  }

  #container .category__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  #container .category h2 {
    font-size: 10px;
    padding: 0;
    margin-bottom: calc(16 / 1280 * 100vw) !important;
  }

  #container li.category__item {
    margin-bottom: var(--space-xs);
    width: calc(302 / 1280 * 100vw);
    max-width: 302px;
  }

  #container .l-articleLayout__article {
    float: right;
    width: calc(582 / 1280 * 100vw);
    max-width: 582px;
    transition: 0.85s ease;
    position: relative;
    top: 0;
  }

  #container .l-articleLayout__title {
    width: calc(400 / 1280 * 100vw);
    max-width: 400px;
  }

  #container .visual__title {
    position: absolute;
    width: calc(380 / 1280 * 100vw);
    max-width: 380px;
  }

  #container .leadBlock {
    margin: var(--space-lg) auto;
    width: 78%;
    max-width: 449px;
  }

  #container .leadBlock p {
    font-size: 11px;
  }

  #container .look__main-title {
    margin-bottom: var(--space-sm) !important;
  }

  #container .look__main-title h3 {
    width: calc(80 / 1280 * 100vw);
    max-width: 80px;
  }

  #container .look__main-image {
    width: var(--w-80);
    margin: auto;
  }

  #container .look__lead {
    margin: var(--space-lg) auto;
    position: relative;
    width: var(--w-80);
  }

  #container .look__gallery .look__gallery-unit {
    margin: calc(38 / 1280 * 100vw) auto 0;
  }

  #container .look__body-first::after {
    width: var(--w-80);
  }

  #container .look__credit {
    padding-bottom: var(--space-xl);
  }

  .ftool-wrapper .credit {
    padding-top: calc(48 / 1280 *100vw);
  }

  .ftool-wrapper .credit li {
    width: calc(240 / 1280 * 100vw);
  }

  #container section.profile {
    margin: calc(64 / 1280 * 100vw) auto 0;
    width: 64%;
    max-width: 320px;
  }

  #container .profile__detail {
    padding: var(--space-lg) 0;
  }

  #container .profile__detail-img {
    width: calc(200 / 1280 * 100vw);
    margin: auto;
    max-width: 200px;
  }

  #container .profile__detail-text {
    margin-top: var(--space-md);
  }

  #container .profile__detail-text h2 {
    font-size: 16px;
  }

  #container .profile__detail-text p {
    font-size: 10px;
    line-height: 180%;
    margin-top: 28px;
  }

  #container ul.profile__list {
    margin-top: var(--space-lg);
  }

}

/*PC用スタイルここまで*/

@media screen and (min-width: 1280px) {

  :root {
    --space-xs: 8px;
    --space-sm: 24px;
    --space-md: 40px;
    --space-lg: 48px;
    --space-xl: 80px;
  }

  .style1 {
    margin-top: 101px;
  }

  .style2 {
    margin-top: 56px;
  }

  .style3 {
    margin-top: 222px;
    margin-left: -33px;
  }

  .style4 {
    margin-top: 232px;
    margin-right: -38px;
  }

  #container .category h2 {
    margin-bottom: 16px !important;
  }

  #container li.category__item {
    margin-bottom: 8px;
  }

  #container .look__gallery .look__gallery-unit {
    margin: 38px auto 0;
  }

  .ftool-wrapper .credit {
    padding-top: 48px;
  }

  .ftool-wrapper .credit li {
    width: calc(240 / 1280 * 100vw);
    max-width: 240px;
  }

  #container section.profile {
    margin: 64px auto 0;
  }

  #container .profile__detail {
    border-top: solid 1px #26211F;
    border-bottom: solid 1px #26211F;
  }

}

/* fixed設定 */
.pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.description>#container {
  overflow: visible;
}

#container img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#container .l-articleLayout__wrap {
  margin: 0 auto;
  display: flow-root;
  max-width: 1280px;
}

@media screen and (max-width: 768px) {
  #container .l-articleLayout__wrap {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #container .l-articleLayout__article {
    float: none;
    left: 0;
    margin: 0 auto;
    width: auto;
  }
}

#container .l-articleLayout__title {
  position: sticky !important;
  float: left;
  height: 100vh;
}

#container .d-fixed-area {
  position: relative;
}

#container .d-fixed-element {
  position: absolute;
  top: 0;
}

#container .d-fixed-element.is-fixed {
  position: fixed;
}

#container .l-articleLayout {
  background-attachment: fixed;
  background-position: top left;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  #container #contents {
    width: 100%;
  }
}

/* fixed設定 */

/* fadeIn */
.fadeIn {
  opacity: 0;
  transform: translateY(30px);
}

.fadeIn.animated {
  opacity: 1;
  transform: none;
  transition: opacity 2s ease 0.1s, transform 2s ease 0.1s;
}

/* ビジュアルのfadeIn */
/* 基本のfade（transformあり） */
.fade {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in {
  opacity: 1;
  transform: none;
  transition: opacity 2s ease 0.1s, transform 2s ease 0.1s;
}

/* transformを使わないバージョン（タイトル用） */
.fade--no-transform {
  opacity: 0;
}

.fade-in--no-transform {
  opacity: 1;
  transition: opacity 2s ease 0.1s;
}