@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
.page__inner{
		width:100vw;
	}
a{outline: none; text-decoration: none;}
a:focus{outline:none;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}

#pro_wrapper{
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;	
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
.local-nav{
    margin: 0 auto!important;
    padding: 8px 15px 8px 22px !important;
}
.chienmechant{
  /* ---- カラー定義（MVに合わせた配色） ---- */
  --cm-pink:#c93068;
  --cm-beige:#f0ddc4;
  --cm-cream:#f7ead9;
  --cm-green:#1d8d55;
  --cm-green-deep:#15703f;
  --cm-mint:#dcece3;
  --cm-orange:#ea8249;
  --cm-orange-deep:#d96f37;
  --cm-brown:#a18d74;
  --cm-brown-deep:#786b5a;
  --cm-brown-pale:#f3e7d9;
  --cm-yellow:#fcf7cd;
  --cm-ink:#3c3b39;
  --cm-ink-soft:#6b6863;
  --cm-logo:#984e35;
  --cm-white:#ffffff;

  /* ---- レイアウト幅 ---- */
  --cm-container-pc:980px;
  --cm-container-sp:90%;

  /* ---- フォントサイズ：PC / SP を個別指定 ---- */
  --cm-fs-h2-pc:30px;
  --cm-fs-h3-pc:24px;
  --cm-fs-text-pc:16px;

  --cm-fs-h2-sp:25px;
  --cm-fs-h3-sp:21px;
  --cm-fs-text-sp:16px;

  /* ---- body相当の指定はすべてここに ---- */
  margin:0;
  padding:0;
  background:var(--cm-white);
  color:var(--cm-ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
  font-size:var(--cm-fs-text-pc);
  line-height:1.8;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  word-break:break-word;
}

/* ---- 共通リセット（.chienmechant 配下のみ） ---- */
.chienmechant *,
.chienmechant *::before,
.chienmechant *::after{ box-sizing:border-box; }
.chienmechant img{ max-width:100%; height:auto; display:block; }
.chienmechant picture{ display:block; }
:where(.chienmechant a){ color:inherit; text-decoration:none; }
.chienmechant ul,
.chienmechant ol{ margin:0; padding:0; list-style:none; }
.chienmechant button{ font-family:inherit; border:none; background:none; cursor:pointer; padding:0; color:inherit; }
.chienmechant table{ border-collapse:collapse; width:100%; }
.chienmechant h1,.chienmechant h2,.chienmechant h3,.chienmechant p{ margin:0; }

/* ---- コンテナ：PC 980px / SP 90% ---- */
.chienmechant-container{
  width:var(--cm-container-pc);
  max-width:100%;
  margin:0 auto;
  padding:0 20px;
}

/* ---- タイポグラフィスケール：PC→SPで個別指定 ---- */
.chienmechant-h2{
  font-size:var(--cm-fs-h2-pc);
  line-height:1.45;
  font-weight:700;
  color:var(--cm-ink);
}
.chienmechant-h3{
  font-size:var(--cm-fs-h3-pc);
  line-height:1.5;
  font-weight:700;
  color:var(--cm-green);
}
.chienmechant-text{
  font-size:var(--cm-fs-text-pc);
  line-height:1.85;
  color:var(--cm-ink);
}
.chienmechant-text--soft{ color:var(--cm-ink-soft); }
.chienmechant-text--small{ font-size:0.8em; line-height:1.8; color:var(--cm-ink-soft); }
.chienmechant-sup{
  font-size:0.65em;
  line-height:0;
  vertical-align:super;
}
.chienmechant-text--center{ text-align:center; }
.chienmechant-text--white{ color:var(--cm-white); }
.chienmechant-br-pc{ display:inline; }
.chienmechant-br-sp{ display:none; }
.chienmechant-h2--center{ text-align:center; }
.chienmechant-h2--white{ color:var(--cm-white); }

/* ---- 汎用ボタン ---- */
.chienmechant-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:480px;
  background:var(--cm-orange);
  color:var(--cm-white)!important;
  font-weight:700;
  font-size:18px;
  border-radius:999px;
  padding:18px 28px;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.chienmechant-btn:hover{ 
    background:var(--cm-orange-deep); 
    text-decoration: none;
}
.chienmechant-btn:active{ transform:scale(0.98); }
.chienmechant-btn__arrow{
  display:inline-block;
  width:10px;
  height:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:2px;
}
.chienmechant-btn--ghost{
  width:auto;
  max-width:none;
  padding:10px 26px;
}
.chienmechant-btn--spread .chienmechant-btn__label{
  flex:1 1 auto;
  text-align:center;
}

/* ===================================================================
   1. MVヘッダー
=================================================================== */
.chienmechant-mv{ background:var(--cm-beige); }
.chienmechant-mv__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:42px 0 0 0;
}
.chienmechant-mv__media{
  flex:0 0 auto;
  width:230px;
}
.chienmechant-mv__media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
}
.chienmechant-mv__body{
  flex:1 1 auto;
  max-width:380px;
  text-align:center;
}
.chienmechant-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px 20px 16px;
}
.chienmechant-logo__image{
  width:80%;
  height:auto;
  display:block;
}
.chienmechant-mv__title{
  color:var(--cm-green);
  font-weight:700;
  font-size:40px;
  line-height:1.5;
  margin:0 0 12px;
}
.chienmechant-mv__sub{
  color:var(--cm-logo);
  font-weight:600;
  font-size:24px;
  letter-spacing:0.05em;
}

/* ===================================================================
   2. サンプル提供セクション（上部・下部で共通／背景色のみ切替）
=================================================================== */
.chienmechant-sample{ padding:48px 0 56px; }
.chienmechant-sample--beige{ background:var(--cm-beige); }
.chienmechant-sample--yellow{ background:var(--cm-beige) }

.chienmechant-sample__card{
  background:var(--cm-white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(60,45,20,0.08);
}
.chienmechant-sample__heading{
  background:var(--cm-green);
  color:var(--cm-white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  padding:20px 24px;
}
.chienmechant-sample__badge{
  display:inline-block;
  background:var(--cm-white);
  color:var(--cm-green);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.4;
  padding:6px 16px;
  white-space:nowrap;
}
.chienmechant-sample__heading-text{ font-size:1em; }
.chienmechant-sample__body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:34px 40px;
}
.chienmechant-sample__img{
  flex:0 0 230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.chienmechant-sample__img picture{ width:100%; }
.chienmechant-sample__img img{ border-radius:6px; margin:0 auto; text-align:center; max-width:80%; }
.chienmechant-sample__caption{
  margin-top:14px;
  margin-bottom:0;
  font-weight:700;
  color:var(--cm-ink);
  line-height:1.6;
}
.chienmechant-sample__info{ flex:0 1 480px; }
.chienmechant-sample__info .chienmechant-text{ 
    margin-bottom:22px;
    text-align: center;
    }

/* ===================================================================
   3. ナビゲーション
=================================================================== */
.chienmechant-nav{
  background:#fbfbfb;
  border-bottom:1px solid #ececec;
}
.chienmechant-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.chienmechant-nav__list{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
}
.chienmechant-nav__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--cm-ink-soft);
  font-weight:500;
  text-decoration:none;
}
.chienmechant-nav__caret{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  margin-top:2px;
}
.chienmechant-nav__cta{ flex:0 0 auto; }

/* ===================================================================
   4. 特長セクション
=================================================================== */
.chienmechant-feature{ background:var(--cm-mint); padding:100px 0 60px; }
.chienmechant-feature__list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:34px;
}
.chienmechant-feature__card{
  background:var(--cm-white);
  border-radius:14px;
  padding:38px 44px;
  display:flex;
  align-items:center;
  gap:44px;
  box-shadow:0 10px 30px rgba(60,45,20,0.08);
}
.chienmechant-feature__lead{
  flex:0 0 420px;
  text-align:center;
}
.chienmechant-feature__body{ 
    flex:1 1 auto;
    text-align: left;
}
.chienmechant-pill{
  display:inline-block;
  background:var(--cm-green);
  color:var(--cm-white);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.03em;
  padding:7px 24px;
  border-radius:999px;
  margin-bottom:18px;
}
.chienmechant-feature__title{ margin:0; }
.chienmechant-feature__body .chienmechant-text + .chienmechant-text--small{ margin-top:14px; }

/* ===================================================================
   5. ご使用方法セクション
=================================================================== */
.chienmechant-howto{ background:var(--cm-white); padding:58px 0 64px; }
    .chienmechant-howto__lead{ 
        margin-top:20px!important;
        font-size:20px;
        font-weight: 600;
        color: var(--cm-green);
}
.chienmechant-howto__video{
  position:relative;
  margin-top:34px;
  border-radius:10px;
  overflow:hidden;
  background:#1c1c1c;
}
.chienmechant-howto__video img{ width:100%; }
.chienmechant-howto__video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}
.chienmechant-howto__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:68px;
  height:68px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.chienmechant-howto__play::before{
  content:"";
  display:block;
  margin-left:5px;
  border-style:solid;
  border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent var(--cm-ink);
}

/* ===================================================================
   6. セット使用（比較）セクション
=================================================================== */
.chienmechant-combo{ background:var(--cm-brown); padding:58px 0 64px; }
.chienmechant-combo__lead{
  margin-top:20px!important;
  font-size:20px;
  line-height:1.9;
  letter-spacing:0.02em;
}
.chienmechant-combo__lead-accent{
  color:#f3c969;
}
.chienmechant-combo__lead-marker{
  background:linear-gradient(rgba(243,201,105,0.45) 60%);
  padding:0 2px;
}
.chienmechant-combo__grid{
  display:flex;
  gap:26px;
  margin:38px 0 42px;
}
.chienmechant-combo__card{
  flex:1 1 0;
  background:var(--cm-white);
  border-radius:14px;
  padding:30px 26px 34px;
  text-align:center;
  box-shadow:0 10px 30px rgba(60,45,20,0.08);
}
.chienmechant-combo__card img{
  margin:0 auto 22px;
  max-width:230px;
}
.chienmechant-combo__name{ color:var(--cm-ink); margin-bottom:4px; }
.chienmechant-combo__size{ margin-bottom:22px; }
.chienmechant-combo__cta{ margin:20px auto 0; }

.chienmechant-table__hint{
  display:none;
}
.chienmechant-table__wrap{
  overflow:hidden;
  border:1px solid var(--cm-brown-deep);
  background:var(--cm-white);
}
.chienmechant-table__scroll{ overflow-x:auto; }
.chienmechant-table{ table-layout:fixed; }
.chienmechant-table thead th{
  background:var(--cm-brown-deep);
  color:var(--cm-white);
  font-weight:700;
  text-align:center;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.18);
  white-space:nowrap;
}
.chienmechant-table tbody td{
  padding:20px 15px;
  border:1px solid #e7ddcd;
  vertical-align:top;
  color:var(--cm-ink);
  word-break:break-word;
}
.chienmechant-table__label{
  background:var(--cm-brown-pale);
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  width:16%;
}
.chienmechant-table th:nth-child(1),
.chienmechant-table td:nth-child(1),
.chienmechant-table th:nth-child(3),
.chienmechant-table td:nth-child(3){
  width:42%;
}

/* ===================================================================
   レスポンシブ：SP（〜767px）
=================================================================== */
@media (max-width:767px){

  .chienmechant{ font-size:var(--cm-fs-text-sp); }
  .chienmechant-br-sp{ display:block; }
  .chienmechant-br-pc{ display:none; }
  .chienmechant-combo__lead{ text-align:left; }

  .chienmechant-h2{ font-size:var(--cm-fs-h2-sp); }
  .chienmechant-h3{ font-size:var(--cm-fs-h3-sp); }
  .chienmechant-text{ font-size:var(--cm-fs-text-sp); }

  .chienmechant-container{
    width:var(--cm-container-sp);
    padding:0;
  }

  .chienmechant-btn{
    font-size:var(--cm-fs-text-sp);
    padding:15px 20px;
  }

  /* ---- MV ---- */
  .chienmechant-mv__inner{
    flex-wrap:wrap;
    gap:16px 4%;
    padding:42px 0 0 0;
  }
  .chienmechant-mv__body{
    order:-1;
    width:100%;
    max-width:none;
  }
  .chienmechant-mv__media{ width:45%; }
  .chienmechant-logo{ padding-bottom:1rem; }
    .chienmechant-logo__image{ width:65%;}
  .chienmechant-mv__title{ font-size:32px!important; margin-bottom:8px; }
  .chienmechant-mv__sub{ font-size:24px; }

  /* ---- サンプル ---- */
  .chienmechant-sample{ padding:24px 0 40px; }
  .chienmechant-sample__card{ border-radius:12px; }
  .chienmechant-sample__heading{ padding:16px 14px; }
  .chienmechant-sample__body{
    flex-direction:column;
    gap:20px;
    padding:26px 20px;
  }
  .chienmechant-sample__img{ flex:0 0 auto; width:58%; max-width:220px; margin:0 auto; }
  .chienmechant-sample__info{ flex:0 1 auto; width:100%; text-align:center; }
  .chienmechant-sample__info .chienmechant-text{ margin-bottom:18px; text-align:center; }
  .chienmechant-sample__info .chienmechant-btn{ margin:0 auto; }

  /* ---- ナビ ---- */
  .chienmechant-nav__inner{
    padding:12px 5%;
    gap:10px;
  }
  .chienmechant-nav__list{ gap:18px; }
  .chienmechant-nav__cta{ padding:9px 16px; font-size:0.85em; }

  /* ---- 特長 ---- */
  .chienmechant-feature{ padding:80px 0 44px; }
  .chienmechant-feature__list{ margin-top:24px; gap:16px; }
  .chienmechant-feature__card{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding:28px 22px;
    border-radius:12px;
  }
  .chienmechant-feature__lead{ flex-basis:auto; }
  .chienmechant-pill{ font-size:1rem;
      padding:6px 20px; margin-bottom:14px; }

  /* ---- ご使用方法 ---- */
  .chienmechant-howto{ padding:42px 0 46px; }
  .chienmechant-howto__video{ margin-top:22px; border-radius:8px; }
  .chienmechant-howto__play{ width:50px; height:50px; }
  .chienmechant-howto__play::before{ border-width:9px 0 9px 14px; margin-left:3px; }
　
  /* ---- セット使用 ---- */
  .chienmechant-combo{ padding:42px 0 46px; }
  .chienmechant-combo__grid{
    flex-direction:column;
    gap:18px;
    margin:24px 0 30px;
  }
  .chienmechant-combo__card{ padding:26px 20px 28px; }
  .chienmechant-combo__card img{ max-width:200px; }

  .chienmechant-table__hint{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin:0 0 8px;
    color:var(--cm-white);
    font-size:0.78em;
    letter-spacing:0.03em;
    opacity:0.85;
  }
  .chienmechant-table__hint-arrow{
    display:inline-block;
    animation:chienmechantTableHintMove 1.4s ease-in-out infinite;
  }
  .chienmechant-table__hint-arrow:first-child{ animation-direction:alternate-reverse; }
  @keyframes chienmechantTableHintMove{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(3px); }
  }

  .chienmechant-table thead th{ padding:12px 14px; font-size:var(--cm-fs-text-sp); }
  .chienmechant-table tbody td{ padding:14px 16px; font-size:var(--cm-fs-text-sp); }
  .chienmechant-table__scroll{ -webkit-overflow-scrolling:touch; }
  .chienmechant-table{ min-width:640px; }
}
@media (prefers-reduced-motion:reduce){
  .chienmechant-table__hint-arrow{ animation:none; }
}
.pc {
  display: block;
}
.sp{
    display: none;
}
@media (max-width: 768px) {
 .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* -----------------------------------------------------------
 ↑↑↑↑↑ CSSの追記はここまで ↑↑↑↑↑
----------------------------------------------------------- */



/* for IE7 only */

*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}