@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Noto+Serif+JP:wght@200..900&display=swap");

.fnt-cormorant-garamond {
   font-family: "Cormorant Garamond", serif;
   font-optical-sizing: auto;
   font-style: normal;
}

.fnt-noto-serif {
   font-family: "Noto Serif JP", serif;
   font-optical-sizing: auto;
   font-style: normal;
}

@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.page .animated {
   -webkit-animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-duration: 1s;
   animation-fill-mode: both;
}

@media (prefers-reduced-motion) {
   .page .animated {
      -webkit-animation: unset !important;
      -webkit-transition: none !important;
      animation: unset !important;
      transition: none !important;
   }
}

.page .fadeInUp {
   animation-name: fadeInUp;
   animation-duration: 1s;
   animation-delay: 0.3s;
   opacity: 0;
}

.page .fadeInUp[style*='visible'] {
   opacity: 1;
}

.page {
   background: #fff;
   font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0;
   color: #1F2122;
}

.page img {
   display: inline-block;
   vertical-align: middle;
   width: auto;
}

.page a {
   transition: all 0.3s;
}

.page h4 {
   color: inherit;
}

.img-obj {
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
}

.sp {
   display: none;
}

.wrap {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0;
   position: relative;
   box-sizing: border-box;
}

.button a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   border: 1px solid #1F2122;
   width: 335px;
   height: 54px;
   text-align: center;
   font-family: "Noto Serif JP", serif;
   font-weight: 300;
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.1em;
   transition: all 0.3s;
   padding-bottom: 2px;
}

.button a:hover {
   background-color: #1F2122;
   color: #fff;
}

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

   .pc {
      display: none;
   }

   .wrap {
      padding: 0 20px;
   }

   .button a {
      width: 100%;
   }
}

#kv {
   color: #fff;
   position: relative;
}

#kv img {
   display: block;
}

#kv h2 {
   font-weight: 400;
   font-size: 64px;
   line-height: 64px;
   letter-spacing: 0.15em;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 10%;
   transform: translateY(-50%);
}

#kv h2 small {
   display: block;
   font-size: 22px;
   line-height: 26px;
   letter-spacing: 0.2em;
   font-style: italic;
}

@media screen and (max-width: 769px) {
   #kv h2 {
      top: auto;
      right: 0;
      bottom: 24vw;
      left: 0;
      transform: translateY(0);
   }
}

#lead {
   text-align: center;
   padding: 100px 0 80px;
}

#lead h2 {
   font-weight: 400;
   font-size: 34px;
   line-height: 44px;
   letter-spacing: 0;
   text-align: center;
}

#lead .txt {
   font-size: 16px;
   line-height: 30px;
   padding-top: 25px;
}

#lead figure {
   max-width: 754px;
   margin: 0 auto;
   padding-top: 80px;
}

#lead h3 {
   font-weight: 300;
   font-style: italic;
   font-size: 34px;
   line-height: 34px;
   letter-spacing: 0.05em;
   padding-top: 80px;
   text-align: center;
}

#lead .box {
   display: flex;
   justify-content: center;
   gap: 28px;
   padding-top: 30px;
}

#lead .box a {
   display: block;
   width: 254px;
   position: relative;
}

#lead .box .img {
   display: block;
   position: relative;
}

#lead .box .text {
   display: block;
   font-size: 18px;
   line-height: 24px;
   text-align: center;
   padding-top: 26px;
}

#lead .box .icon {
   display: grid;
   grid-template-columns: auto 14px;
   align-items: center;
   gap: 3px;
   font-weight: 400;
   font-style: italic;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.1em;
   position: absolute;
   right: 14px;
   bottom: 14px;
   color: #fff;
}

#lead .button {
   padding-top: 75px;
}

@media screen and (max-width: 769px) {
   #lead {
      padding: 46px 0 60px;
   }

   #lead h2 {
      font-size: 29px;
   }

   #lead .txt {
      text-align: justify;
      padding-top: 20px;
   }

   #lead figure {
      margin: 0 -20px;
      padding-top: 60px;
   }

   #lead h3 {
      padding-top: 60px;
   }

   #lead .box {
      gap: 10px;
   }

   #lead .box li {
      width: calc(50% - 5px);
   }

   #lead .box a {
      width: 100%;
   }

   #lead .box .text {
      font-size: 15px;
      padding-top: 24px;
   }

   #lead .box .icon {
      grid-template-columns: auto 10px;
      right: 8px;
      bottom: 8px;
   }

   #lead .button {
      padding-top: 60px;
   }
}

#style-01,
#style-02 {
   padding: 90px 0 140px;
   position: relative;
   overflow: hidden;
}

#style-01 h2,
#style-02 h2 {
   font-weight: 700;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0;
   text-align: center;
}

#style-01 h2:after,
#style-02 h2:after {
   content: '';
   width: 10px;
   height: 10px;
   background-color: #1F2122;
   border-radius: 50%;
   display: block;
   margin: 26px auto 0;
}

#style-01 h2 small,
#style-02 h2 small {
   display: block;
   font-weight: 400;
   font-size: 14px;
   line-height: 14px;
   letter-spacing: 0.015em;
}

#style-01 h2 span,
#style-02 h2 span {
   display: block;
   font-weight: 400;
   font-size: 64px;
   line-height: 64px;
   padding: 3px 0;
}

#style-01 h2 span span,
#style-02 h2 span span {
   display: inline;
   font-weight: 300;
   font-size: 54px;
}

#style-01 h3,
#style-02 h3 {
   font-weight: 400;
   font-size: 40px;
   line-height: 53px;
   letter-spacing: 0.1em;
   padding: 0 0 50px 95px;
}

#style-01 h4,
#style-02 h4 {
   font-weight: 400;
   font-style: italic;
   font-size: 16px;
   line-height: 20px;
   text-align: center;
}

#style-01 .no,
#style-02 .no {
   max-width: max-content;
   font-weight: 400;
   font-style: italic;
   font-size: 16px;
   letter-spacing: 0.1em;
   line-height: 20px;
   position: relative;
   z-index: 1;
   padding-top: 25px;
}

#style-01 .no:before,
#style-02 .no:before {
   content: '';
   width: 285px;
   height: 0;
   border-top: 1px solid #fff;
   position: absolute;
   top: 128px;
   right: -90px;
   transform: skewY(-42deg);
}

#style-01 .slider_sp,
#style-02 .slider_sp {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

#style-01 .detail,
#style-02 .detail {
   padding-top: 50px;
}

#style-01 .list-modal,
#style-02 .list-modal {
   display: grid;
   justify-content: center;
   gap: 20px;
   text-align: center;
   font-weight: 400;
   font-size: 15px;
   padding-top: 25px;
}

#style-01 .list-modal span,
#style-02 .list-modal span {
   display: block;
   padding-top: 15px;
}

#style-01 .price,
#style-02 .price {
   color: #1F2122;
   padding-top: 80px;
}

#style-01 .price table,
#style-02 .price table {
   margin: 0 auto;
}

#style-01 .price th,
#style-02 .price th {
   font-weight: bold;
}

#style-01 .price td,
#style-02 .price td {
   font-weight: 500;
   padding-left: 20px;
}

#style-01 .price a,
#style-02 .price a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #272C39;
   border: 1px solid #272C39;
   width: 90px;
   height: 17px;
   color: #fff;
   font-family: "Noto Serif JP", serif;
   font-weight: 500;
   font-size: 10px;
   line-height: 12px;
   letter-spacing: 0.1em;
}

#style-01 .price a:hover,
#style-02 .price a:hover {
   background-color: #fff;
   color: #272C39;
   opacity: 1;
}

#style-01 .price tr:not(:last-child) th,
#style-01 .price tr:not(:last-child) td,
#style-02 .price tr:not(:last-child) th,
#style-02 .price tr:not(:last-child) td {
   padding-bottom: 5px;
}

#style-01 .box-1,
#style-02 .box-1 {
   padding-top: 40px;
}

#style-01 .box-1 .list-modal,
#style-02 .box-1 .list-modal {
   grid-template-columns: repeat(3, 218px);
}

#style-01 .box-2,
#style-02 .box-2 {
   display: grid;
   grid-template-columns: 497px 456px;
   align-items: center;
   gap: 47px;
   padding-top: 120px;
}

#style-01 .box-2 .list-modal,
#style-02 .box-2 .list-modal {
   grid-template-columns: repeat(2, 1fr);
}

#style-01 {
   background-color: #D9D9D9;
}

#style-02 .no:before {
   border-top: 1px solid #D9D9D9;
}

@media screen and (max-width: 769px) {

   #style-01,
   #style-02 {
      padding: 80px 0 60px;
   }

   #style-01 h3,
   #style-02 h3 {
      font-size: 24px;
      line-height: 46px;
      text-align: left;
      padding-left: 35px;
   }

   #style-01 h3 span,
   #style-02 h3 span {
      padding-left: 20px;
   }

   #style-01 .no,
   #style-02 .no {
      padding-left: 5px;
      order: 1;
   }

   #style-01 .no:before,
   #style-02 .no:before {
      width: 178px;
      top: 80px;
      right: -70px;
   }

   #style-01 .slider_sp,
   #style-02 .slider_sp {
      display: block;
      margin: 0 -20px;
   }

   #style-01 .slider_sp .slick-slide,
   #style-02 .slider_sp .slick-slide {
      margin: 0;
   }

   #style-01 .photo_sp,
   #style-02 .photo_sp {
      padding-top: 35px;
   }

   #style-01 .detail,
   #style-02 .detail {
      padding-top: 40px;
   }

   #style-01 .list-modal,
   #style-02 .list-modal {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px 12px;
      padding-top: 15px;
   }

   #style-01 .list-modal li,
   #style-02 .list-modal li {
      width: calc(50% - 6px);
   }

   #style-01 .list-modal li span,
   #style-02 .list-modal li span {
      margin: 0 -10px;
   }

   #style-01 .price,
   #style-02 .price {
      padding-top: 60px;
   }

   #style-01 .box-2,
   #style-02 .box-2 {
      display: block;
      padding-top: 50px;
   }
}

.section-group {
   background-color: #FAFAFA;
   padding: 110px 0 100px;
}

.section-group h2 {
   font-weight: 400;
   font-size: 64px;
   line-height: 64px;
   letter-spacing: 0.1em;
   text-align: center;
}

.section-group hr {
   width: 180px;
   height: 0;
   border: 0;
   border-top: 1px solid #1F2122;
   margin: 0 auto;
}

@media screen and (max-width: 769px) {
   .section-group {
      padding: 70px 0 80px;
   }

   .section-group h2 {
      font-size: 40px;
      line-height: 40px;
      margin: 0 -20px;
   }

   .section-group hr {
      width: 150px;
   }
}

#pick-up-item {
   padding-bottom: 100px;
}

#pick-up-item hr {
   margin-top: 24px;
   margin-bottom: 24px;
}

#pick-up-item .desc {
   font-weight: 700;
   font-size: 18px;
   line-height: 32px;
   text-align: center;
   padding-bottom: 80px;
}

#pick-up-item .box-img {
   display: flex;
   align-items: center;
   gap: 30px;
}

#pick-up-item .box-img:not(:last-child) {
   padding-bottom: 35px;
}

#pick-up-item .box-img figure {
   width: 488px;
}

#pick-up-item .box-img .col {
   max-width: 445px;
}

#pick-up-item .box-img h3 {
   font-weight: 400;
   font-size: 32px;
   line-height: 54px;
   letter-spacing: 0.1em;
}

#pick-up-item .box-img .txt {
   padding-top: 3px;
}

#pick-up-item .box-img .price {
   padding-top: 15px;
   color: #1F2122;
}

#pick-up-item .box-img .price th,
#pick-up-item .box-img .price td {
   vertical-align: middle;
}

#pick-up-item .box-img .price th {
   font-weight: bold;
}

#pick-up-item .box-img .price td {
   font-weight: 500;
   padding-left: 20px;
}

#pick-up-item .box-img .price a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #272C39;
   border: 1px solid #272C39;
   width: 90px;
   height: 17px;
   color: #fff;
   font-family: "Noto Serif JP", serif;
   font-weight: 500;
   font-size: 10px;
   line-height: 12px;
   letter-spacing: 0.1em;
}

#pick-up-item .box-img .price a:hover {
   background-color: #fff;
   color: #272C39;
   opacity: 1;
}

#pick-up-item .box-img .price tr:not(:last-child) th,
#pick-up-item .box-img .price tr:not(:last-child) td {
   padding-bottom: 5px;
}

#pick-up-item .box-img.img-r {
   flex-direction: row-reverse;
}

@media screen and (max-width: 769px) {
   #pick-up-item {
      padding-bottom: 90px;
   }

   #pick-up-item hr {
      margin-top: 36px;
      margin-bottom: 40px;
   }

   #pick-up-item .desc {
      text-align: justify;
      padding-bottom: 50px;
   }

   #pick-up-item .box-img {
      flex-direction: column;
      gap: 15px;
   }

   #pick-up-item .box-img:not(:last-child) {
      padding-bottom: 50px;
   }

   #pick-up-item .box-img figure,
   #pick-up-item .box-img .col {
      width: 100%;
   }

   #pick-up-item .box-img.img-r {
      flex-direction: column;
   }
}

#faq hr {
   margin-bottom: 120px;
}

#faq .list-qa {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 50px 54px;
   padding-top: 70px;
}

#faq .list-qa h4 {
   font-weight: 400;
   font-size: 24px;
   line-height: 54px;
}

#faq .list-qa .txt {
   padding-top: 10px;
}

#faq .button {
   text-align: center;
   padding-top: 95px;
}

#faq .button+.button {
   padding-top: 20px;
}

#faq .button.black a {
   background-color: #1F2122;
   color: #fff;
}

#faq .button.black a:hover {
   opacity: 0.5;
}

@media screen and (max-width: 769px) {
   #faq hr {
      margin-bottom: 90px;
   }

   #faq .list-qa {
      grid-template-columns: 100%;
      gap: 35px;
      padding-top: 45px;
   }

   #faq .list-qa h4 {
      line-height: 34px;
      position: relative;
      padding-right: 24px;
   }

   #faq .list-qa h4:after {
      content: '\e145';
      right: 0px;
      font-family: 'Material Symbols Outlined';
      font-size: 24px;
      line-height: 1;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      transition: all 0.3s;
   }

   #faq .list-qa .txt {
      display: none;
      padding-top: 15px;
   }

   #faq .list-qa .is-active h4:after {
      content: '\e15b';
   }

   #faq .button {
      padding-top: 70px;
   }
}

.banner {
   text-align: center;
   padding-top: 100px;
}

.banner .col {
   width: 520px;
   margin: 0 auto;
}

.banner h3 {
   font-weight: bold;
   font-size: 20px;
   line-height: 30px;
   padding-bottom: 20px;
}

@media screen and (max-width: 769px) {
   .banner {
      padding-top: 70px;
   }

   .banner .col {
      width: 100%;
   }
}

.goverlay {
   background: rgba(31, 33, 34, 0.5);
}

.glightbox-clean .gclose,
.glightbox-clean .gprev,
.glightbox-clean .gnext {
   background-color: transparent;
   border-radius: 0;
   padding: 0;
   opacity: 1;
   transition: all 0.3s;
}

.glightbox-clean .gclose svg,
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg {
   display: none;
   width: 100%;
   height: 100%;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover {
   background-color: transparent;
   opacity: 0.5;
}

.glightbox-clean .gclose {
   background: url("../../../../../img/usr/pg/cont/1formal-women/gclose.webp") no-repeat center top/100% auto;
   width: 100px;
   height: 85px;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext {
   width: 32px;
   height: 47px;
}

.glightbox-clean .gprev {
   background: url("../../../../../img/usr/pg/cont/1formal-women/gprev.webp") no-repeat center top/100% auto;
}

.glightbox-clean .gnext {
   background: url("../../../../../img/usr/pg/cont/1formal-women/gnext.webp") no-repeat center top/100% auto;
}

@media screen and (max-width: 769px) {
   .glightbox-clean .gclose {
      width: 50px;
      height: 42px;
   }

   .glightbox-clean .gprev,
   .glightbox-clean .gnext {
      width: 16px;
      height: 24px;
      top: 50%;
      transform: translateY(-50%);
   }

   .glightbox-clean .gprev {
      left: 10px;
   }

   .glightbox-clean .gnext {
      right: 10px;
   }

   .glightbox-container .gslider {
      padding: 30px;
   }

   .glightbox-mobile .goverlay {
      background: rgba(31, 33, 34, 0.5);
   }
}