.summer-outfits {
  --min-size: 0;
  --max-size: 10px;
  --fluid-size: 1.25vw;

  font-size: min(var(--fluid-size), var(--max-size));
}

/* ------------------------
  layout
------------------------ */
.summer-outfits .l-inner {
  margin: 0 auto;
  max-width: 80em;
  overflow: hidden;
}

/* ------------------------
  utility: font
------------------------ */
/* font family */
.summer-outfits .u-fontFamily-yuGothic {
  font-family: YuGothic;
  font-weight: 500;
}

/* font size */
.summer-outfits .u-fontSize-12 {
  font-size: 1.2rem;
}

/* font color */
.summer-outfits .u-fontColor-brownDeep {
  color: #687d81;
}
.summer-outfits .u-fontColor-softTeal {
  color: #384e52;
}

.summer-outfits .u-fontColor-deepTeal {
  color: #897777;
}
.summer-outfits .u-fontColor-mochaGray {
  color: #675656;
}

/* ------------------------
  utility: position
------------------------ */
.summer-outfits .u-margin-center {
  margin: 0 auto;
}

.summer-outfits .u-margin-right {
  margin: 0 0 0 auto;
}

.summer-outfits .u-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.summer-outfits .u-text-center {
  text-align: center;
}

.summer-outfits .u-position-relative {
  position: relative;
}

.summer-outfits .u-position-absolute {
  position: absolute;
}

/* z-index */
.summer-outfits .u-z-index_0 {
  z-index: 0 !important;
}

.summer-outfits .u-z-index_1 {
  z-index: 1 !important;
}

.summer-outfits .u-z-index_2 {
  z-index: 2 !important;
}

.summer-outfits .u-z-index_3 {
  z-index: 3 !important;
}

/* ------------------------
  utility: margin, padding
------------------------ */
.summer-outfits .u-pt-90 {
  padding-top: 9em;
}

.summer-outfits .u-pt-130 {
  padding-top: 13em;
}

.summer-outfits .u-pt-140 {
  padding-top: 14em;
}

.summer-outfits .u-pt-170 {
  padding-top: 17em;
}

.summer-outfits .u-pt-280 {
  padding-top: 28em;
}

.summer-outfits .u-pb-0 {
  padding-bottom: 0 !important;
}

.summer-outfits .u-pb-100 {
  padding-bottom: 10em;
}

.summer-outfits .u-pb-190 {
  padding-bottom: 19em;
}

/* ------------------------
  utility: etc
------------------------ */
.summer-outfits .u-bg-wrapper {
  position: relative;
}
.summer-outfits .u-bg-wrapper > img {
  position: absolute;
  z-index: 0;
  top: 0;
}

/* ------------------------
  reset
------------------------ */
.fs-l-main {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  /* width: 100% !important; */
}

.fs-l-pageMain {
  max-width: 100% !important;
}

.summer-outfits img,
.summer-outfits video {
  width: 100%;
  height: 100%;
  display: block;
}

.summer-outfits video {
  background-color: transparent !important;
}

/* ------------------------
  component
------------------------ */
/* staff styling area: pattern */
.summer-outfits .c-ss-p1_title,
.summer-outfits .c-ss-p2_title {
  width: 72em;
}

.summer-outfits .c-ss-p1_container {
  height: 128.5em;
}

.summer-outfits .c-ss-p1_container.--bottom-item {
  height: 190em;
}

.summer-outfits .c-ss-p1_img {
  top: 5em;
  left: 8em;
}
.summer-outfits .c-ss-p1_img img:nth-of-type(1),
.summer-outfits .c-ss-p2_img img:nth-of-type(1) {
  position: absolute;
}

.summer-outfits .c-ss-p1_video {
  top: 63em;
  right: 3em;
}

.summer-outfits .c-ss-p1_img,
.summer-outfits .c-ss-p2_img {
  width: 50em;
  z-index: 1;
}

.summer-outfits .c-ss-p1_video,
.summer-outfits .c-ss-p2_video {
  width: 32em;
  z-index: 2;
}

.summer-outfits .c-ss-p1_text,
.summer-outfits .c-ss-p2_text {
  z-index: 0;
}

.summer-outfits .c-ss-p1_text {
  width: 60.5em;
  top: 57em;
  left: -7.5em;
}
.summer-outfits .c-ss-p1_text.--section3-01 {
  width: 54em;
  top: 60em;
  left: -0.8em;
}
.summer-outfits .c-ss-p1_text.--section4-01 {
  width: 60em;
  top: 54em;
  left: -5em;
}

.summer-outfits .c-ss-p1_reception,
.summer-outfits .c-ss-p2_reception {
  width: 4em;
}

.summer-outfits .c-ss-p1_reception {
  top: 40.5em;
  right: 16em;
}
.summer-outfits .c-ss-p1_reception.--section3-01 {
  top: 34em;
  right: 15.7em;
}

.summer-outfits .c-ss-p2_img {
  top: 5em;
  left: 22em;
}

.summer-outfits .c-ss-p2_video {
  top: 63em;
  left: 3em;
}

.summer-outfits .c-ss-p1_item {
  width: 70em;
  padding-top: 126.5em;
}
.summer-outfits .c-ss-p1_item.--w80 {
  width: 80em;
}

.summer-outfits .c-ss-p2_item {
  width: 70em;
  padding-top: 126.5em;
  padding-bottom: 10em;
}
.summer-outfits .c-ss-p2_item.--w80 {
  width: 80em;
}

.summer-outfits .c-ss-p2_text {
  width: 55.5em;
  top: 59.8em;
  right: -2.4em;
}
.summer-outfits .c-ss-p2_text.--section3-02 {
  width: 60em;
  top: 56.5em;
  right: -3em;
}
.summer-outfits .c-ss-p2_text.--section5-01 {
  width: 60em;
  top: 58em;
  right: -8.2em;
}

.summer-outfits .c-ss-p2_reception {
  top: 42.3em;
  left: 16em;
}
.summer-outfits .c-ss-p2_reception.--section3-02 {
  top: 38.2em;
  left: 16.5em;
}
.summer-outfits .c-ss-p2_reception.--section5-01 {
  top: 35em;
  left: 17.4em;
}

/* ------------------------
  ¸ÇÍ­¥¯¥é¥¹
------------------------ */
.summer-outfits {
  background-color: #e8ede5;
}

/* mv */
.summer-outfits .mv_video,
.summer-outfits .mv_cover {
  width: 80em;
}

.summer-outfits .mv_cover {
  width: 80em;
  height: auto;
}

/* section1 */
.summer-outfits .section1 {
  position: relative;
}

.summer-outfits .section1::after {
  content: "";
  position: absolute;
  width: 0.2em;
  height: 20em;
  margin: 2em auto;
  background-color: #869fa3;
  top: 67em;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.summer-outfits .section1_textImg {
  position: relative;
  width: 74em;
}

/* .summer-outfits .section1_textImg::after {
  content: "";
  position: absolute;
  width: 0.2em;
  height: 20em;
  margin: 2em auto;
  background-color: #869FA3;
  top: 53em;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 7;
} */

/* section2 */
.summer-outfits .section2_titleImg {
  width: 80em;
}

.summer-outfits .section2_img__01 {
  width: 39em;
  top: 13.5em;
  left: 4em;
}

.summer-outfits .section2_img__02 {
  width: 40.5em;
  top: -4em;
  right: 0;
}

.summer-outfits .section2-01 {
  margin-top: 80em;
}

/* section3 */
.summer-outfits .section3_titleImg {
  width: 80em;
}

.summer-outfits .section3_img__01 {
  width: 39em;
  top: -10.5em;
  left: 0;
}

.summer-outfits .section3_img__02 {
  width: 39em;
  top: 5em;
  right: 3.5em;
}

.summer-outfits .section3-01 {
  margin-top: 72em;
}

/* section4 */
.summer-outfits .section4_titleImg {
  width: 80em;
}
.summer-outfits .section4_titleImg img:nth-of-type(1) {
  z-index: 2;
}

.summer-outfits .section4_img__01 {
  width: 41em;
  top: -27.9em;
  left: 3.2em;
}

.summer-outfits .section4_img__02 {
  width: 39em;
  top: 5em;
  right: 3em;
}

.summer-outfits .section4-01 {
  margin-top: 42em;
}

/* section5 */
.summer-outfits .section5_titleImg {
  width: 80em;
}
.summer-outfits .section5_titleImg img:nth-of-type(1) {
  z-index: 2;
}

.summer-outfits .section5_img__01 {
  width: 39em;
  top: -27.3em;
  left: 37.7em;
}

.summer-outfits .section5_img__02 {
  width: 39em;
  top: 5em;
  right: 3em;
}

.summer-outfits .section5-01 {
  margin-top: 40em;
}

/* section6 */
.summer-outfits .section6_titleImg {
  width: 42em;
}

.summer-outfits .section6_item-container {
  margin-top: 7em;
}

/* swiper */
.summer-outfits .swiper {
  width: 100%;
  overflow: hidden;
}

.summer-outfits .swiper-wrapper {
  gap: 2em;
  transition-timing-function: linear !important;
}

.summer-outfits .swiper-slide {
  width: 25em !important;
}