@charset "utf-8";
/*====================================================

Date: 2025-04-25
CSS Document ： フェリシモの「フラットブラ」商品詳細ページ

****************************************************/
#story-outer {
	font-size: 1.4rem;
	margin: 1.5em 0;
	color: #231815;
}
#story-outer img{
	max-width:100%;
}
#story-outer a{
	 transition: all 0.3s;
}
@media (hover: hover) {
#story-outer a:hover{
	 opacity:0.7;
}
}

/*------------------------------------

こんなお悩みありませんか？

------------------------------------*/
/* お悩みエリア */
.onayami_area {
    background: #f2f2f2;
    padding: 1.6em 0;
}
.onayami_area .brfore {}
ul.check_point {
    /* position: absolute; */
    padding: 0;
    margin: 0 auto;
    width: max-content;
    position: relative;
}
ul.check_point::after {display: block;width: 3.5em;/* height: 100%; */aspect-ratio: 1/1;content: '';background-image: url(../images/moyamoya.png);background-repeat: no-repeat;background-position: center;background-size:contain;position: absolute;top: -2.5em;right: -3em;}
ul.check_point h3 {
		font-size: 125%;
		display: inline-block;
		padding: .3em .5em .4em .2em;
		/* color: #fff; */
		border-radius: 3px;
		/* background: #a56aa8; */
}
ul.check_point h3 span.text_fl {
		line-height: 1.4;
		display: inline-block;
		vertical-align: text-top;
		letter-spacing: .1em;
}
ul.check_point h3 span.bold_fl {
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;}

ul.check_point h3::before {
		display: inline-block;
		width: 1.7em;
		height: 1.7em;
		margin: -.1em .6em 0 .3em;
		content: '';
		vertical-align: text-top;
		background: url(../images/icon_check.png) center;
		background-repeat: no-repeat;
		background-size: contain;
}
ul.check_point li {
		display: block;
}
ul.check_point li:nth-child(1) {
}
ul.check_point li:nth-child(2) {
}
.onayami_area .t03 {
		font-size: 235%;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: .6em auto 0;
		text-align: center;
		letter-spacing: .13em;
}

/* ビフォーアフター */

.lineup-ba {
		max-width: 620px;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0em auto 0;
		gap: 8%;
		position: relative;
}
.lineup-ba > div {
		width: 50%;
		position: relative;
	transform: translate3d(0, 0, 0) scale(1);
}
.lineup-ba > div .main {}
.lineup-ba > div .point {
		position: absolute;
		top: 20.0%;
		left: 5%;
		width: 29%;
	 clip-path: inset(0 0 0 0);
}
.lineup-ba .ba-before {}
.lineup-ba p {
		/* font-family: "こぶりなゴシック W3 JIS2004"; */
		}
.lineup-ba img {}
.lineup-ba .ba-after {}
.lineup-ba p {
		text-align: center;
		margin: 0.3em 0 0;
		font-size: 105%;
		letter-spacing: 0.08em;
}
.note_fl {
		text-align: center;
		font-size: 80%;
}
.lineup-ba .arrow {
		position: absolute;
		z-index: 2;
		width: 18%;
		top: 41%;
		left: 39%;

}

.lineup-ba > div .point {
	 animation: pointInfinite_ct 3.0s 1.8s infinite;
}
@keyframes pointInfinite_ct {
		0% {
				clip-path: inset(0 0 100% 0);
		}
		10% {
				clip-path: inset(0 0 100% 0);
		}
		60%,100% {
				clip-path: inset(0 0 0 0);
		}
}	



/* 解決エリア */
.kaiketsu_fl {}
.kaiketsu_fl .ttl_wrap {
		/* display: flex; */
		padding: 1.7em 0 1.3em;
		text-align: center;
		background: url(../images/kaiketsu_arrow.png) center top;
		background-repeat: no-repeat;
		background-size: contain;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
}
.kaiketsu_fl .ttl_fl {
		line-height: 1.4;
		margin-right: 18px;
		font-size: 100%;
}
.kaiketsu_fl .ttl_fl .t01 {
		font-size: 225%;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		letter-spacing: .14em;
}
.kaiketsu_fl .ttl_fl .t02 {
		font-size: 240%;
		font-weight: 700;
		letter-spacing: .1em;
		color: #d96e98;
}
.kaiketsu_area {
		position: relative;
		/* display: flex; */
		/* width: 790px; */
		margin: 0 auto;
		text-align: center;
		/* background: #fbf0f5; */
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
}
.kaiketsu_area p {
		font-size: 240%;
		/* margin-bottom: 0.4em; */
		/* margin-left: 50px; */
		margin: 0.3em 0 0.3em;
		color: #d96e98;
}
.kaiketsu_area p span {
		font-weight: 700;
		display: inline;
		letter-spacing: .12em;
		background: linear-gradient(transparent 65%, #fff580 0%);
}


/*-----------------------------------

商品ラインナップを見るボタン

-----------------------------------*/
.btn_link {
		width: 90%;
		max-width: 640px;
		margin: 2.5em auto 0;
}
.btn_link a {
		text-decoration: none;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		border-radius: 5em;
}
.btn_link .cam_icon {
		margin: 1.8em auto 0.7em;
		position: relative;
		z-index: 1;
}
.btn_link .btn_wrap {
		position: relative;
		display: flex;
		box-sizing: border-box;
		padding: 13px 0;
		text-align: center;
		border: 5px solid #ae79b1;
		background: #ae79b1;
		/* flex-wrap: wrap; */
		justify-content: center;
		align-items: center;
		border-radius: 5em;
		gap: 2em;
}
.btn_link .btn_wrap img {
		/* margin-right: 1em; */
		width: 3.8em;
}
.btn_link .btn_wrap::after {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		content: '';
		border: 1px solid #fff;
		border-radius: 5em;
}
.btn_link .btn_wrap span:not(.arrow) {
		font-size: 150%;
		/* margin: 0 13px; */
		letter-spacing: .12em;
		color: #fff;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 1.25;
}
.btn_link .arrow {
		position: relative;
		width: 2.5em;
		/* height: 45px; */
		aspect-ratio: 1/1;
		/* margin: 0 -40px 0 15px; */
		border-radius: 100%;
		background: #fff;
}
.btn_link .arrow::after {
		position: absolute;
		top: 34%;
		left: 30%;
		display: block;
		width: 33%;
		height: 33%;
		content: '';
		transform: rotate(45deg);
		border-top: 3px solid #ae79b1;
		border-right: 3px solid #ae79b1;
}
.btn_link.all_item {
		margin-bottom: 5em;
}
.btn_link.all_item span {
		font-size: 160%;
		line-height: 1.4;
}
.btn_link.all_item span:nth-child(1) {
		margin-left: 2em;
}
.btn_link.all_item .arrow::after {
		transform: rotate(45deg);
		top: 33%;
		left: 33%;
}

/* カテゴリ別リンク */
.category_list {
		width: 90%;
		max-width: 750px;
		margin: 2.0em auto 2em;
}
.category_list ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
.category_list ul li {
		width: 48%;
		margin: 0 0 1.3em;
}
.category_list ul li img {
		width: 100%;
		height: auto;
}

/* 回遊バナー */
.f_bnr {
		/* margin: 1em auto 4rem; */
		/* text-align: center; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
}
.f_bnr a {
		text-align: center;
		display: inline-block;
		margin-bottom: 1.8em;
}
.f_bnr a p {
		margin: 0.8rem auto 0rem;
		text-align: center;
		font-size: 1.0rem;
		color: #595757;
		line-height: 1.6;
		font-weight: normal;
		letter-spacing: 0.06em;
}

/****** SP ******/
@media (max-width: 768px) {
#story-outer {font-size: 3.5vw;}
#story-outer img{
}
/* お悩みエリア */
.onayami_area { }
.onayami_area .brfore { }
ul.check_point { }
ul.check_point::after { }
ul.check_point h3 { }
ul.check_point h3 span.text_fl { }
ul.check_point h3 span.bold_fl { }

ul.check_point h3::before { }
ul.check_point li { }
ul.check_point li:nth-child(1) { }
ul.check_point li:nth-child(2) { }
.onayami_area .t03 { }

/* ビフォーアフター */

.lineup-ba { }
.lineup-ba > div { }
.lineup-ba > div .main { }
.lineup-ba > div .point { }
.lineup-ba .ba-before { }
.lineup-ba p { }
.lineup-ba img { }
.lineup-ba .ba-after { }
.lineup-ba p { }
.note_fl { }
.lineup-ba .arrow { }

.lineup-ba > div .point { }

/* 解決エリア */
.kaiketsu_fl { }
.kaiketsu_fl .ttl_wrap { }
.kaiketsu_fl .ttl_fl { }
.kaiketsu_fl .ttl_fl .t01 { }
.kaiketsu_fl .ttl_fl .t02 { }
.kaiketsu_area { }
.kaiketsu_area p { }
.kaiketsu_area p span { }


/*-----------------------------------

商品ラインナップを見るボタン

-----------------------------------*/
.btn_link { }
.btn_link a { }
.btn_link .cam_icon { }
.btn_link .btn_wrap {gap: 1.4em;}
.btn_link .btn_wrap img { }
.btn_link .btn_wrap::after { }
.btn_link .btn_wrap span:not(.arrow) { }
.btn_link .arrow { }
.btn_link .arrow::after {border-width: 2px;}
.btn_link.all_item { }
.btn_link.all_item span { }
.btn_link.all_item span:nth-child(1) { }
.btn_link.all_item .arrow::after { }

/* カテゴリ別リンク */
.category_list { }
.category_list ul { }
.category_list ul li { }
.category_list ul li img { }

/* 回遊バナー */
.f_bnr {width: 90%;margin: 0 auto;}
.f_bnr a { }
.f_bnr a p { }

}