@charset "UTF-8";


:root {
  --accent-blue: #4F8583;
  --accent-orange: #f86719;
  --bg-color: #eee;
}

.wrapper {
  line-height: 0;
  background: var(--bg-color);
}

.fr-pagetop {
  z-index: 99;
}

.main_inner {
  max-width: 768px;
  margin: 0 auto;
  padding: 0;

  font-family: ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, Hiragino Sans, Noto Sans CJK JP, Osaka, Meiryo, メイリオ, MS PGothic, ＭＳ Ｐゴシック, YuGothic, Yu Gothic, Hiragino Sans GB, Helvetica Neue, HelveticaNeue, Helvetica, Noto Sans, Roboto, Arial, Arial Unicode MS, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6em;
}

img {
  object-fit: contain;
}

footer .fr-globalFooter {
  margin-top: 0 !important;
}

p.text {
  padding: 0 1em;
  line-height: 1.5em;
}

section {
  margin-bottom: 40px;
}

.list-note {
  margin: 0 2em;
  padding-bottom: 1em;
}

.list-note li {
  text-indent: -1em;
  margin-bottom: 0.5em;
}

.list-note li:before {
  content: "※";
}

.link-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.link-box a {
  position: relative;
  display: inline-block;
  width: 250px;
  padding: 1em 0;
  margin-bottom: 2.5em;
  border: 1px solid #000;
}

.link-box a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.catalog {
  text-align: center;
  margin: 0 auto 45px;
}

.catalog-img {
  width: 30%;
  margin-bottom: 2em;
}

.catalog p.text {
  margin-bottom: 1em;
}

.catalog-title {
  width: 50%;
  margin: 0 auto;
  margin-bottom: 1em;
}

.link-box.link-box_pdf a::before {
  content: '';
  background: url(https://www.plst.com/jp/ja/special-feature/common/images/pdficon.png) no-repeat;
  position: absolute;
  bottom: 0.9em;
  left: 2em;
  display: inline-block;
  width: 2em;
  height: 2em;
  background-size: contain;
  vertical-align: middle;
}

.serif {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* header */

.header-container {
  position: relative;
  background: transparent;
  margin: 0 auto;
  z-index: 50;
}

.header_inner {
  position: absolute;
  padding: 10px;
}

.header_logo {
  width: 30px;
  height: 30px;
}

/* content */

.grid-container {
  height: 100vh;
  display: grid;
  gap: 0.5em;
  grid-template-columns: 55% 1fr;
  grid-template-rows: 52% 8% 5% 16% 10% 1fr;
  overflow: hidden;
}

section.mv {
  position: relative;
}

.mv .item-logo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 45vw;
  max-width: 230px;
  filter: drop-shadow(2px 2px 4px #fff);
}

.grid-item img {
  object-fit: cover;
  height: 100%;
}

.grid-item.item-main {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.grid-item.item-main img {
  object-position: 50% 40%;
}

.grid-item.item-style01 {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
}

.grid-item.item-style01 img {
  object-position: 50% 20%;
}

.grid-item.item-bg {
  grid-column: 1 / 2;
  grid-row: 5 / 7;
}

.grid-item.item-text {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.grid-item.item-style02 {
  grid-column: 2 / 3;
  grid-row: 4 / 7;
}

[data-aos^=fade][data-aos^=fade] {
  scale: 80%;
  transition-property: opacity, transform, scale;
}

[data-aos^=fade][data-aos^=fade].aos-animate {
  scale: 100%;
}

.concept-box {
  padding: 1.5em;
}

.concept-box p {
  font-size: 1.1em;
  line-height: 1.5em;
  margin-bottom: 1em;
  text-align: center;
}

section.lead {
  background-image: url(https://www.plst.com/jp/ja/special-feature/pants-summer/images/mv_bg01.jpg);
  background-size: cover;
  margin: 0 calc(50% - 50vw);
  margin-bottom: 3em;
  width: 100vw;
}

.lead-box {
  text-align: center;
  padding: 3em 2em 2em 2em;
  backdrop-filter: blur(3px);
  color: #fff;
}

.lead-box p {
  margin-bottom: 1.5em;
}

img.lead-logo {
  max-height: 4em;
}

.lead-box h3 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}

.lead-box ul {
  margin: 2em auto;
}

.lead-box ul li {
  margin-bottom: 0.7em;
}

h2 {
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 1em;
}

h2 span {
  font-size: 0.9em;
}

.item-box {
  margin: 0 auto 3em auto;
  max-width: 500px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item_img img {
  max-height: 350px;
  margin-bottom: 1em;
}

.item_point {
  border: dotted 1px var(--accent-orange);
  padding: 1em 1em 1em 1.5em;
  display: inline-block;
}

.point_h3 {
  color: var(--accent-orange);
  margin-bottom: 0.5em;
}

.item_point ul li {
  text-indent: -1em;
  margin-bottom: 0.3em;
}

.item_point ul li:before {
  content: "・";
  color: var(--accent-orange);
}

.styling {
  position: relative;
}

.styling-box {
  margin-bottom: 3em;
  position: relative;
}

.item_text .sf_bff_products_itemName,
.item_text .sf_bff_products_flags,
.item_text .sf_bff_price_flags,
.item_text .favorites_layout {
  display: none;
}

.item_text .sf_bff_price_flags {
  margin-left: 12px;
}

.item_text .sf_bff_products_inner ul.column_1_text li .sf_bff_products_detail {
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.item_text .sf_bff_products_inner {
  text-align: center;
}

.style-title {
  padding: 0.8em;
  position: absolute;
  top: 1em;
  color: var(--accent-orange);
  font-weight: 300;
  font-size: 1.3em;
  writing-mode: sideways-rl;
  text-orientation: mixed;
  z-index: 3;
}

.style_img {
  width: 100%;
  margin-bottom: 1em;
}

.style_img_m {
  width: 80%;
}

.style_text {
  margin-bottom: 30px;
}

.style_item-carousel {
  background: #fff;
  padding-top: 1em;
}

.style_item-carousel .sf_bff_products_inner ul {
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding: 0 1em;
}

.style_item-carousel .sf_bff_products_inner ul.column_3 li {
  width: auto;
  min-width: 37%;
  margin-bottom: 1em;
}

.style_item-carousel .sf_bff_products_inner ul.column_3 li:nth-child(3n) {
  margin-right: 2%;
}

.style_item-carousel .sf_bff_products_inner ul:has(> :nth-child(-n+2):last-child) {
  flex-wrap: wrap;
  overflow-x: hidden;
}

.style_item-carousel .sf_bff_products_inner ul:has(> :nth-child(-n+2):last-child) li {
  width: 37%;
  margin-right: 2%;
}

.style_item-carousel .sf_bff_products_inner ul {
  margin: 0 auto 1em auto;
}

.style_item-carousel.list-note {
  padding-left: 1em;
}

.style_text .list-note {
  padding-left: 1em;
  margin-top: 1em;
}

.otherstyle-box h3 {
  text-align: center;
  color: var(--accent-orange);
  font-size: 1.2em;
}

.otherstyle-box h3 span {
  color: #000;
  font-size: 0.9em;
}

.styles-container {
  display: grid;
  margin: 1em;
  margin-bottom: 2em;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  align-items: start;
}

.styles-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 0.3em;
  padding: 0.5em;
  background-color: #fff;
}

.styles-card p {
  font-size: 0.9em;
  line-height: 1.5;
}

/* pc */

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

  .sp-only {
    display: none;
  }

  .main_inner {
    font-family: ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, Hiragino Sans, Noto Sans CJK JP, Osaka, Meiryo, メイリオ, MS PGothic, ＭＳ Ｐゴシック, YuGothic, Yu Gothic, Hiragino Sans GB, Helvetica Neue, HelveticaNeue, Helvetica, Noto Sans, Roboto, Arial, Arial Unicode MS, sans-serif;
    font-size: 16px;
  }

  .header-container,
  .main_inner {
    max-width: 1226px;
  }

  section {
    max-width: 768px;
    margin: 0 auto 40px auto;
  }

  section.mv {
    max-width: 1226px;
  }

  section.lead {
    max-width: 100vw;
  }

  .header_logo {
    width: 40px;
    height: 40px;
  }

  .mv .item-logo {
    max-width: 400px;
    top: auto;
    bottom: 17%;
  }

  .grid-container {
    grid-template-columns: 35% 1fr 35%;
    grid-template-rows: 20% 40% 16% 1fr;
  }

  .grid-item.item-main {
    grid-column: 3 / 4;
    grid-row: 1 / 5;
  }

  .grid-item.item-style01 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    position: relative;
    z-index: 2;
    border-top: 0.5em solid var(--bg-color);
    border-bottom: 0.5em solid var(--bg-color);
  }

  .grid-item.item-bg {
    grid-column: 2 / 3;
    grid-row: 1 / 5;
  }

  .grid-item.item-text {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }

  .grid-item.item-style02 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .style_item-carousel .sf_bff_products_inner ul {
    overflow-x: auto;
  }

  p.text {
    padding: 0;
  }

  .item_img img {
    max-height: 450px;
  }

  .styles-card {
    padding: 1em;
  }

}

/* small */
@media screen and (max-height: 667px) {
  .mv .item-logo {
    top: 35%;
    width: 38vw;
  }
}