@charset "utf-8";

/* ============================================================
   pita / layout.css
   Primary color: #E9903F  Breakpoint: 768px (PC) / 767px (SP)
   Diagonal offset: 11.4vw ≈ 155px @ 1366px  (matches SVG trapezoid)
   ============================================================ */

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
#wrap,
#pita {
  font-family: 'Noto Sans JP', 'M PLUS Rounded 1c', sans-serif;
}
#wrap {
  background: #fff;
  padding-bottom: 10vw;
}
#wrap *,
#pita * { box-sizing: border-box; }

/* ------------------------------------------------------------
   Responsive helpers
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  #wrap { padding-bottom: 20vw; }
  #pita .pcOnly { display: none !important; }
}
@media screen and (min-width: 768px) {
  #pita .spOnly { display: none !important; }
}

/* ------------------------------------------------------------
   Inner content wrapper (max-width 1000px, left-margin 183px @ 1366px)
   ------------------------------------------------------------ */
.layout-inner {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ------------------------------------------------------------
   Navigation override  (#zj_ma17-gNav)
   Background: #eaeaea  Text: #333
   ------------------------------------------------------------ */
#zj_ma17-gNav {
  background: #eaeaea !important;
 
}

@media screen and (min-width: 768px) {
  #zj_ma17-gNav ul.inner {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto;
    height: 60px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0;
    list-style: none;
    background: none;
  }
  #zj_ma17-gNav ul.inner li {
    float: none;
    width: auto;
    padding: 0 30px;
    line-height: 60px;
    border: none;
    background: none;
  }
  #zj_ma17-gNav ul.inner li a {
    color: #333 !important;
    font-size: 18px;
    font-weight: 700;
    height: 60px;
    width: auto;
    display: inline-block;
  }
  #zj_ma17-gNav ul.inner li a:hover {
    color: #E9903F !important;
    background: none;
  }
}
@media screen and (max-width: 767px) {
 
  #zj_ma17-gNav p.spOnly {
    
    color: #333 !important;
  }
}
/* ------------------------------------------------------------
   Typography shared
   ------------------------------------------------------------ */
.sec-heading {
  color: #E9903F;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.9em;
}
.sec-heading-center {
  color: #E9903F;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 1em;
}
.sec-heading-sub {
  font-size: clamp(16px, 2.05vw, 28px);
  display: block;
}
.sec-asterisk {
  font-size: 0.5em;
  font-weight: 400;
}
.sec-body {
  color: #666;
  font-size: clamp(14px, 1.17vw, 16px);
  line-height: 2.2;
}
.sec-note {
  color: #666;
  font-size: 11px;
  line-height: 2;
  margin-top: 1.5em;
  text-align: center;
}

/* ------------------------------------------------------------
   Diagonal gray sections
   clip-path parallelogram: both top & bottom edges slope the same direction
   (lower-left → upper-right) matching SVG trapezoid angle
   ------------------------------------------------------------ */
.sec-diag-gray {
  background: #f7f7f7;
  clip-path: polygon(
    0 11.4vw,
    100% 0,
    100% calc(100% - 11.4vw),
    0 100%
  );
  padding-top: calc(40px + 7.6vw);
  padding-bottom: calc(60px + 11.4vw);
  margin-top: -1px;
  margin-bottom: -1px;
}

/* diagonal top only (mode section) */
.sec-diag-gray-top {
  background: #f7f7f7;
  clip-path: polygon(
    0 11.4vw,
    100% 0,
    100% 100%,
    0 100%
  );
  padding-top: calc(60px + 11.4vw);
  padding-bottom: 60px;
  margin-top: -1px;
}

@media screen and (max-width: 767px) {
  .sec-heading,
  .sec-heading-center {
    font-size: 24px;
  }
  .sec-heading {
    margin-bottom: 0.4em;
  }
  .sec-diag-gray {
    clip-path: polygon(
      0 11.6vw,
      100% 0,
      100% calc(100% - 11.6vw),
      0 100%
    );
    padding-top: calc(40px + 11.6vw);
    padding-bottom: calc(40px + 11.6vw);
  }
  .sec-diag-gray-top {
    clip-path: polygon(
      0 11.6vw,
      100% 0,
      100% 100%,
      0 100%
    );
    padding-top: calc(40px + 11.6vw);
    padding-bottom: 40px;
  }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#o1 {
  position: relative;
  background: #fff;
}

/* Main visual */
.hero-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.hero-visual .hero-slider {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-visual .hero-slider li {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.hero-visual .hero-bg {
  width: 100%;
  height: auto;
  display: block;
}
.hero-visual .slick-dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}
.hero-visual .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}
.hero-visual .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0;
  cursor: pointer;
}
.hero-visual .slick-dots li button::before {
  display: none;
}
.hero-visual .slick-dots li.slick-active button {
  background: #fff;
}

/* Green diagonal section */
.hero-green {
  background: linear-gradient(71.76deg, #f8e68b 0%, #f5bbcf 100%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 11.4vw),
    0 100%
  );
  padding: 3.5vw 20px calc(5vw + 11.4vw);
  text-align: center;
  margin-top: -1px;
}
.hero-catch {
  color: #231815;
  font-size: clamp(20px, 3.15vw, 43px);
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
}

/* Image below hero-green (straddling the transition) */
.hero-post-img {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  margin-top: -10vw;
  position: relative;
  z-index: 2;
}
.hero-post-img img,
.hero-post-img video {
  width: clamp(300px, 45.7vw, 624px);
  height: auto;
  border-radius: 10px;
  display: block;
}

@media screen and (max-width: 767px) {
  .hero-green {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 11.6vw),
      0 100%
    );
    padding: 5vw 5% calc(7vw + 11.6vw);
  }
  .hero-catch {
    font-size: clamp(18px, 6.05vw, 26px);
    display: block;
    text-align: center;
  }
  .hero-post-img {
    margin-top: -14vw;
    padding: 0 5%;
  }
  .hero-post-img img,
.hero-post-img video {
    width: 100%;
  }
  #sec-mode::before {
    clip-path: polygon(0 11.6vw, 100% 0, 100% 100%, 0 100%);
  }
}

/* ============================================================
   FEATURE 1: シワ伸ばしを、もっと手軽に
   Gray parallelogram bg（::before）| Text left / Large image right（はみ出し可）
   ============================================================ */

/* clip-path は背景（::before）のみ。コンテンツは layout-inner 内に収める */
#sec-feature1 {
  clip-path: none;
  background: transparent;
  position: relative;
  overflow: visible;
  padding-bottom: 0;
}
#sec-feature1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  clip-path: polygon(
    0 11.4vw,
    100% 0,
    100% calc(100% - 11.4vw),
    0 100%
  );
  z-index: 0;
}
#sec-feature1 .sec-feature1-inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.sec-feature1-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.feature1-text {
  flex: 1;
  min-width: 0;
}
.feature1-img {
  flex: 0 0 36%;
  min-width: 0;
  max-width: 36%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-radius: 10px;
}
.feature1-img img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  #sec-feature1::before {
    clip-path: polygon(
      0 11.6vw,
      100% 0,
      100% calc(100% - 11.6vw),
      0 100%
    );
  }
  #sec-feature1 {
    margin-bottom: 40px;
  }
  .sec-feature1-inner {
    flex-direction: column;
    gap: 24px;
  }
  .feature1-text {
    order: 1;
    text-align: center;
  }
  .feature1-img {
    order: 2;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
  .feature1-img img {
    width: 66.67%;
    margin: 0 auto;
  }
}

/* ============================================================
   FEATURE 2: スチームと吸引の巡回気流で / 一度でキレイに
   White bg | Small image left / Text right
   ============================================================ */
#sec-feature2 {
  padding: 70px 0;
  background: #fff;
}
@media screen and (min-width: 768px) {
  #sec-feature2 .sec-heading {
    font-size: 32px;
  }
}
.sec-feature2-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.feature2-img {
  flex: 0 0 38%;
  max-width: 38%;
}
.feature2-img img,
.feature2-img video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.feature2-text {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 767px) {
  #sec-feature2 {
    padding: 20px 0;
    margin-bottom: 40px;
  }
  .sec-feature2-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .feature2-img {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .feature2-text {
    text-align: center;
  }
  .sec-heading-sub {
    font-size: 18px;
  }
}

/* ============================================================
   FEATURE 3: 除菌・消臭も同時に
   White bg | Text left / Small image right
   ============================================================ */
#sec-feature3 {
  padding: 70px 0;
  background: #fff;
}
.sec-feature3-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.feature3-text {
  flex: 1;
  min-width: 0;
  order: 1;
}
.feature3-img {
  flex: 0 0 38%;
  max-width: 38%;
  order: 2;
}
.feature3-img img,
.feature3-img video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.feature3-chart {
  margin: 40px auto 0;
  max-width: 600px;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}
.feature3-chart img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.feature3-chart-note {
  color: #666;
  font-size: 11px;
  line-height: 2;
  margin: 1em 0 0;
  text-align: left;
}

@media screen and (max-width: 767px) {
  #sec-feature3 {
    padding: 20px 0;
    margin-bottom: 40px;
  }
  .sec-feature3-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .feature3-img {
    order: 1;
    flex: none;
    width: 100%;
    max-width: none;
  }
  .feature3-text {
    order: 2;
    text-align: center;
  }
  .feature3-chart {
    margin-top: 24px;
    max-width: none;
    padding: 0 20px;
    width: 100%;
  }
  .feature3-chart-note {
    text-align: center;
  }
  .feature3-chart .feature3-chart-note {
    text-align: left;
  }
}

/* ============================================================
   MODE SECTION: 素材に合わせて選べる 2段階モード切替
   Gray (diagonal top, flat bottom) | Cards center / Product image right edge (PC)
   ============================================================ */

/* Override clip-path from .sec-diag-gray-top so absolutely positioned
   children are not clipped — background handled by ::before instead */
#sec-mode {
  clip-path: none;
  background: transparent;
  position: relative;
  overflow: visible;
}
#sec-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  clip-path: polygon(0 11.4vw, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
#sec-mode > .layout-inner {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.mode-main {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

/* Tall product image absolutely anchored to right edge of section */
.mode-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30.6vw;
  max-width: 418px;
  z-index: 1;
}
.mode-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mode cards wrapper（上段：スチーム量／下段：吸引） */
.mode-cards {
  --mode-circle-size: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mode-circle-size) / 1.5);
  margin: 28px 0;
}
.mode-cards-group {
  width: 100%;
  overflow: visible;
}
.mode-row-heading {
  margin: 0;
  color: #E9903F;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.mode-cards-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  overflow: visible;
  padding-top: calc(var(--mode-circle-size) / 2);
}

/* Individual mode card */
.mode-card {
  --mode-circle-size: 88px;
  flex: 0 0 218px;
  position: relative;
  overflow: visible;
  background: #fff;
  border: 1px solid #E9903F;
  border-radius: 6px;
  padding: 0 16px 24px;
  text-align: center;
}
/* Circle badge（中心をカード上辺に合わせ、上半分がはみ出す） */
.mode-circle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: var(--mode-circle-size);
  height: var(--mode-circle-size);
  border-radius: 50%;
  background: #E9903F;
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.mode-card .mode-specs {
  margin-top: calc(var(--mode-circle-size) / 2 + 16px);
}
.mode-kanji {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
.mode-txt {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* Specs inside each card */
.mode-specs {
  margin: 0;
}
.mode-specs .mode-val {
  margin: 0;
}
.mode-val {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: #000;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .mode-img {
    display: none;
  }
  .mode-cards {
    --mode-circle-size: 74px;
    gap: calc(var(--mode-circle-size) / 1.5);
    margin: 20px 0;
  }
  .mode-cards-row {
    gap: 15px;
  }
  .mode-card {
    --mode-circle-size: 74px;
    flex: 1;
  }
  .mode-kanji { font-size: 32px; }
  .mode-txt { font-size: 12px; }
  .mode-val { font-size: 24px; }
}

/* ============================================================
   CAROUSEL SECTION: 衣類からファブリックまで、幅広く使える
   White bg | Slick carousel with 6 items
   ============================================================ */

/* Reset override from cm_dc99.css */
#image {
  background: none !important;
  background-image: none !important;
  height: auto !important;
  position: static !important;
  padding: 80px 0 60px;
}

.carousel-outer {
  position: relative;
  overflow: hidden;
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.carousel-list .slick-track {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
}
.carousel-list .slick-slide {
  margin: 0 17px;
}

/* Each item */
.carousel-item {
  width: 270px;
  outline: none;
}
.carousel-thumb {
  width: 270px;
  height: 189px;
  background: #eeeeee;
  border-radius: 10px;
  overflow: hidden;
}
.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-label {
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  margin-top: 18px;
  color: #333;
}

/* ----------------------------------------------------------------
   Carousel nav: .carousel-nav は .carousel-outer の外にある独立した要素
   appendArrows / appendDots + flex order で [← prev][dots][next →] を配置
   ---------------------------------------------------------------- */

/* nav コンテナ */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 8px;
}

/* Dots */
.carousel-nav .slick-dots {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: static;
  bottom: auto;
  width: auto;
}
.carousel-nav .slick-dots li {
  width: 6px;
  height: 6px;
  margin: 0;
}
.carousel-nav .slick-dots li button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background-color: #dfdedb;
  border: none;
  outline: none;
  cursor: pointer;
}
/* ::before の font 文字は非表示にして button 自体を円ドットとして使う */
.carousel-nav .slick-dots li button::before {
  display: none;
}
.carousel-nav .slick-dots li.slick-active button {
  background-color: #E9903F;
}

/* Arrows（Slick の DOM 順は prev → next → dots のため flex order で並べ替え） */
.carousel-nav .slick-prev {
  order: 1;
}
.carousel-nav .slick-dots {
  order: 2;
}
.carousel-nav .slick-next {
  order: 3;
}
.carousel-nav .slick-prev,
.carousel-nav .slick-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: none;
  z-index: auto;
}
/* slick デフォルトの ::before 文字アイコンを非表示 */
.carousel-nav .slick-prev::before,
.carousel-nav .slick-next::before {
  display: none;
}
/* Material Symbols アイコン */
.carousel-nav .slick-prev .material-symbols-outlined,
.carousel-nav .slick-next .material-symbols-outlined {
  font-size: 24px;
  color: #E9903F;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media screen and (max-width: 767px) {
  #image {
    padding: 60px 0 40px;
  }
  .carousel-item {
    width: 240px;
  }
  .carousel-thumb {
    width: 240px;
    height: 168px;
  }
}

/* ============================================================
   POINTS SECTION: 使いやすい便利なポイント
   Gray parallelogram bg | 便利2件 + 安全設計3件
   ============================================================ */
.points-block + .points-block {
  margin-top: 48px;
}
.points-sub-heading {
  color: #E9903F;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 1em;
}
.points-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Each point card */
.point-card {
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 189px;
}
.point-img {
  flex: 0 0 33%;
  max-width: 33%;
  overflow: hidden;
}
.point-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px 0 0 10px;
}
.point-text {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.point-heading {
  color: #E9903F;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
.point-text p {
  color: #666;
  font-size: clamp(13px, 1.17vw, 16px);
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .points-block + .points-block {
    margin-top: 50px;
  }
  .points-sub-heading {
    font-size: 24px;
    margin-bottom: 0.6em;
  }
  .point-card {
    flex-direction: column;
    min-height: auto;
  }
  .point-img {
    flex: none;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  .point-img img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
  }
  .point-text {
    padding: 20px;
    text-align: center;
  }
  .point-heading {
    font-size: 22px;
  }
  .point-text p {
    font-size: 14px;
  }
}

p.te {
  width: 100%;
  max-width: 900px;
  margin: 1em auto;
}

#zj_ma17-info table {
  margin-bottom: 0;
}