@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url("https://use.typekit.net/icw5ezj.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://use.typekit.net/cvj1cfw.css");
@import url("https://use.typekit.net/fyd1cpf.css");
@font-face {
  font-family: 'oswaldregular';
  src: url("font/oswald-regular-webfont.eot");
  src: url("font/oswald-regular-webfont.eot?#iefix") format("embedded-opentype"), url("font/oswald-regular-webfont.woff") format("woff"), url("font/oswald-regular-webfont.ttf") format("truetype"), url("font/oswald-regular-webfont.svg#oswaldregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'oswaldlight';
  src: url("font/oswald-light-webfont.eot");
  src: url("font/oswald-light-webfont.eot?#iefix") format("embedded-opentype"), url("font/oswald-light-webfont.woff") format("woff"), url("font/oswald-light-webfont.ttf") format("truetype"), url("font/oswald-light-webfont.svg#oswaldregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'oswaldlight';
  src: url("font/oswald-light-webfont.eot");
  src: url("font/oswald-light-webfont.eot?#iefix") format("embedded-opentype"), url("font/oswald-light-webfont.woff") format("woff"), url("font/oswald-light-webfont.ttf") format("truetype"), url("font/oswald-light-webfont.svg#oswaldregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'NotoSansJP-Bold';
  src: url("../font/NotoSansJP-Bold.eot");
  src: url("../font/NotoSansJP-Bold.eot?iefix") format("eot"), url("../font/NotoSansJP-Bold.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansJP-Medium';
  src: url("../font/NotoSansJP-Medium.eot");
  src: url("../font/NotoSansJP-Medium.eot?iefix") format("eot"), url("../font/NotoSansJP-Medium.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansJP-Regular';
  src: url("../font/NotoSansJP-Regular.eot");
  src: url("../font/NotoSansJP-Regular.eot?iefix") format("eot"), url("../font/NotoSansJP-Regular.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansJP-DemiLight';
  src: url("../font/NotoSansJP-DemiLight.eot");
  src: url("../font/NotoSansJP-DemiLight.eot?iefix") format("eot"), url("../font/NotoSansJP-DemiLight.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansJP-Light';
  src: url("../font/NotoSansJP-Light.eot");
  src: url("../font/NotoSansJP-Light.eot?iefix") format("eot"), url("../font/NotoSansJP-Light.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansJP-Thin-Windows';
  src: url("../font/NotoSansJP-Thin-Windows.eot");
  src: url("../font/NotoSansJP-Thin-Windows.eot?iefix") format("eot"), url("../font/NotoSansJP-Thin-Windows.woff") format("woff"); }

/* 変数
-----------------------------------------------------------------*/
body, div, p, form, input, textarea, select, option, button, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, address, button, figure, figcaption {
  font-style: normal;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* PC / SP 表示分け
-----------------------------------------------------------------*/
@media only screen and (min-width: 861px) {
  .dn-pc {
    display: none !important; } }

@media only screen and (max-width: 861px) {
  .dn-sp {
    display: none !important; } }

@media only screen and (min-width: 861px) {
  body .classic_style .the_third_suits_2510 .footer .isSp {
    display: none !important; } }

@media only screen and (max-width: 861px) {
  body .classic_style .the_third_suits_2510 .footer .isPc {
    display: none !important; } }

#footer {
  display: none; }

body.is-hidden-footer {
  overflow: hidden; }
  body.is-hidden-footer #footer {
    display: none !important; }

body:not(.is-hidden-footer) #footer {
  display: block; }

#header {
  display: none !important; }

.the_third_suits_2510 #footer-page-top-fix .pageTop.active {
  display: none !important; }

body {
  color: #000;
  background: #fff; }
  body .container {
    max-width: inherit;
    padding: 0 !important; }
    @media only screen and (max-width: 861px) {
      body .container {
        padding: 0 !important; } }
  body .breadcrumbs {
    display: none !important; }
  @media only screen and (max-width: 861px) {
    body .classic_style .isPc {
      display: block !important; } }

/* セクションモーダル
-----------------------------------------------------------------*/
.featureSection {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: ease .3s;
  transition: ease .3s;
  pointer-events: none;
  overflow-y: auto; }
  .featureSection.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }

/* 共通
-----------------------------------------------------------------*/
.fadeInTrigger {
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, transform .8s;
  transition: opacity .8s, transform .8s, -webkit-transform .8s; }
  .fadeInTrigger.is-inview {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

.footerButtonGroup {
  padding: 60px 0 90px;
  position: relative;
  width: 100%;
  z-index: 100;
  background-color: #fff; }
  @media only screen and (max-width: 861px) {
    .footerButtonGroup {
      padding: 35px 10px 70px; } }

.tryOnButton {
  display: block; }
  @media only screen and (min-width: 861px) {
    .tryOnButton {
      width: 410px;
      margin: 0 auto;
      -webkit-transition: ease .4s;
      transition: ease .4s; }
      .tryOnButton:hover {
        opacity: .7; } }
  .tryOnButton img {
    width: 100%; }

.shopButton {
  display: block; }
  @media only screen and (min-width: 861px) {
    .shopButton {
      width: 410px;
      margin: 35px auto 80px;
      -webkit-transition: ease .4s;
      transition: ease .4s; }
      .shopButton:hover {
        opacity: .7; } }
  @media only screen and (max-width: 861px) {
    .shopButton {
      margin-top: 40px; } }
  .shopButton img {
    width: 100%; }

/* コンテンツ
-----------------------------------------------------------------*/
.classic_style {
  width: auto; }

article.contents {
  margin: 0 auto;
  color: #000; }
  article.contents a {
    color: #000;
    text-decoration: none; }

/* FV
-----------------------------------------------------------------*/
.fv {
  position: relative;
  width: 100%;
  height: 100dvh;
  z-index: 100000;
  background-color: #fff;
  overflow: hidden; }

.fvList {
  height: 100%; }
  @media only screen and (min-width: 861px) {
    .fvList {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media only screen and (max-width: 861px) {
    .fvList {
      position: relative;
      height: 100dvh; } }

@media only screen and (min-width: 861px) {
  .suit_left {
    position: relative;
    width: calc(520 / 1280 * 100vw); } }

@media only screen and (max-width: 861px) {
  .suit_left {
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10; } }

@media only screen and (min-width: 861px) {
  .suitLogo {
    position: absolute;
    top: calc(183 / 1280 * 100vw);
    left: calc(59 / 1280 * 100vw);
    width: calc(403 / 1280 * 100vw); } }

@media only screen and (max-width: 861px) {
  .suitLogo {
    width: 287px;
    line-height: 68px; } }

.suit_left_copy {
  font-family: "Noto Serif JP", serif;
  font-size: max(20 / 1280 * 100vw, 16px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .13em;
  color: #111; }
  @media only screen and (min-width: 861px) {
    .suit_left_copy {
      position: absolute;
      top: calc(285 / 1280 * 100vw);
      left: calc(69 / 1280 * 100vw); } }
  @media only screen and (max-width: 861px) {
    .suit_left_copy {
      color: #fff;
      margin-top: 16px;
      font-size: 14px; } }

.suit_left_text {
  font-family: "Crimson Text", serif;
  font-size: max(20 / 1280 * 100vw, 16px);
  font-weight: 400;
  letter-spacing: .13em;
  color: #111; }
  @media only screen and (min-width: 861px) {
    .suit_left_text {
      position: absolute;
      bottom: calc(122 / 1280 * 100vw);
      left: calc(69 / 1280 * 100vw); } }
  @media only screen and (max-width: 861px) {
    .suit_left_text {
      color: #fff;
      margin-top: 17px;
      font-size: 11px; } }

.suit_right {
  position: relative; }
  @media only screen and (min-width: 861px) {
    .suit_right {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: calc(760 / 1280 * 100vw); } }
  @media only screen and (max-width: 861px) {
    .suit_right {
      width: 100%;
      height: 100dvh; } }

.suit_item {
  cursor: pointer;
  position: relative; }
  @media only screen and (min-width: 861px) {
    .suit_item {
      width: calc(380 / 1280 * 100vw);
      -webkit-transition: ease .3s;
      transition: ease .3s; }
      .suit_item:hover {
        opacity: .7; }
        .suit_item:hover .suit_item_line {
          width: calc(28 / 1280 * 100vw); } }
  @media only screen and (max-width: 861px) {
    .suit_item {
      height: 50dvh; }
      .suit_item .suit_item_info {
        top: 20px;
        right: 50px; } }
  @media only screen and (max-width: 861px) {
    .suit_item + .suit_item .suit_item_info {
      bottom: 20px;
      top: initial; } }
  @media only screen and (min-width: 861px) {
    .suit_item + .suit_item .suit_item_line {
      left: calc(120 / 1280 * 100vw); } }

.suit_item_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.suit_item_info {
  position: absolute;
  right: calc(82 / 1280 * 100vw);
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media only screen and (max-width: 861px) {
    .suit_item_info {
      right: 80px;
      top: 20px;
      bottom: initial; } }

.suit_item_text {
  position: relative;
  font-family: "Cormorant", serif;
  font-size: max(16 / 1280 * 100vw, 12.8px);
  font-weight: 400;
  letter-spacing: .1em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suit_item_text {
      font-size: 16px; } }

.suit_item_line {
  position: absolute;
  -webkit-transition: ease .3s;
  transition: ease .3s;
  display: inline-block;
  width: calc(16 / 1280 * 100vw);
  height: 1px;
  border-radius: 9999px;
  background-color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
  @media only screen and (min-width: 861px) {
    .suit_item_line {
      left: calc(88 / 1280 * 100vw); } }
  @media only screen and (max-width: 861px) {
    .suit_item_line {
      width: 16px;
      right: -30px; } }
  .suit_item_line::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5px);
    right: 0;
    width: calc(4 / 1280 * 100vw);
    height: 1px;
    border-radius: 9999px;
    background-color: #fff;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transform-origin: calc(100% - 0.5px) 50%;
    -ms-transform-origin: calc(100% - 0.5px) 50%;
    transform-origin: calc(100% - 0.5px) 50%; }
    @media only screen and (max-width: 861px) {
      .suit_item_line::after {
        width: 4px; } }

.suits_bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh; }
  .suits_bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.suits_wrap {
  overflow: hidden; }
  @media only screen and (min-width: 861px) {
    .suits_wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100vh; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .suits_wrap {
      display: block;
      overflow: visible; } }
  @media only screen and (max-width: 861px) {
    .suits_wrap {
      position: relative;
      z-index: 10000; } }

.suits_content {
  z-index: 10; }
  @media only screen and (min-width: 861px) {
    .suits_content {
      width: 50%; } }
  @media only screen and (min-width: 861px) {
    .suits_content.leftSection {
      overflow: hidden;
      height: 100dvh;
      position: sticky;
      top: 0;
      left: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .suits_content.leftSection {
      position: static;
      overflow: visible;
      height: auto;
      width: 100%; } }
  @media only screen and (min-width: 861px) {
    .suits_content.rightSection {
      overflow-x: hidden;
      overflow-y: auto; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .suits_content.rightSection {
      overflow: visible;
      width: 100%; } }

@media only screen and (min-width: 861px) {
  .leftSection .suits_contentInner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(506 / 1280 * 100vw); } }

@media only screen and (max-width: 861px) {
  .leftSection .suits_contentInner {
    padding: 0 20px; } }

.suits_lead {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .2em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_lead {
      margin-top: 40px;
      font-size: 14px;
      line-height: 2; } }

@media only screen and (min-width: 861px) {
  .suits_title {
    margin-top: 56px; } }

@media only screen and (max-width: 861px) {
  .suits_title {
    margin-top: 48px;
    text-align: center; }
    .fixedNav_inner .suits_title {
      margin-top: 0; } }

.suits_title_en {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .04em;
  color: #fff; }
  @media only screen and (min-width: 861px) {
    .suits_title_en {
      position: relative;
      padding-left: 20px; }
      .suits_title_en:before {
        content: "";
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 6px;
        height: 6px;
        background-color: #fff; } }

.suits_colors {
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px; }
  @media only screen and (max-width: 861px) {
    .suits_colors {
      gap: 12px;
      margin-top: 32px; }
      .fixedNav_inner .suits_colors {
        margin-top: 24px; } }
  @media only screen and (min-width: 861px) {
    #section2 .suits_colors {
      padding-right: calc(140 / 1280 * 100vw); } }

@media only screen and (min-width: 861px) {
  .suits_color {
    -webkit-transition: ease .3s;
    transition: ease .3s; }
    .suits_color:hover .suits_color_img {
      border-color: #fff; } }

.suits_color_img {
  border: 1px solid transparent;
  -webkit-transition: ease .3s;
  transition: ease .3s; }
  .suits_color_img img {
    width: 100%;
    height: auto; }

.suits_color_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-top: 13px;
  gap: 12px; }
  @media only screen and (max-width: 861px) {
    .suits_color_text {
      margin-top: 4px;
      gap: 4px; } }

.suits_color_num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: 'Cormorant', serif;
  font-size: 16px;
  letter-spacing: .12em;
  color: #fff;
  text-align: center; }
  @media only screen and (max-width: 861px) {
    .suits_color_num {
      font-size: 14px; } }

.fixedNav_icon {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-transition: ease .3s;
  transition: ease .3s; }
  .fixedNav_icon.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .fixedNav_icon.is-hide {
    opacity: 0; }

.fixedNav_bg {
  opacity: 0;
  -webkit-transition: ease .3s;
  transition: ease .3s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 1000000;
  pointer-events: none; }
  .fixedNav_bg.is-active {
    opacity: 1;
    pointer-events: auto; }

.fixedNav_closeIcon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000001;
  width: 30px;
  height: 12px; }

.fixedNav_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1000001;
  height: 100dvh;
  width: 100%; }

.fixedNav_inner_bg {
  background-image: url(../../images/the_third_suits_2510/fixed_bg1-sp.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 50dvh; }
  .fixedNav_inner_bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.fixedNav {
  height: 100dvh; }

.fixedNav_inner {
  position: relative;
  height: 50dvh; }
  .fixedNav_inner + .fixedNav_inner {
    border-top: 1px solid #fff; }
    .fixedNav_inner + .fixedNav_inner .fixedNav_inner_bg {
      background-image: url(../../images/the_third_suits_2510/fixed_bg2-sp.jpg); }
    .fixedNav_inner + .fixedNav_inner .fixedNav_inner_contents {
      width: calc(100% - 112px); }

.fixedNav_inner_contents {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - 20px); }

.suits_more {
  position: relative;
  display: block;
  margin-top: 55px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }
  @media only screen and (min-width: 861px) {
    .suits_more:hover:before {
      -webkit-transform: translateY(-50%) scaleX(1);
      -ms-transform: translateY(-50%) scaleX(1);
      transform: translateY(-50%) scaleX(1);
      width: 24px;
      right: -39px; }
    .suits_more:hover:after {
      right: -39px; } }
  @media only screen and (max-width: 861px) {
    .suits_more {
      margin-top: 47px; } }
  .suits_more:before {
    content: "";
    position: absolute;
    -webkit-transition: ease .3s;
    transition: ease .3s;
    display: inline-block;
    width: 44px;
    height: 1px;
    top: 50%;
    -webkit-transform: translateY(-50%) scaleX(0.37);
    -ms-transform: translateY(-50%) scaleX(0.37);
    transform: translateY(-50%) scaleX(0.37);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    right: -59px;
    border-radius: 9999px;
    background-color: #fff;
    transition: ease .3s;
    margin-top: 1px; }
    @media only screen and (max-width: 861px) {
      .suits_more:before {
        width: 35px;
        right: -47px; } }
  .suits_more::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 6px;
    height: 1px;
    right: -33px;
    border-radius: 9999px;
    background-color: #fff;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transform-origin: calc(100% - 0.5px) 50%;
    -ms-transform-origin: calc(100% - 0.5px) 50%;
    transform-origin: calc(100% - 0.5px) 50%;
    -webkit-transition: ease .3s;
    transition: ease .3s;
    margin-top: 1px; }
    @media only screen and (max-width: 861px) {
      .suits_more::after {
        width: 4px;
        right: -23px; } }

.suits_moreText {
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  letter-spacing: .1em; }

.suits_buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
  margin-top: 44px; }
  @media only screen and (max-width: 861px) {
    .suits_buttons {
      gap: 16px;
      margin-top: 48px; } }

.suits_contentButton {
  margin: 120px 0; }
  @media only screen and (max-width: 861px) {
    .suits_contentButton {
      margin: 80px 0; } }

.suits_button {
  position: relative;
  padding: 13.5px 0px;
  border: none;
  border-radius: 21px;
  background-color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  -webkit-transition: ease .3s;
  transition: ease .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px; }
  @media only screen and (min-width: 861px) {
    .suits_button {
      width: 299px; }
      .suits_button:hover {
        background-color: transparent; }
        .suits_button:hover .suits_buttonText {
          color: #fff !important; }
        .suits_button:hover .suits_button_arrow {
          border-right: 1px solid #fff;
          border-top: 1px solid #fff; } }
  @media only screen and (max-width: 861px) {
    .suits_button {
      padding: 9.5px 20px;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content; }
      .suits_button + .suits_button {
        width: 175px; } }
  .suits_contentButton .suits_button {
    margin: 0 auto; }

.suits_button_arrow {
  margin-top: 1px;
  width: 4px;
  height: 4px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.suits_buttonText {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  text-align: center;
  letter-spacing: .16em;
  color: #0d0d0d; }

.suits_color_line {
  display: block;
  width: 15px;
  height: 1px;
  margin-top: 4px;
  background-color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_color_line {
      margin-top: 2px; } }

.suits_color_name {
  display: block;
  margin-top: 8px;
  font-family: 'Cormorant', serif;
  font-size: 18px;
  letter-spacing: .1em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_color_name {
      font-size: 14px;
      margin-top: 4px; } }

@media only screen and (min-width: 861px) {
  .suits_features {
    width: calc(500 / 1280 * 100vw);
    margin: 56px auto 0; } }

@media only screen and (max-width: 861px) {
  .suits_features {
    padding: 54px 20px 0;
    margin-top: 32px; } }

.suits_features_head {
  text-align: left; }

.suits_features_title {
  font-family: "Cormorant", serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: .04em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_features_title {
      font-size: 32px; } }

.suits_features_subtitle {
  margin-top: 6.5px;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_features_subtitle {
      margin-top: 6px; } }

.suits_features_list {
  margin-top: 64px; }
  @media only screen and (min-width: 861px) {
    .suits_features_list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 32px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; } }

@media only screen and (min-width: 861px) {
  .suits_feature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: calc(32 / 1280 * 100vw);
    padding: 0 calc(76 / 1280 * 100vw); }
    .suits_feature:nth-child(2) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
    #section2 .suits_feature:first-child .suits_feature_img {
      width: calc(91 / 1280 * 100vw); } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .suits_feature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 50px; }
    .suits_feature:nth-child(2) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
    #section2 .suits_feature:first-child .suits_feature_img {
      width: calc(91 / 1280 * 100vw); }
    .suits_feature + .suits_feature {
      margin-top: 30px; } }

@media only screen and (max-width: 861px) {
  .suits_feature {
    padding: 0 12px !important; } }

@media only screen and (min-width: 861px) {
  .suits_feature_img {
    width: calc(144 / 1280 * 100vw); }
    .suits_feature_img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; } }

@media only screen and (max-width: 861px) {
  .suits_feature_img {
    width: 77%;
    margin: 0 auto; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .suits_feature_text {
    text-align: left !important; } }

@media only screen and (max-width: 861px) {
  .suits_feature_text {
    margin-top: 24px; } }

.suits_feature_title {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  letter-spacing: .12em;
  font-weight: 400;
  color: #fff; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .suits_feature_title {
      text-align: left !important; } }
  @media only screen and (max-width: 861px) {
    .suits_feature_title {
      text-align: center;
      line-height: 1.8; } }

.suits_feature_desc {
  margin-top: 16px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .1em;
  color: #fff; }
  @media only screen and (max-width: 861px) {
    .suits_feature_desc {
      font-size: 11px;
      width: 77%;
      margin: 16px auto 0; } }

/* Section: 002_ */
@media only screen and (min-width: 861px) {
  .coordinate {
    width: calc(640 / 1280 * 100vw);
    margin-left: auto; } }

.coordinate_color {
  margin-top: 100px; }
  @media only screen and (max-width: 861px) {
    .coordinate_color {
      margin-top: 130px; } }
  @media only screen and (min-width: 861px) {
    .coordinate_color + .coordinate_color {
      margin-top: 120px; } }
  @media only screen and (max-width: 861px) {
    .coordinate_color + .coordinate_color {
      margin-top: 80px; } }
  .coordinate_color:not(:first-of-type) .coordinate_visual_sub {
    padding: 0 68px; }
    @media only screen and (max-width: 861px) {
      .coordinate_color:not(:first-of-type) .coordinate_visual_sub {
        padding: 0 58px; } }

.coordinate_number {
  margin-bottom: 5px; }
  @media only screen and (min-width: 861px) {
    .coordinate_number {
      padding-left: 70px; } }
  @media only screen and (max-width: 861px) {
    .coordinate_number {
      margin-bottom: 14.5px;
      padding-left: 20px; } }

.coordinate_number_text {
  font-family: "Cormorant", serif;
  font-size: 20px;
  letter-spacing: .12em;
  color: #fff; }

.coordinate_number_line {
  display: block;
  width: 19px;
  height: 1px;
  background-color: #fff;
  margin-top: 5px; }

.coordinate_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
  padding-left: 70px; }
  @media only screen and (max-width: 861px) {
    .coordinate_title {
      gap: 16px;
      margin-bottom: 14.5px;
      padding-left: 20px; } }

.coordinate_title_main {
  font-weight: 400;
  font-family: "Cormorant", serif;
  font-size: 60px;
  letter-spacing: .12em;
  color: #fff;
  line-height: 1.2; }
  @media only screen and (max-width: 861px) {
    .coordinate_title_main {
      font-size: 50px; } }

.coordinate_title_sub {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
  padding-bottom: 14px; }
  @media only screen and (max-width: 861px) {
    .coordinate_title_sub {
      font-size: 10px;
      padding-bottom: 20px; } }

.coordinate_catch {
  padding-left: 70px;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  letter-spacing: .12em;
  color: #fff; }
  @media only screen and (min-width: 861px) {
    .coordinate_catch {
      margin-top: 24px; } }
  @media only screen and (max-width: 861px) {
    .coordinate_catch {
      padding-left: 20px;
      font-size: 16px; } }

.coordinate_visual {
  margin-top: 48px; }
  @media only screen and (max-width: 861px) {
    .coordinate_visual {
      margin-top: 40px; } }

.coordinate_visual_sub {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 32px; }
  @media only screen and (max-width: 861px) {
    .coordinate_visual_sub {
      gap: 11px;
      margin-top: 24px; } }
  #section1_color_3 .coordinate_visual_sub {
    display: none; }

.coordinate_heading {
  margin-bottom: 40px; }

.coordinate_heading_catch {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  line-height: 1.58;
  margin-bottom: 24px; }

.coordinate_heading_text {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  line-height: 2; }

@media only screen and (min-width: 861px) {
  .coordinate_items {
    margin-top: 8px; } }

.coordinate_itemsWrap {
  margin-top: 48px;
  padding: 0 68px; }
  @media only screen and (max-width: 861px) {
    .coordinate_itemsWrap {
      padding: 0 20px; } }

.coordinate_itemsCatch {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  line-height: 1.6; }
  @media only screen and (max-width: 861px) {
    .coordinate_itemsCatch {
      font-size: 16px;
      letter-spacing: .08em; } }

.coordinate_itemsText {
  margin-top: 24px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  line-height: 2; }
  @media only screen and (max-width: 861px) {
    .coordinate_itemsText {
      margin-top: 16px;
      font-size: 12px;
      letter-spacing: .07em; } }

@media only screen and (min-width: 861px) {
  .coordinate_items {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0 40px; } }

@media only screen and (max-width: 861px) {
  .coordinate_items > .coordinate_item {
    margin-top: 24.5px; } }

.coordinate_item {
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dotted #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media only screen and (min-width: 861px) {
    .coordinate_item:hover .coordinate_item_detail {
      background-color: transparent; }
      .coordinate_item:hover .coordinate_item_detail .coordinate_item_detail_text {
        color: #fff !important; } }
  @media only screen and (max-width: 861px) {
    .coordinate_item {
      margin-top: 32px; } }

.coordinate_item_name {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  color: #fff;
  letter-spacing: .1em; }
  @media only screen and (max-width: 861px) {
    .coordinate_item_name {
      letter-spacing: .16em; } }

.coordinate_item_code {
  display: inline-block;
  font-family: "IvyOra Display", serif;
  font-size: 12px;
  color: #fff;
  letter-spacing: .1em; }
  @media only screen and (max-width: 861px) {
    .coordinate_item_code {
      letter-spacing: .16em; } }

.coordinate_item_detail {
  width: 62px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: ease .3s;
  transition: ease .3s; }
  @media only screen and (min-width: 861px) {
    .coordinate_item_detail {
      border: 1px solid #fff;
      padding: 5px 0 3px; } }
  @media only screen and (max-width: 861px) {
    .coordinate_item_detail {
      width: 69px;
      height: 19px; } }

.coordinate_item_detail_text {
  font-family: "IvyOra Display", serif;
  font-size: 10px;
  color: #0d0d0d;
  letter-spacing: .1em;
  -webkit-transition: ease .3s;
  transition: ease .3s; }
  @media only screen and (max-width: 861px) {
    .coordinate_item_detail_text {
      letter-spacing: .08em; } }

.coordinate_item_price {
  margin-top: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.coordinate_item_price_num {
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  color: #fff;
  letter-spacing: .1em; }
  @media only screen and (max-width: 861px) {
    .coordinate_item_price_num {
      font-size: 12px;
      letter-spacing: .16em; } }

.coordinate_item_price_unit {
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  color: #fff;
  letter-spacing: .1em; }
  @media only screen and (max-width: 861px) {
    .coordinate_item_price_unit {
      letter-spacing: .16em; } }

.coordinate_item_release {
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  color: #fff;
  letter-spacing: .1em;
  margin-top: 6px; }

.slick-next {
  left: 63% !important;
  top: initial !important;
  bottom: -30px !important;
  width: 36px !important;
  height: 3px !important;
  background-size: 36px 3px;
  z-index: 10001;
  pointer-events: auto;
  cursor: pointer; }
  .slick-next:before {
    content: '' !important;
    background-image: initial !important; }
  .slick-next img {
    width: 100% !important; }

.slick-prev {
  left: 27% !important;
  top: initial !important;
  bottom: -30px !important;
  width: 36px !important;
  height: 3px !important;
  background-size: 36px 3px;
  z-index: 10001;
  /* 最前面に出してクリック可能にする */
  pointer-events: auto;
  cursor: pointer; }
  .slick-prev:before {
    content: '' !important;
    background-image: initial !important; }
  .slick-prev img {
    width: 100% !important; }

@media only screen and (max-width: 861px) {
  .coordinate_itemsList {
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: ease .3s;
    transition: ease .3s; }
    .coordinate_itemsList.is-open {
      opacity: 1;
      height: auto; } }

.slick-dots {
  bottom: -48.5px !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important; }

.slick-dots li {
  width: 5px !important;
  height: 5px !important;
  margin: 0 9px !important; }
  .slick-dots li.slick-active button {
    background-color: #fff !important; }

.slick-dots li button {
  width: 5px !important;
  height: 5px !important;
  padding: 0 !important;
  background-color: #575757 !important;
  border-radius: 50% !important; }

.slick-dots li button:before {
  content: '' !important; }

.more-item-toggle {
  position: relative;
  margin-top: 32px;
  text-align: center;
  font-family: "Cormorant", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
  margin: 32px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 3px; }
  .more-item-toggle .icon {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 11px; }
    .more-item-toggle .icon .plus, .more-item-toggle .icon .minus {
      display: inline-block;
      position: absolute;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: 1px;
      background-color: #fff; }
  .more-item-toggle .plus {
    top: 50%;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  .more-item-toggle .minus {
    top: 50%;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
  .more-item-toggle.is-open .plus {
    background-color: #fff; }
  .more-item-toggle.is-open .minus {
    display: none; }

.suitsMenu_inner {
  position: relative; }

.suitsMenu_text {
  position: absolute;
  color: #fff;
  font-family: "Cormorant", serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  bottom: 20px;
  right: 20px;
  padding: 0 40px 8px 20px; }
  .suitsMenu_text:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 20px;
    width: 4px;
    height: 4px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }

.footer {
  margin-top: 0 !important;
  z-index: 1;
  position: relative; }