/* ============================================================
   チェック生地特集 2026-2027 AW　【SP用】640px以下
   ・すべて #chk-lp 配下に限定（サイト側CSSと干渉しない）
   ・CSSカスタムプロパティ（var）は不使用・直値のみ
   ・共通部分を直すときは pc / sp 両方のファイルを修正すること
   ============================================================ */
#chk-lp,#chk-lp *,#chk-lp *::before,#chk-lp *::after{box-sizing:border-box;}
#chk-lp{max-width:850px;margin:0 auto;background:#fff;color:#2b2b2b;font-size:14px;line-height:1.9;letter-spacing:.03em;}
#chk-lp img{display:block;width:100%;height:100%;object-fit:cover;}
#chk-lp a{color:inherit;text-decoration:none;}
#chk-lp h1,#chk-lp h2,#chk-lp h3,#chk-lp p{margin:0;}
#chk-lp .serif{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif!important;font-weight:500!important;}

/* 画像枠（写真未設定時はグレー） */
#chk-lp .img{background:#ececec;overflow:hidden;}

/* セクション共通 */
#chk-lp .sec{padding:64px 20px;}
#chk-lp .sec-head{text-align:center;margin-bottom:44px;}
#chk-lp .sec-en{font-size:13px;letter-spacing:.22em;color:#9a9a9a;margin-bottom:10px;}
#chk-lp .sec-ttl{font-size:20px;letter-spacing:.08em;line-height:1.8;}
#chk-lp .sec-lead{max-width:34em;margin:24px auto 0;color:#5a5a5a;font-size:14px;line-height:2.1;}

/* 商品テキスト */
#chk-lp .code{display:block;font-size:13px;color:#9a9a9a;letter-spacing:.06em;margin-top:12px;}
#chk-lp .name{display:block;font-size:14px;line-height:1.7;}
#chk-lp .badge{display:inline-block;font-size:10px;letter-spacing:.12em;border:1px solid #2b2b2b;padding:0 7px;line-height:1.8;margin-top:12px;}
#chk-lp .badge + .code{margin-top:6px;}
#chk-lp a:focus-visible{outline:2px solid #2b2b2b;outline-offset:4px;}

/* ===== HERO ===== */
#chk-lp .hero-img{aspect-ratio:8/9;}
#chk-lp .hero-txt{text-align:center;padding:44px 20px 8px;}
#chk-lp .hero-en{font-size:13px;letter-spacing:.22em;color:#9a9a9a;margin-bottom:16px;}
#chk-lp .hero-ttl{font-size:24px;letter-spacing:.10em;line-height:1.5;margin-bottom:24px;}
#chk-lp .hero-lead{max-width:28em;margin:0 auto;line-height:2.3;}

/* ===== 01 NEW（2列・4枠目はCOMING SOON） ===== */
#chk-lp .new-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 14px;}
#chk-lp .new-card .img{aspect-ratio:4/5;}
#chk-lp .new-copy{font-size:13px;color:#6a6a6a;margin-top:6px;line-height:1.8;}
#chk-lp .new-card.is-soon .img{display:flex;align-items:center;justify-content:center;background:#f4f4f4;}
#chk-lp .soon-en{font-size:20px;letter-spacing:.2em;}

/* ===== 02 TEXTURE ===== */
#chk-lp .tex-block + .tex-block{margin-top:64px;}
#chk-lp .tex-band{aspect-ratio:2/1;margin-bottom:0;}
#chk-lp .tex-head{position:relative;padding:70px 0 50px;text-align:center;}
#chk-lp .tex-head::before{content:"";position:absolute;top:10%;left:50%;width:1px;height:36px;background:#2b2b2b;}
#chk-lp .tex-name{font-size:22px;letter-spacing:.1em;margin-bottom:6px;}
#chk-lp .tex-desc{font-size:14px;color:#6a6a6a;}
#chk-lp .tex-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;}
#chk-lp .tex-item{width:calc((100% - 14px) / 2);}
#chk-lp .tex-item .img{aspect-ratio:1;}

/* ===== 03 CAROUSEL：1枚を中央に、左右を見切れさせる（矢印なし） ===== */
#chk-lp .car-wrap{position:relative;}
#chk-lp .car{position:relative;display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;z-index:1;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;user-select:none;-webkit-user-select:none;scrollbar-width:thin;scrollbar-color:#cfcfcf transparent;}
#chk-lp .car::before{content:"";flex:0 0 calc(15% - 12px);}
#chk-lp .car.dragging{scroll-snap-type:none;}
#chk-lp .car-card{flex:0 0 70%;scroll-snap-align:center;}
#chk-lp .car-card .img{aspect-ratio:1;}
#chk-lp .car-card .code{margin-top:10px;}
#chk-lp .car-btn{display:none;}

/* ===== 04 MORE ===== */
#chk-lp .chk-more{text-align:center;background:#f6f6f6;}
#chk-lp .chk-more .sec-head{margin-bottom:20px;}
#chk-lp .more-txt{max-width:30em;margin:0 auto 32px;color:#5a5a5a;}
#chk-lp .btn{display:block;border:1px solid #2b2b2b;padding:15px 20px;font-size:13px;letter-spacing:.12em;}

/* ===== ページ末尾のリンク（ページの先頭へ／トップページへ） ===== */
#chk-lp .btn_flex {
	margin: 50px auto 80px;
	display: flex;
	justify-content: space-around;
}
#chk-lp .btn_line {
	display: flex;
	justify-content: flex-end;
}
#chk-lp .btn_line a {
	padding: 0 20px 0 25px;
	border-bottom: 1px solid #000;
	font-family: 'Quasimoda', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
	background: url("https://www.kijinomori.com/design/img/common/ico/arrow_right-short.png") no-repeat 0 50%;
	background-size: 15px;
}

/* ===== フェード表示（.chk-fade を付けた要素だけが対象・下から上へ） ===== */
#chk-lp.chk-js-fade .chk-fade{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;}
#chk-lp.chk-js-fade .chk-fade.chk-show{opacity:1;transform:none;}

/* ===== 動きを減らす設定の端末 ===== */
@media (prefers-reduced-motion:reduce){
  #chk-lp.chk-js-fade .chk-fade{opacity:1;transform:none;transition:none;}
  #chk-lp a .img img{transition:none;}
}
