@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%;
   right: 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 h3 {
   font-weight: 300;
   font-style: italic;
   font-size: 34px;
   line-height: 34px;
   letter-spacing: 0.05em;
   padding-top: 80px;
}

#lead .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 28px;
   padding-top: 30px;
}

#lead .box a {
   display: block;
   position: relative;
   color: #fff;
}

#lead .box a>img {
   display: block;
}

#lead .box .text {
   width: 100%;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}

#lead .box .text small {
   display: block;
   font-weight: 400;
   font-size: 10px;
   line-height: 13px;
   letter-spacing: 0.2em;
   padding-bottom: 5px;
}

#lead .box .text span {
   display: block;
   font-weight: 400;
   font-size: 38px;
   line-height: 38px;
   letter-spacing: 0.05em;
}

#lead .box .text span i {
   display: block;
   width: 28px;
   height: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.6);
   margin: 8px auto;
}

#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: 10px;
   bottom: 5px;
}

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

@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 h3 {
      padding-top: 60px;
   }

   #lead .box {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding-top: 25px;
   }

   #lead .box .text {
      top: 45%;
      right: 0;
      text-align: center;
   }

   #lead .box .text small {
      font-size: 7px;
      line-height: 8px;
   }

   #lead .box .text span {
      font-size: 25px;
      line-height: 25px;
   }

   #lead .box .icon {
      grid-template-columns: auto 9px;
      gap: 2px;
      font-size: 10px;
      line-height: 10px;
      right: 10px;
      bottom: 5px;
   }

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

#standard,
#exctive,
#summer {
   padding: 90px 0 140px;
   position: relative;
   overflow: hidden;
}

#standard h2,
#exctive h2,
#summer h2 {
   font-weight: 700;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0;
   text-align: center;
}

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

#standard h2 small,
#exctive h2 small,
#summer h2 small {
   display: block;
   font-weight: 400;
   font-size: 14px;
   line-height: 14px;
   letter-spacing: 0.015em;
}

#standard h2 span,
#exctive h2 span,
#summer h2 span {
   display: block;
   font-weight: 400;
   font-size: 64px;
   line-height: 64px;
   padding: 3px 0;
}

#standard .box,
#exctive .box,
#summer .box {
   display: flex;
   gap: 46px;
   position: relative;
   padding-top: 38px;
}

#standard .box+.box,
#exctive .box+.box,
#summer .box+.box {
   padding-top: 125px;
}

#standard .box .col-1,
#exctive .box .col-1,
#summer .box .col-1 {
   width: 456px;
   padding-top: 20px;
}

#standard .box .col-2,
#exctive .box .col-2,
#summer .box .col-2 {
   width: 598px;
}

#standard .box .no,
#exctive .box .no,
#summer .box .no {
   max-width: max-content;
   font-weight: 300;
   font-size: 28px;
   letter-spacing: 0.1em;
   line-height: 28px;
   text-align: center;
   position: relative;
   z-index: 1;
}

#standard .box .no:before,
#exctive .box .no:before,
#summer .box .no:before {
   content: '';
   width: 285px;
   height: 0;
   border-top: 1px solid #fff;
   position: absolute;
   top: 110px;
   right: -90px;
   transform: skewY(-42deg);
}

#standard .box .no span,
#exctive .box .no span,
#summer .box .no span {
   display: block;
   font-size: 16px;
   letter-spacing: 0.1em;
}

#standard .box h3,
#exctive .box h3,
#summer .box h3 {
   font-weight: 400;
   font-style: italic;
   font-size: 40px;
   line-height: 54px;
   letter-spacing: 0.1em;
   text-align: center;
}

#standard .box h4,
#exctive .box h4,
#summer .box h4 {
   font-weight: 400;
   font-style: italic;
   font-size: 20px;
   line-height: 20px;
   text-align: center;
}

#standard .box .detail,
#exctive .box .detail,
#summer .box .detail {
   padding-top: 45px;
}

#standard .box .list,
#exctive .box .list,
#summer .box .list {
   font-size: 15px;
   padding-top: 14px;
}

#standard .box .list ul,
#exctive .box .list ul,
#summer .box .list ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   text-align: center;
}

#standard .box .list ul span,
#exctive .box .list ul span,
#summer .box .list ul span {
   display: block;
   padding-top: 7px;
}

#standard .box .price,
#exctive .box .price,
#summer .box .price {
   padding-top: 60px;
   color: #1F2122;
}

#standard .box .price table,
#exctive .box .price table,
#summer .box .price table {
   margin: 0 auto;
}

#standard .box .price th,
#exctive .box .price th,
#summer .box .price th {
   font-weight: bold;
}

#standard .box .price td,
#exctive .box .price td,
#summer .box .price td {
   font-weight: 500;
   padding-left: 20px;
}

#standard .box .price a,
#exctive .box .price a,
#summer .box .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;
}

#standard .box .price a:hover,
#exctive .box .price a:hover,
#summer .box .price a:hover {
   background-color: #fff;
   color: #272C39;
   opacity: 1;
}

#standard .box .price tr:not(:last-child) th,
#standard .box .price tr:not(:last-child) td,
#exctive .box .price tr:not(:last-child) th,
#exctive .box .price tr:not(:last-child) td,
#summer .box .price tr:not(:last-child) th,
#summer .box .price tr:not(:last-child) td {
   padding-bottom: 5px;
}

#standard .box .txt,
#exctive .box .txt,
#summer .box .txt {
   max-width: 500px;
   margin: 0 auto;
   padding-top: 42px;
}

#standard .box.reverse,
#exctive .box.reverse,
#summer .box.reverse {
   flex-direction: row-reverse;
}

#standard {
   background-color: #D9D9D9;
}

#exctive .box .no:before {
   border-top-color: #D9D9D9;
}

#summer {
   background-color: #D9D9D9;
}

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

   #standard .box .slider-fade .slick-slide,
   #exctive .box .slider-fade .slick-slide,
   #summer .box .slider-fade .slick-slide {
      margin: 0;
   }
}

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

   #standard,
   #exctive,
   #summer {
      padding: 80px 0 60px;
   }

   #standard .box,
   #exctive .box,
   #summer .box {
      flex-direction: column;
      gap: 0;
      padding-top: 50px;
   }

   #standard .box+.box,
   #exctive .box+.box,
   #summer .box+.box {
      padding-top: 60px;
   }

   #standard .box .col-1,
   #standard .box .col-2,
   #exctive .box .col-1,
   #exctive .box .col-2,
   #summer .box .col-1,
   #summer .box .col-2 {
      display: contents;
      width: auto;
   }

   #standard .box .no,
   #exctive .box .no,
   #summer .box .no {
      padding-left: 5px;
      order: 1;
   }

   #standard .box .no:before,
   #exctive .box .no:before,
   #summer .box .no:before {
      width: 178px;
      top: 80px;
      right: -50px;
   }

   #standard .box h3,
   #exctive .box h3,
   #summer .box h3 {
      font-size: 34px;
      text-align: left;
      margin-top: -15px;
      padding-left: 75px;
      order: 2;
   }

   #standard .box .slider-fade,
   #exctive .box .slider-fade,
   #summer .box .slider-fade {
      margin: 0 -20px;
      padding-top: 6px;
      order: 3;
   }

   #standard .box .detail,
   #exctive .box .detail,
   #summer .box .detail {
      padding-top: 30px;
      order: 4;
   }

   #standard .box h4,
   #exctive .box h4,
   #summer .box h4 {
      font-size: 16px;
      line-height: 20px;
   }

   #standard .box .list,
   #exctive .box .list,
   #summer .box .list {
      padding-top: 15px;
   }

   #standard .box .list ul,
   #exctive .box .list ul,
   #summer .box .list ul {
      gap: 15px;
   }

   #standard .box .txt,
   #exctive .box .txt,
   #summer .box .txt {
      padding-top: 40px;
      order: 5;
   }

   #standard .box .price,
   #exctive .box .price,
   #summer .box .price {
      padding-top: 40px;
      order: 6;
   }

   #standard .box.reverse,
   #exctive .box.reverse,
   #summer .box.reverse {
      flex-direction: column;
   }

   #standard .box .no:before {
      right: -80px;
   }
}

#order-rental {
   background-color: #FAFAFA;
   padding: 152px 0 100px;
}

#order-rental h2 {
   font-weight: 400;
   font-size: 64px;
   line-height: 64px;
   letter-spacing: 0.1em;
   text-align: center;
}

#order-rental h2.first:after {
   content: '';
   display: block;
   width: 180px;
   height: 0;
   border-top: 1px solid #1F2122;
   margin: 24px auto 0;
}

#order-rental .box {
   display: flex;
   flex-wrap: wrap;
   gap: 0 46px;
   position: relative;
   padding-top: 80px;
}

#order-rental .box .col {
   width: 456px;
   padding-top: 20px;
}

#order-rental .box .no {
   max-width: max-content;
   font-weight: 300;
   font-size: 28px;
   letter-spacing: 0.1em;
   line-height: 28px;
   text-align: center;
   position: relative;
   z-index: 1;
}

#order-rental .box .no:before {
   content: '';
   width: 285px;
   height: 0;
   border-top: 1px solid #1F2122;
   position: absolute;
   top: 110px;
   right: -90px;
   transform: skewY(-42deg);
}

#order-rental .box .no span {
   display: block;
   font-size: 16px;
   letter-spacing: 0.1em;
}

#order-rental .box h3 {
   font-weight: 400;
   font-style: italic;
   font-size: 40px;
   line-height: 54px;
   letter-spacing: 0.1em;
   margin-top: -15px;
   padding-left: 80px;
}

#order-rental .box .list {
   padding-top: 95px;
   font-size: 15px;
}

#order-rental .box .list ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   text-align: center;
}

#order-rental .box .list ul span {
   display: block;
   padding-top: 7px;
}

#order-rental .box .point {
   width: 450px;
   border: 1px solid #1F2122;
   background-color: #fff;
   margin-top: 80px;
   padding: 30px 45px;
}

#order-rental .box .point h4 {
   font-weight: 400;
   font-style: italic;
   font-size: 20px;
   line-height: 24px;
   text-align: center;
}

#order-rental .box .point ul {
   font-weight: 700;
   font-size: 18px;
   line-height: 32px;
   padding-top: 20px;
}

#order-rental .box .point ul li {
   text-indent: -18px;
   padding-left: 18px;
}

#order-rental .box .photo {
   width: 598px;
}

#order-rental .box .txt {
   width: 100%;
   text-align: center;
   padding-top: 55px;
}

#order-rental .box .button {
   width: 100%;
   text-align: center;
   padding-top: 75px;
}

#order-rental .box .button a {
   font-weight: 400;
   font-style: italic;
   font-size: 20px;
}

#order-rental .box.brown .point {
   box-shadow: 6px 6px 0 #B49E9A;
}

#order-rental .box.pink .point {
   box-shadow: 6px 6px 0 #746FBB;
}

#order-rental hr {
   width: 180px;
   border: 0;
   border-top: 1px solid #1F2122;
   margin: 100px auto 0;
}

@media screen and (max-width: 769px) {
   #order-rental {
      padding: 70px 0 80px;
   }

   #order-rental h2 {
      font-size: 40px;
      line-height: 40px;
      margin: 0 -20px;
   }

   #order-rental h2.first:after {
      width: 150px;
      margin-top: 16px;
   }

   #order-rental hr {
      width: 150px;
      margin-top: 80px;
   }

   #order-rental .box {
      flex-direction: column;
      gap: 0;
      padding-top: 80px;
   }

   #order-rental .box .col {
      display: contents;
      width: auto;
   }

   #order-rental .box .no {
      padding-left: 5px;
      order: 1;
   }

   #order-rental .box .no:before {
      width: 178px;
      top: 80px;
      right: -80px;
   }

   #order-rental .box h3 {
      font-size: 34px;
      letter-spacing: 0.05em;
      text-align: left;
      margin-top: -15px;
      padding-left: 75px;
      order: 2;
   }

   #order-rental .box .photo {
      width: auto;
      margin: 0 -20px;
      order: 3;
   }

   #order-rental .box .list {
      padding-top: 35px;
      order: 4;
   }

   #order-rental .box .list ul {
      gap: 15px;
   }

   #order-rental .box .point {
      width: calc(100% - 6px);
      margin-top: 30px;
      padding: 30px 25px;
      order: 5;
   }

   #order-rental .box .txt {
      text-align: left;
      padding-top: 40px;
      order: 6;
   }

   #order-rental .box .button {
      padding-top: 70px;
      order: 7;
   }
}

.pick-up-item {
   padding-top: 120px;
}

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

.pick-up-item .box-img+.box-img {
   padding-top: 35px;
}

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

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

.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 {
   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-top: 80px;
   }

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

   .pick-up-item .box-img+.box-img {
      padding-top: 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 {
   padding-top: 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 a {
   background-color: #1F2122;
   color: #fff;
}

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

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

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

   .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 .wrap {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 60px;
}

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

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

   .banner .wrap {
      grid-template-columns: 100%;
      gap: 45px;
   }
}

.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-men/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-men/gprev.webp") no-repeat center top/100% auto;
}

.glightbox-clean .gnext {
   background: url("../../../../../img/usr/pg/cont/1formal-men/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);
   }
}