@charset "UTF-8";

/* ----------------------------------
 FITEMME LITE（フィッテムライト）
---------------------------------- */
/* Base */
#fitemme_lite {
	--TitleColor: #908379;
	--BoxBgColor: #F1F0ED;
}
#fitemme_lite {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  line-height: 2.125;
  color: #231815;
}
#fitemme_lite img { vertical-align: bottom;}

#fitemme_lite .for-pc { display: block;}
#fitemme_lite .for-sp { display: none;}

@media screen and (max-width: 767px) {
  #fitemme_lite { font-size: 13px; line-height: 1.8461538462;}
  #fitemme_lite .for-pc { display: none;}
	#fitemme_lite .for-sp { display: block;}
}

/* コンテンツフレーム */
#fitemme_lite .fitemme-section {
  padding-top: 30px;
  margin-bottom: 80px;
  border-top: var(--TitleColor) 2px solid;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-section {
    padding-inline: 20px;
    margin-bottom: 40px;
    overflow: hidden;
  }
}

/* H1 ビジュアル */
#fitemme_lite .main-ttl { width: 100%; padding: 0; margin: 0 0 40px; border: none; text-align: center;}
#fitemme_lite .main-ttl h1 { width: 100%; padding: 0; margin: 0; border: none;}
#fitemme_lite .main-ttl img { width: 100%;}

@media screen and (max-width: 767px) {
	#fitemme_lite .main-ttl { margin: 0 0 32px;}
}

/* H2 見出し */
#fitemme_lite .fitemme-ttl { width: 100%; margin: 0 0 40px; font-size: 20px; font-weight: 500; text-align: center; display: flex; flex-wrap: wrap; justify-content: center;}
#fitemme_lite .fitemme-ttl span.ttl { width: 100%; margin: 0 0 10px; font-size: 32px; font-weight: bold; color: var(--TitleColor); display: block;}
#fitemme_lite .fitemme-ttl span.ttl-sub { margin: auto; font-size: 20px; color: #000; display: flex; justify-content: center; align-items: center;}
#fitemme_lite .fitemme-ttl span.mark {
  height: 30px;
  padding-inline: 12px;
  margin-right: 15px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 400;
  color: #FFF;
  display: flex;
	align-items: center;
	justify-content: center;
  background: var(--TitleColor);
}

@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-ttl { padding: 0; margin-bottom: 20px; font-size: 15px; font-weight: 700; gap: 0; position: relative;}
  #fitemme_lite .fitemme-ttl span.ttl { font-size: 15px;}
  #fitemme_lite .fitemme-ttl span.ttl-sub { font-size: 15px;}
  #fitemme_lite .fitemme-ttl span.mark { padding-inline: 8px; white-space: pre;}
}

/* リード文 */
#fitemme_lite .fitemme-lead { margin-bottom: 60px; text-align: center;}

@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-lead { margin-bottom: 40px; padding-inline: 20px; text-align: left;}
}

/* REMOVABLE & WASHABLE
---------------------------------- */
/* チェック項目 */
#fitemme_lite .fitemme-newfeatures { text-align: center;}
#fitemme_lite .fitemme-newfeatures__list_frame {
  width: 100%;
  padding: 28px 0;
  margin: 0 auto 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--BoxBgColor);
}
#fitemme_lite .fitemme-newfeatures__list { text-align: left;}
#fitemme_lite .fitemme-newfeatures__list li { display: flex; align-items: center; gap: 5px;}
#fitemme_lite .fitemme-newfeatures__list li span { border-bottom: #C92F19 1px solid; font-size: 20px; font-weight: 500;}
#fitemme_lite .fitemme-newfeatures__list li:before {
  content: "";
  width: 20px;
  height: 25px;
  margin-right: 5px;
  background: url("/brand/fitemme_lite/img/ic_check.png") no-repeat center / 100% auto;
}
#fitemme_lite .fitemme-newfeatures__list li + li { margin-top: 5px;}

@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-newfeatures { text-align: left;}
	#fitemme_lite .fitemme-newfeatures__list_frame { margin-bottom: 30px;}
  #fitemme_lite .fitemme-newfeatures__list li { font-size: 12px; font-weight: 500;}
  #fitemme_lite .fitemme-newfeatures__list li span { padding-bottom: 3px; font-size: 15px;}
  #fitemme_lite .fitemme-newfeatures__list li:before { width: 12px; height: 15px; margin-right: 0;}
  #fitemme_lite .fitemme-newfeatures__list li sup { font-size: 0.8em;}
}

/* 商品詳細紹介 */
#fitemme_lite .fitemme-product-image { padding: 60px 60px 80px; background: #FFF; display: flex; gap: 60px; position: relative;}
#fitemme_lite .fitemme-product-image::before { 
	content: '';
	width: 100%;
	height: 62%;
	display: block;
	background: #F8F7F6;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
#fitemme_lite .fitemme-product-image-top { width: 500px; position: relative; z-index: 2;}
#fitemme_lite .fitemme-product-image-top::before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: #DDD4CE;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
}
#fitemme_lite .fitemme-product-image-top .hacobune-app-container { padding: 0;}
#fitemme_lite .fitemme-product-image-top .hacobune-unit-video-outline { padding: 0;}
#fitemme_lite .fitemme-product-image-top .hacobune-readmore { margin: 0; display: none;}
#fitemme_lite .fitemme-product-image-top .hacobune-univideo { position: relative; z-index: 2;}
#fitemme_lite .fitemme-product-image-top .hacobune-unit-video { padding: 0; margin: 0;}
#fitemme_lite .fitemme-product-image-bottom { width: calc(100% - 560px); display: flex; flex-direction: column; gap: 60px 0; position: relative; z-index: 2;}
#fitemme_lite .fitemme-product-image-bottom figure { position: relative;}
#fitemme_lite .fitemme-product-image-bottom figure::before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: #DDD4CE;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
}
#fitemme_lite .fitemme-product-image-bottom figure img { position: relative; z-index: 2;}
#fitemme_lite .fitemme-product-attention {
	padding: 30px 40px;
	margin: 0 0 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 40px;
	background: #F1F0ED;
	position: relative;
	z-index: 3;
}
#fitemme_lite .fitemme-product-attention-image { width: 150px;}
#fitemme_lite .fitemme-product-attention-list li { padding: 0 0 0 1em; font-size: 14px; text-align: left; text-indent: -1em; color: #908378; list-style: inside disc;}
#fitemme_lite .fitemme-product-attention-text { 
	height: 36px;
	padding: 0 15px;
	margin: 0;
	font-size: 13px;
	color: #908378;
	display: flex;
	align-items: center;
	background: #F1F0ED;
	position: absolute;
	top: -36px;
	right: 0;
}
#fitemme_lite .fitemme-product-attention-text::before {
	content: '';
	width: 18px;
	height: 18px;
	margin: 0 5px 0 0;
	display: inline-block;
	background: url("/brand/fitemme_lite/img/ic_attention.png") no-repeat center / 100% auto;
}

@media screen and (max-width: 767px) {
	#fitemme_lite .fitemme-product-image { padding: 0 30px 60px; display: block;}
	#fitemme_lite .fitemme-product-image-top { width: 90%; margin: 0 auto 30px;}
	#fitemme_lite .fitemme-product-image-top::before { top: 10px; left: 10px;}
	#fitemme_lite .fitemme-product-image-top .hacobune-app-container { width: 100%;}
	#fitemme_lite .fitemme-product-image-bottom { width: 100%; display: flex; flex-direction: row; gap: 0 30px; position: relative; z-index: 2;}
	#fitemme_lite .fitemme-product-image-bottom figure::before { top: 10px; left: 10px;}
	
	#fitemme_lite .fitemme-product-attention { padding: 20px; margin: 0 0 32px; display: block;}
	#fitemme_lite .fitemme-product-attention-image { width: 200px; margin: 0 auto 16px;}
	#fitemme_lite .fitemme-product-attention-list li { font-size: 12px;}
	#fitemme_lite .fitemme-product-attention-text { height: 32px; padding: 0 12px; font-size: 12px; top: -32px;}
	#fitemme_lite .fitemme-product-attention-text::before {
		width: 16px;
		height: 16px;
		background: url("/brand/fitemme_lite/img/ic_attention.png") no-repeat center / 100% auto;
	}
}

/* LIGHTWEIGHT
---------------------------------- */
#fitemme_lite .fitemme-lightweight { text-align: center;}
#fitemme_lite .fitemme-lightweight__img { width: 100%; max-width: 400px; margin-inline: auto; margin-bottom: 40px;}

/* FEATURE
---------------------------------- */
#fitemme_lite .fitemme-easeofuse { padding-inline: 12px; margin-inline: -12px; overflow: visible;}
#fitemme_lite .fitemme-easeofuse .slick-slide { width: 210px; margin-right: 10px;}
#fitemme_lite .fitemme-easeofuse .slick-arrow {
  width: 25px;
  height: 25px;
  border: none;
  font-size: 0;
  background: url("/brand/fitemme_lite/img/ic_arrow.png") no-repeat center / 100% auto;
  position: absolute;
  top: 100px;
  z-index: 5;
  cursor: pointer;
}
#fitemme_lite .fitemme-easeofuse .slick-arrow.slick-prev { transform: rotate(180deg);}
#fitemme_lite .fitemme-easeofuse { left: 0;}
#fitemme_lite .fitemme-easeofuse .slick-next { right: 0;}
#fitemme_lite .fitemme-easeofuse__img { margin-bottom: 10px;}
#fitemme_lite .fitemme-easeofuse__desc dt { font-weight: 700;}
#fitemme_lite .fitemme-easeofuse__desc dd { font-size: 14px; line-height: 1.5714285714;}
#fitemme_lite .fitemme-easeofuse__desc dd .kome { font-size: 12px; vertical-align: top;}
#fitemme_lite .fitemme-easeofuse__desc dd .kome-text { padding: 0 0 0 1em; margin-top: 10px; font-size: 12px; text-indent: -1em; color: #666;}

@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-easeofuse { padding-left: 37px; padding-right: 0; margin-inline: -37px;}
  #fitemme_lite .fitemme-easeofuse .slick-slide { width: 145px; margin-right: 12px;}
  #fitemme_lite .fitemme-easeofuse .slick-arrow { top: 100px;}
  #fitemme_lite .fitemme-easeofuse .slick-prev  { left: 7px;}
  #fitemme_lite .fitemme-easeofuse .slick-next  { right: 7px;}
  #fitemme_lite .fitemme-easeofuse__img { margin-bottom: 5px;}
  #fitemme_lite .fitemme-easeofuse__desc dt { font-size: 14px;}
  #fitemme_lite .fitemme-easeofuse__desc dd { font-size: 13px; line-height: 1.5384615385;}
	#fitemme_lite .fitemme-easeofuse__desc dd .kome { font-size: 9px;}
	#fitemme_lite .fitemme-easeofuse__desc dd .kome-text { font-size: 10px;}
}

/* LINE UP
---------------------------------- */
/* サイズ */
#fitemme_lite .fitemme-size { margin-bottom: 60px; display: flex; flex-wrap: wrap; gap: 20px;}
#fitemme_lite .fitemme-size__item {
  width: calc((100% - 20px) / 2);
  padding: 8px 24px;
  display: flex;
	align-items: center;
  gap: 3.8265306122%;
  background: var(--BoxBgColor);
  position: relative;
}
#fitemme_lite .fitemme-size__img { width: 44.6428571429%; z-index: 1;}
#fitemme_lite .fitemme-size__desc { width: 51.5306122449%; line-height: 1.5;}
#fitemme_lite .fitemme-size__desc dt { margin-bottom: 5px; font-weight: 700;}
#fitemme_lite .fitemme-size__ic {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #FFF;
  display: flex;
	align-items: center;
	justify-content: center;
  position: absolute;
  bottom: 50px;
  left: 155px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2857142857;
  text-align: center;
}
#fitemme_lite .fitemme-size__desc ul { font-size: 14px;}
#fitemme_lite .fitemme-size__item_link { width: calc((100% - 20px) / 2);}
#fitemme_lite .fitemme-size__item_link a {
	width: 100%;
	padding: 8px 24px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10%;
	background: var(--BoxBgColor);
	position: relative;
}

@media screen and (max-width: 767px) {
	#fitemme_lite .fitemme-size { margin-bottom: 30px; gap: 10px;}
	#fitemme_lite .fitemme-size__item { width: calc((100% - 10px) / 2); padding: 12px; display: block;}
	#fitemme_lite .fitemme-size__img  { width: 75%; margin-inline: auto;}
	#fitemme_lite .fitemme-size__desc { width: 100%; line-height: 1.6363636364;}
	#fitemme_lite .fitemme-size__desc dt { margin-bottom: 0;}
	#fitemme_lite .fitemme-size__desc ul { font-size: 10px;}
	#fitemme_lite .fitemme-size__ic { width: 40px; height: 40px; font-size: 10px; line-height: 1.2; top: 5px; right: 5px; left: inherit;}
	#fitemme_lite .fitemme-size__item_link { width: calc((100% - 10px) / 2); display: flex;}
	#fitemme_lite .fitemme-size__item_link a { padding: 12px; display: block;}
}

/* タイプ */
#fitemme_lite .fitemme-type { margin-bottom: 40px; display: flex; gap: 40px;}
#fitemme_lite .fitemme-type__item { width: calc((100% - 40px) / 2);}
#fitemme_lite .fitemme-type__img { margin-bottom: 10px;}
#fitemme_lite .fitemme-type__label {
  width: 100%;
  height: 35px;
  font-size: 18px;
  font-weight: 700;
	color: #FFF;
  display: flex;
	align-items: center;
	justify-content: center;
  background: #DDD4CE;
}

@media screen and (max-width: 767px) {
	#fitemme_lite .fitemme-type { margin-bottom: 30px; flex-direction: column; gap: 30px;}
  #fitemme_lite .fitemme-type__item  { width: 100%;}
  #fitemme_lite .fitemme-type__label { height: 27px; font-size: 15px;}
}

/* カラー */
#fitemme_lite .fitemme-colors { display: flex; justify-content: center; gap: 30px;}
#fitemme_lite .fitemme-colors li { font-weight: 500; display: flex; align-items: center; gap: 15px;}
#fitemme_lite .fitemme-colors li:before { content: ""; width: 40px; height: 40px; border-radius: 50%;}
#fitemme_lite .fitemme-colors li._black:before { background: #1A1311;}
#fitemme_lite .fitemme-colors li._navy:before  { background: #324c7d;}
#fitemme_lite .fitemme-colors li._beige:before { background: #C2A797;}
#fitemme_lite .fitemme-colors li._charcoal:before { background: #625445;}
#fitemme_lite .fitemme-colors li._darkgray:before { background: #4D5665;}

@media screen and (max-width: 767px) {
  #fitemme_lite .fitemme-colors {
    gap: 0;
    -ms-flex-pack: distribute;
		justify-content: space-around;
  }
  #fitemme_lite .fitemme-colors li { font-size: 10px; gap: 5px;}
  #fitemme_lite .fitemme-colors li:before { width: 23px; height: 23px;}
}
