@charset "UTF-8";
/* CSS Document */


/* clearfix */
.clearfix:after {
	content: " ";
	font-size: 0.1em;
	line-height: 0;
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {	display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {
	display: block;
}



/*----- 楽すべルームウェア特集 -------------------------*/

#rakusube_roomwear .title {
	margin-bottom: 40px;
}
#rakusube_roomwear .midashi {
	margin-top: 20px;
	font-size: 1.5rem;
	text-align: center;
	line-height: 200%;
}




/*----- 困り事 -------------------------*/
.trouble {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 各要素の間隔を調整したい場合 */
}


#rakusube_roomwear .trouble h2 {
	font-size: 1.7rem;
	font-weight: bold;
	color: #31639d;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
}

#rakusube_roomwear .trouble .txt {
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    font-size: 1.5rem;
    line-height: 1.6em;
}

#rakusube_roomwear h2 {
	font-size: 1.7rem;
	font-weight: bold;
	color: #eb6d6d;
	border-bottom: 1px solid #000;
	margin-bottom: 30px;
}



/*----- 吹き出し -------------------------*/
.speechBubble {
  position: relative;
  display: inline-block; /* 吹き出しをテキスト量に応じた幅にする */
  margin-left: 16px;
  padding: 7px;
  border: 2px solid #000000;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  white-space: normal; /* テキストが折り返されるようにする */
  width: auto; /* 横幅をコンテンツ量に合わせる */
  max-width: 70%; /* 吹き出しの幅を画面幅いっぱいにならないように制限（任意） */
}

.speechBubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
  transform: skew(0, -10deg);
  transform-origin: right;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 0 11.2px 11.2px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% calc(-50% - 0.4px);
  transform: skew(0, -10deg);
  transform-origin: right;
}


/*----- 吹き出し2 -------------------------*/



.speechBubble2 {
  position: relative;
  display: inline-block; /* 吹き出しをテキスト量に応じた幅にする */
  margin-left: 200px;
  padding: 7px;
  border: 2px solid #000000;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  white-space: normal; /* テキストが折り返されるようにする */
  width: auto; /* 横幅をコンテンツ量に合わせる */
  max-width: 70%; /* 吹き出しの幅を画面幅いっぱいにならないように制限（任意） */
}

.speechBubble2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent transparent #000000;
  translate: 100% -50%;
  transform: skew(0, -10deg);
  transform-origin: left;
}

.speechBubble2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 0 0 11.2px 11.2px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% calc(-50% - 0.4px);
  transform: skew(0, -10deg);
  transform-origin: left;
}

/*----- 画像付き吹き出し -------------------------*/

.imageBubbleContainer {
  display: flex;
  align-items: flex-start; /* 画像と吹き出しを上端で揃える */
  margin-bottom: 20px; /* 各ブロックの間にスペースを作る（任意） */
  gap: 10px;
}
.imageBubbleImage {
  width: 70px; /* 画像の幅（任意で変更可） */
  height: 70px; /* 画像の高さ（任意で変更可） */
  object-fit: cover; /* 画像の比率を保ちながら収める */
}



.imageBubbleContainer2 {
  display: block; /* コンテナ内全体はブロック表示 */
  text-align: right; /* 全体を右寄せする */
  align-items: flex-start; /* 子要素の上端を揃える */
  gap: 10px; /* 吹き出しと画像間の空白を設置 */
  margin-bottom: 20px; /* コンテナ下単位ごとに適切な空白 */
  width: 100%; /* 全体幅を画面に適合 */
  box-sizing: border-box; /* 幅計算にパディングとボーダーを含める */
}



/* 右側画像のスタイル */
.imageBubbleImage2 {
  width: 70px; /* 画像の幅（任意で調整可） */
  height: 70px; /* 画像の高さ（任意で調整可） */
  object-fit: cover; /* 比率を保ちながら収める */
  display: inline-block; /* 画像をブロック内に保持 */
}


/*----- 着用コメント -------------------------*/


#rakusube_roomwear .voice .txt {
    margin-top: 0em;
    margin-bottom: 2em;
    font-size: 1.5rem;
    line-height: 1.6em;
}


#rakusube_roomwear .voice .pickup .emphasis {
  background: linear-gradient(transparent 50%, #f4cadd 50%);
}




#rakusube_roomwear .point {
  background: #fcf2f7;
  padding: 15px;
  margin-bottom: 20px;
}


#rakusube_roomwear .point h2 {
	font-size: 1.7rem;
	font-weight: bold;
	color: #eb6d6d;
	border-bottom: 1px solid #000;
	margin-bottom: 30px;
}




#rakusube_roomwear .point2 h2 {
    font-size: 2rem;
    line-height: 1.6em;
    color:#f05656;
    font-weight: bold;
}

#rakusube_roomwear .point2 .img {
    margin-top: 0em;
    margin-bottom: 0em;
}

#rakusube_roomwear .point2 .txt {
    margin-top: 0em;
    margin-bottom: 2em;
    font-size: 1.5rem;
    line-height: 1.6em;
}


#rakusube_roomwear .lead p {
    padding: 0.2em 0.5em;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 1.7rem;
    line-height: 1.6em;
    text-align: center;
}

#rakusube_roomwear .lead {
  background: #fcf2f7;
  box-shadow: 0px 0px 0px 5px #fcf2f7;
  border: dashed 1px #fc8898;
  padding: 0.5em 0.5em;
  color: #454545;
  margin-bottom: 5rem
}

#rakusube_roomwear .item_lead {
  position: relative;
  color: #f05656;
  font-size: 2rem;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
#rakusube_roomwear .item_lead:before {
  content: "";
  position: absolute;
  top: -20px;
  width: 240px;
  height: 93px;
  border-radius: 50%;
  border: 5px solid #f05656;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#rakusube_roomwear .item_lead .emphasis {
  font-weight: bold;
}

#rakusube_roomwear .more p {
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.6em;
    text-align: left;
}







#rakusube_roomwear .pickup dl {
	display: inline-block;
	vertical-align: top;
	width: 415px;
	letter-spacing: -0.4em;
	margin-bottom: 40px;
}
#rakusube_roomwear .pickup dt {
	display: table-cell;
	vertical-align: top;
}
#rakusube_roomwear .pickup dd {
	display: table-cell;
	vertical-align: top;
	letter-spacing: normal;
	padding-left: 20px;
}


#rakusube_roomwear .item {
	clear: both;
	padding-top: 30px;
	padding-bottom: 50px;
	width: 415px;
	display: inline-block;
	vertical-align: top;
}
#rakusube_roomwear h3 {
	font-size: 1.6rem;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: left bottom;
	display: block;
	vertical-align: middle;
	padding: 0 0 10px 0;
}
#rakusube_roomwear h3.bg1 {
	background-image: url(../../img/usr/cfa_kaiteki_shorts/line.png);
}
#rakusube_roomwear h3.bg2 {
	background-image: url(../../img/usr/cfa_kaiteki_shorts/line2.png);
}
#rakusube_roomwear h3 a {
	text-decoration: none;
	color: #434343;
}
#rakusube_roomwear h3 a:hover {
	text-decoration: underline;
}
#rakusube_roomwear .image {
	padding: 20px 0;
}
#rakusube_roomwear .item_data {}
#rakusube_roomwear .item_data .text {
	margin-top: 5px;
	margin-bottom: 5px;
}
#rakusube_roomwear .item_data p {
	font-size: 1.4rem;
}

#rakusube_roomwear .item_data .price {
	margin-top: 5px;
}
#rakusube_roomwear .item_data .price a {
	text-decoration: none;
	color: #1d4d8c;
}
#rakusube_roomwear .item_data .price a :hover {
	text-decoration: underline;
}


#rakusube_roomwear .item_data dl {
	margin-top: 20px;
}
#rakusube_roomwear .item_data dt {
	display: table-cell;
	vertical-align: top;
	padding-bottom: 7px;
	text-align: center;
	padding-right: 20px;
}
#rakusube_roomwear .item_data dd {
	display: table-cell;
	vertical-align: top;
}


#rakusube_roomwear .style11 {
	font-size: 1.7rem;
	font-weight: bold;
	color: #eb6d6d	;
}
#rakusube_roomwear .style12 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #eb6d6d ;
}


.fL {float: left;}
.fR {float: right;}
.clear {clear: both;}

.fs16 {
	font-size: 1.5rem;
	line-height: 200%;
}
.w-auto {width: auto !important;}

.mt20 {margin-top: 20px;}
.mt40 {margin-top: 40px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.pr40 {padding-right: 30px;}
.pb20 {padding-bottom: 20px;}
.mr20 {margin-right: 20px;}
.mr {margin-right: 35px;}