@charset "UTF-8";
/*------------------------------------------------
	BTOS > LP > BTOSとは
------------------------------------------------*/
/*------------------------------------------------
	BTOS > LP > BTOSとは
------------------------------------------------*/
/* [2025-10] デバイスサイズ (PC, Tablet, SP) による表示切替 抜粋 */
@media only screen and (min-width: 544px) and (max-width: 768px) {
	.on-not-mini-sp {
		display: none !important;
	}
}

/* メインコンテンツ内のコンテンツ部分 */
#custom .p-feature {
	margin: 0;
	padding: 0;
}

/* LPのときの共通部分の表示 */
#custom .page[data-querystring="cid=feature"] .m-box-offcial {
	display: none;
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > ヘッダー
------------------------------------------------*/
#custom .p-feature-header {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 315px;
	background: #000 url("../../../images/asset/lp/feature/bg-feature-header.jpg") no-repeat center;
	background-size: cover;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-header {
		min-height: 200px;
		background-image: url("../../../images/asset/lp/feature/bg-feature-header-sp.jpg");
	}
}

#custom .p-feature-header h1 {
	font-size: 1.563rem;
	line-height: 1.6;
	font-weight: bold;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-header h1 {
		font-size: 1.375rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-toc ul::after {
		content: "";
		display: block;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > お困りごと
------------------------------------------------*/
#custom .p-feature-troubled {
	overflow: hidden;
	padding: 80px 0 58px;
	background: #F5F5F5;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled {
		padding: 40px 0 24px;
	}
}

#custom .p-feature-troubled h2 {
	margin-bottom: 4rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled h2 {
		margin-bottom: 1.5rem;
	}
}

#custom .p-feature-troubled-list {
	position: relative;
	margin: 0 auto 50px;
	max-width: 100%;
	width: 712px;
	background: #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-troubled-list {
		width: 80%;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list {
		margin-bottom: 120px;
	}
}

@media only screen and (max-width: 543px) {
	#custom .p-feature-troubled-list {
		width: auto;
	}
}

#custom .p-feature-troubled-list ul {
	position: relative;
	padding: 46px 112px;
	border: 1px solid #fff;
	background: #fff;
	font-size: 1.25rem;
	font-weight: bold;
}

@media (max-width: 1024px) {
	#custom .p-feature-troubled-list ul {
		display: table;
		margin: 0 auto;
		padding: 32px 84px;
		font-size: 1.063rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list ul {
		padding: 24px 10px 30px 25px;
		font-size: 0.875rem;
	}
}

#custom .p-feature-troubled-list li {
	position: relative;
	padding-left: 2.65em;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list li {
		padding-left: 2.25rem;
	}
}

#custom .p-feature-troubled-list li + li {
	margin-top: 1.5em;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list li + li {
		margin-top: 1.25rem;
	}
}

#custom .p-feature-troubled-list li::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	vertical-align: middle;
	background: url("../../../images/asset/common/ico/ico-check-circle.svg") no-repeat center;
	background-size: contain;
	width: 1.45em;
	height: 1.45em;
	margin-top: -0.725em;
	top: 1px;
	left: 0;
	margin-top: 0 !important;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list li::before {
		width: 1.5rem;
		height: 1.5rem;
		margin-top: -0.75rem;
	}
}

#custom .p-feature-troubled-list em {
	color: #f00;
}

#custom .p-feature-troubled-list ul::after {
	content: "";
	display: block;
	box-sizing: content-box;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -27px;
	border: 27px solid transparent;
	border-bottom-width: 0 !important;
	border-top-color: #fff;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list ul::after {
		margin-left: -20px;
		border-width: 20px;
	}
}

#custom .p-feature-troubled-list::before, #custom .p-feature-troubled-list::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	vertical-align: middle;
	background: none no-repeat center;
	background-size: contain;
	width: 159px;
	height: 214px;
	margin-top: -107px;
	z-index: 2;
	top: auto;
	bottom: -25px;
}

@media (max-width: 1024px) {
	#custom .p-feature-troubled-list::before, #custom .p-feature-troubled-list::after {
		width: 132px;
		height: 167px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list::before, #custom .p-feature-troubled-list::after {
		width: 105px;
		height: 120px;
		bottom: -95px;
	}
}

#custom .p-feature-troubled-list::before {
	background-image: url("../../../images/asset/lp/feature/troubled/pic-troubled-man.png");
	left: -66px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list::before {
		left: -8px;
	}
}

#custom .p-feature-troubled-list::after {
	background-image: url("../../../images/asset/lp/feature/troubled/pic-troubled-woman.png");
	width: 138px;
	height: 190px;
	right: -67px;
}

@media (max-width: 1024px) {
	#custom .p-feature-troubled-list::after {
		width: 121.5px;
		height: 155px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-list::after {
		width: 105px;
		height: 120px;
		right: -15px;
	}
}

#custom .p-feature-troubled-answer {
	max-width: 100%;
	width: 36em;
	margin: 100px auto 0;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-answer {
		width: auto;
	}
}

#custom .p-feature-troubled-answer strong {
	font-size: 1.563rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-troubled-answer strong {
		font-size: 1.313rem;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > 選ばれる理由
------------------------------------------------*/
#custom .p-feature-reason > header {
	position: relative;
	padding: 153px 0 103px;
	background: #f00 url("../../../images/asset/lp/feature/reason/bg-reason.png") no-repeat left top;
	background-size: contain;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason > header {
		padding: 106px 0 90px;
		background-image: url("../../../images/asset/lp/feature/reason/bg-reason-sp.png");
		background-size: cover;
	}
}

#custom .p-feature-reason > header::before {
	content: "";
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: -0.5px;
	left: 0;
	right: 0;
	width: 100%;
	height: 74px;
	background: #F5F5F5;
	-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
	        clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (max-width: 1024px) {
	#custom .p-feature-reason > header::before {
		height: 56px;
	}
}

#custom .p-feature-reason h2 {
	margin-bottom: 3rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason h2 {
		margin-bottom: 2.5rem;
		font-size: 1.563rem;
	}
}

#custom .p-feature-reason h2 small {
	display: block;
	font-size: 1.063rem;
	margin-bottom: 1em;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason h2 small {
		font-size: 1rem;
	}
}

#custom .p-feature-reason-toc {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason-toc {
		justify-content: center;
		flex-wrap: wrap;
		gap: 32px;
		padding: 0 16px;
	}
}

@media only screen and (max-width: 543px) {
	#custom .p-feature-reason-toc {
		display: block;
		padding: 0;
	}
}

#custom .p-feature-reason-toc > .m-linkbox {
	flex: 1;
	display: block;
	padding: 0;
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason-toc > .m-linkbox {
		flex: 0 0 calc(50% - 16px);
	}
}

@media only screen and (max-width: 543px) {
	#custom .p-feature-reason-toc > .m-linkbox {
		flex: 1;
		margin-top: 32px;
	}
}

#custom .p-feature-reason-toc dl {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	position: relative;
	padding: 40px 15px 84px;
	border-radius: 3px;
	border: 1px solid #fff;
	background: #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason-toc dl {
		padding: 36px 15px 62px;
	}
}

#custom .p-feature-reason-toc a:hover dl {
	background-color: #F5F5F5;
}

#custom .p-feature-reason-toc dt {
	order: -1;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	font-weight: bold;
}

@media (max-width: 1024px) and (min-width: 544px) {
	#custom .p-feature-reason-toc dt {
		font-size: 1.125rem;
	}
}

#custom .p-feature-reason-toc dt small {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.8em;
	font-weight: bold;
}

#custom .p-feature-reason-toc dd {
	font-size: 0.875rem;
}

#custom .p-feature-reason-toc dl::before {
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: none no-repeat center;
	background-size: contain;
	width: 78px;
	height: 68px;
	top: 0;
	margin-bottom: 1rem;
}

#custom .p-feature-reason-toc-net dl::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-net.svg");
}

#custom .p-feature-reason-toc-store dl::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-store.svg");
}

#custom .p-feature-reason-toc-care dl::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-care.svg");
}

#custom .p-feature-reason-toc.with-svg > .m-linkbox dl::before {
	content: none;
	background-image: none;
}

#custom .p-feature-reason-toc.with-svg > .m-linkbox .svg {
	order: -1;
	width: 108px;
	height: 68px;
	margin: 0 auto 1rem;
	padding: 0;
}

#custom .p-feature-reason-toc.with-svg > .m-linkbox .svg svg {
	width: auto;
	height: 100%;
}

#custom .p-feature-reason-toc.with-svg > .m-linkbox:hover svg .svg-stroke {
	animation: svg-stroke-300 1.5s linear infinite;
}

#custom .p-feature-reason-toc dl::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	vertical-align: middle;
	background: url("../../../images/asset/common/ico/ico-arrow-bottom.svg") no-repeat center;
	background-size: contain;
	width: 24px;
	height: 15px;
	margin-top: -7.5px;
	top: auto;
	bottom: 46px;
	left: 50%;
	margin-left: -12px;
	transition: bottom 0.2s ease-out;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason-toc dl::after {
		bottom: 36px;
	}
}

#custom .p-feature-reason-toc dl:hover::after {
	bottom: 42px;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason-toc dl:hover::after {
		bottom: 30px;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > 選ばれる理由 > article
------------------------------------------------*/
#custom .p-feature-reason__article {
	padding: 0 0 100px;
	border-bottom: 1px solid #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__article {
		padding-bottom: 80px;
	}
}

#custom .p-feature-reason__article::before {
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: none no-repeat center;
	background-size: contain;
	width: 100%;
	height: 460px;
	top: 0;
	margin-bottom: 72px;
	background-position: center top;
	background-size: cover;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__article::before {
		height: 320px;
		margin-bottom: 40px;
	}
}

#custom .p-feature-reason-net::before {
	background-image: url("../../../images/asset/lp/feature/reason/bg-reason-net.jpg");
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason-net::before {
		background-image: url("../../../images/asset/lp/feature/reason/bg-reason-net-sp.jpg");
	}
}

#custom .p-feature-reason-store::before {
	background-image: url("../../../images/asset/lp/feature/reason/bg-reason-store.jpg");
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason-store::before {
		background-image: url("../../../images/asset/lp/feature/reason/bg-reason-store-sp.jpg");
	}
}

#custom .p-feature-reason-care::before {
	background-image: url("../../../images/asset/lp/feature/reason/bg-reason-care.jpg");
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason-care::before {
		background-image: url("../../../images/asset/lp/feature/reason/bg-reason-care-sp.jpg");
	}
}

#custom .p-feature-reason__article header {
	position: relative;
	margin-bottom: 1rem;
}

#custom .p-feature-reason__article header h3 {
	position: absolute;
	left: 0;
	width: 25%;
	padding-right: 24px;
	font-size: 1.125rem;
	color: #f00;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__article header h3 {
		position: static;
		width: auto;
		padding-right: 0;
		margin-bottom: 1.25rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__article header h3 {
		font-size: 1rem;
	}
}

#custom .p-feature-reason__article header strong {
	font-size: 1.75rem;
	letter-spacing: 0.02em;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__article header strong {
		font-size: 1.563rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__article header strong {
		font-size: 1.313rem;
		letter-spacing: 0;
	}
}

#custom .p-feature-reason__article .wrapper {
	padding-left: 25%;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__article .wrapper {
		padding-left: 0;
	}
}

#custom .p-feature-reason__article .navi.m-btnArea-grid .btn {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#custom .p-feature-reason__points {
	margin-top: 35px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__points {
		margin-top: 30px;
	}
}

#custom .p-feature-reason__points h4 {
	position: relative;
	margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__points h4 {
		margin-bottom: 25px;
	}
}

#custom .p-feature-reason__points h4::before, #custom .p-feature-reason__points h4::after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	width: calc(50% - 9% - 9.4em);
	height: 0;
	border-top: 1px solid #CCC;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason__points h4::before, #custom .p-feature-reason__points h4::after {
		width: calc(50% - 12px - 9.4em);
	}
}

#custom .p-feature-reason__points h4::after {
	left: auto;
	right: 0;
}

#custom .p-feature-reason__points .grid {
	display: flex;
	gap: 30px;
}

@media only screen and (max-width: 543px) {
	#custom .p-feature-reason__points .grid {
		gap: 15px;
	}
}

#custom .p-feature-reason__points .grid > li {
	flex: 1;
}

#custom .p-feature-reason__points .note {
	max-width: 14.5em;
	margin: 0.75rem auto 0;
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__points .note {
		max-width: none;
	}
}

#custom .p-feature-reason__point {
	position: relative;
	min-height: 50px;
	text-align: left;
	font-weight: bold;
	font-size: 0.938rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__point {
		text-align: center;
		font-size: 0.813rem;
	}
}

#custom .p-feature-reason__point .text {
	display: block;
	max-width: 10rem;
	margin-left: 83px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__point .text {
		max-width: 10em;
		margin: 0 auto;
	}
}

#custom .p-feature-reason__point .text small {
	font-size: 0.934em;
}

#custom .p-feature-reason__point .svg, #custom .p-feature-reason__point::before {
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: none no-repeat center;
	background-size: contain;
	width: 75px;
	height: 55px;
	float: left;
	top: -5px;
	margin-right: 8px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason__point .svg, #custom .p-feature-reason__point::before {
		float: none;
		top: 0;
		margin-right: 0;
		margin-bottom: 8px;
	}
}

#custom .p-feature-reason__point.icon-point-tel::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-tel.svg");
}

#custom .p-feature-reason__point.icon-point-pay::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-pay.svg");
}

#custom .p-feature-reason__point.icon-point-time::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-time.svg");
}

#custom .p-feature-reason__point.icon-point-quality::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-quality.svg");
}

#custom .p-feature-reason__point.icon-point-shop::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-shop.svg");
}

#custom .p-feature-reason__point.icon-point-pro::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-pro.svg");
}

#custom .p-feature-reason__point.icon-point-confirm::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-confirm.svg");
}

#custom .p-feature-reason__point.icon-point-exchange::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-exchange.svg");
}

#custom .p-feature-reason__point.icon-point-punk::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-punk.svg");
}

#custom .p-feature-reason__point.icon-point-support::before {
	background-image: url("../../../images/asset/lp/feature/icon/icon-point-support.svg");
}

#custom .p-feature-reason__points.with-svg .p-feature-reason__point::before {
	content: none;
	background-image: none;
}

#custom .p-feature-reason__points.with-svg .p-feature-reason__point:hover svg .svg-stroke {
	animation: svg-stroke-300 1.2s linear infinite;
}

#custom .p-feature-reason .navi {
	margin-top: 60px;
}

@media (max-width: 1024px) {
	#custom .p-feature-reason .navi {
		margin-top: 40px;
	}
}

#custom .p-feature-reason .navi--after-note {
	margin-top: 1.5em;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-reason .navi--after-note {
		margin-top: 1.875em;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > 追加のイメージ
------------------------------------------------*/
#custom .p-feature-omake-images {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 100px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-omake-images {
		display: none;
	}
}

#custom .p-feature-omake-images::before, #custom .p-feature-omake-images::after {
	flex: 1;
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: none no-repeat center;
	background-size: contain;
	width: 50%;
	height: 38.75vw;
	max-height: 496px;
	background-size: cover;
}

#custom .p-feature-omake-images::before {
	background-image: url("../../../images/asset/lp/feature/omake/bg-omake-1.jpg");
}

#custom .p-feature-omake-images::after {
	background-image: url("../../../images/asset/lp/feature/omake/bg-omake-2.jpg");
}

/*------------------------------------------------
	BTOS > トップページ > こんな方におすすめ
------------------------------------------------*/
#custom .p-feature-recommend {
	padding: 90px 0;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend {
		padding-top: 70px;
	}
}

#custom .p-feature-recommend h2 {
	margin-bottom: 32px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend h2 {
		margin-bottom: 40px;
	}
}

#custom .p-feature-recommend-item {
	position: relative;
	box-sizing: content-box;
	width: 304px;
	min-height: 580px;
	height: auto;
	padding-top: 1px;
	padding-left: 174px;
	padding-right: 50px;
	font-size: 0.938rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend-item {
		width: 288px;
		min-height: 473px;
		padding-left: 15px;
		padding-right: 25px;
	}
}

#custom .p-feature-recommend-item .container {
	width: 304px;
	min-height: 290px;
	margin: 268px 0 0;
	padding: 40px 32px 48px;
	border-radius: 4px;
	background: #f00;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend-item .container {
		width: 288px;
		min-height: 273px;
		margin-top: 200px;
		padding: 20px 24px;
	}
}

#custom .p-feature-recommend-item h3 {
	font-size: 1.313rem;
	margin-bottom: 20px;
}

#custom .p-feature-recommend-item .name {
	font-size: 1rem;
	margin-bottom: 20px;
}

#custom .p-feature-recommend-item .image {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 387px;
	height: 417px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend-item .image {
		width: 270px;
		height: 310px;
	}
}

#custom .p-feature-recommend-item .image img {
	-o-object-fit: cover;
	   object-fit: cover;
	width: 100%;
	height: auto;
}

#custom .p-feature-recommend-item:nth-child(odd) {
	padding-top: 136px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend-item:nth-child(odd) {
		padding-top: 80px;
	}
}

#custom .p-feature-recommend-item:nth-child(odd) .image {
	top: 136px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend-item:nth-child(odd) .image {
		top: 80px;
	}
}

#custom .p-feature-recommend-item:nth-child(odd) .container {
	background: #000;
}

#custom .p-feature-recommend-swiper .swiper-wrapper {
	transition-timing-function: linear;
}

#custom .p-feature-recommend-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.debug #custom .p-feature-recommend-swiper .swiper-slide::after {
	content: attr(data-swiper-slide-index);
	display: inline-block;
	position: absolute;
	top: 0;
	left: -2.5em;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	background: #333;
	color: #fff;
	text-align: center;
	font-size: 0.75rem;
}

#custom .p-feature-recommend .note {
	margin-top: 1.5em;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-recommend .note {
		margin-top: 1em;
	}
}

#custom .p-feature-recommend-swiper:active {
	cursor: pointer;
}

#custom .p-feature-recommend .swiper-pointer {
	display: block;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 84px;
	height: 84px;
	margin-left: -42px;
	margin-top: -42px;
	border-radius: 50%;
	background: #333 url("../../../images/asset/common/icon/icon-swiper-pointer.svg") no-repeat center center;
	background-size: contain;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

#custom .p-feature-recommend .swiper-pointer.is-active {
	opacity: 1;
	transition: opacity 0.3s ease-in-out, transform 0.1s linear;
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > ご利用の流れ
------------------------------------------------*/
#custom .p-feature-using {
	overflow: hidden;
	padding: 100px 0 80px;
	background: #F5F5F5;
}

@media (max-width: 1024px) {
	#custom .p-feature-using {
		padding: 80px 0 40px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using {
		padding: 60px 0 24px;
	}
}

#custom .p-feature-using h2 {
	margin-bottom: 96px;
	font-size: 1.75rem;
}

@media (max-width: 1024px) {
	#custom .p-feature-using h2 {
		font-size: 1.563rem;
		margin-bottom: 2em;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using h2 {
		font-size: 1.313rem;
	}
}

#custom .p-feature-using__article {
	position: relative;
	padding-top: 10px;
	padding-left: 92px;
	padding-bottom: 70px;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__article {
		padding-left: 75px;
		padding-bottom: 50px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__article {
		padding-left: 61px;
		padding-bottom: 36px;
	}
}

#custom .p-feature-using__article h3 {
	font-size: 1.563rem;
	margin-bottom: 1.125rem;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__article h3 {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__article h3 {
		font-size: 1rem;
	}
}

#custom .p-feature-using__article h3 .text {
	display: block;
}

#custom .p-feature-using__article h3 .num {
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 3px;
	width: 3.625rem;
	line-height: 3.625rem;
	border-radius: 50%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	font-style: normal;
	font-family: Arial, "Helvetica Neue", Helvetica, Verdana, Roboto, sans-serif;
	background: #f00;
	color: #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__article h3 .num {
		left: 0;
		width: 3.125rem;
		line-height: 3.125rem;
		font-size: 1.375rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__article h3 .num {
		width: 2.75rem;
		line-height: 2.75rem;
		font-size: 1.25rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__article p {
		font-size: 0.938rem;
	}
}

#custom .p-feature-using__article::before {
	content: "";
	display: block;
	position: absolute;
	left: 1.813rem;
	top: 3.625rem;
	bottom: 0;
	margin-left: 3px;
	border-left: 1px dashed #f00;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__article::before {
		left: 1.563rem;
		top: 3.125rem;
		margin-left: 0;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__article::before {
		left: 1.375rem;
		top: 2.75rem;
	}
}

#custom .p-feature-using__article:last-child::before {
	display: none;
}

#custom .p-feature-using .using-swiper {
	margin-top: 20px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using .using-swiper {
		margin-top: 15px;
	}
}

#custom .p-feature-using .using-swiper .swiper-pagination {
	display: none;
	position: absolute;
	top: 230px;
	bottom: auto;
	right: 16px;
	left: auto;
	width: auto;
	text-align: right;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using .using-swiper .swiper-pagination {
		display: block;
		top: -25px;
		margin-top: 40.5616224649%;
	}
}

@media only screen and (max-width: 543px) {
	#custom .p-feature-using .using-swiper .swiper-pagination {
		margin-top: 83.0670926518%;
	}
}

#custom .p-feature-using__list {
	font-size: 0.875rem;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__list {
		font-size: 0.813rem;
	}
}

#custom .p-feature-using__list small {
	font-size: 0.813rem;
}

#custom .p-feature-using__list.grid {
	display: flex;
	gap: 24px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__list.grid.swiper-wrapper {
		gap: 0;
	}
}

#custom .p-feature-using__list.grid > li {
	flex: 1;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__list.grid > li {
		flex: 1 0 auto;
	}
}

#custom .p-feature-using__list p.wrap {
	padding: 0 20px;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__list p.wrap {
		padding: 0;
	}
}

#custom .p-feature-using__list p.wrap.text-long {
	padding: 0;
}

#custom .p-feature-using__list p.note {
	padding: 0 5px;
}

@media (max-width: 1024px) {
	#custom .p-feature-using__list p.note {
		padding: 0;
	}
}

#custom .p-feature-using__list p + p {
	margin-top: 0.5rem;
}

#custom .p-feature-using__list .image {
	min-height: 260px;
	margin-bottom: 20px;
	background: #fff;
}

@media (max-width: 1199px) {
	#custom .p-feature-using__list .image {
		min-height: 0;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__list .image {
		width: 284px;
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 1199px) {
	#custom .p-feature-using__list .image img {
		max-width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using__list .image img {
		width: 100%;
		height: auto;
	}
}

#custom .p-feature-using-nav {
	margin-top: 40px;
	font-size: 0.938rem;
	background-color: transparent;
}

#custom .p-feature-using-nav .container-wrapper {
	overflow: hidden;
	padding: 36px 38px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-using-nav .container-wrapper {
		padding: 30px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav .container-wrapper {
		max-width: none;
		margin: 0;
		padding: 28px 20px;
		border-radius: 4px;
	}
}

@media (min-width: 769px) {
	#custom .p-feature-using-nav--maint .container-wrapper {
		min-height: 222px;
		padding-right: calc(50% + 38px);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	#custom .p-feature-using-nav--maint .container-wrapper {
		padding-right: calc(42% + 30px);
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav--maint .container-wrapper {
		padding-top: 0;
	}
}

#custom .p-feature-using-nav h3 {
	font-size: 1.125rem;
	margin-bottom: 12px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav h3 {
		font-size: 1rem;
	}
}

#custom .p-feature-using-nav .navi {
	margin-top: 20px;
}

@media (max-width: 1024px) {
	#custom .p-feature-using-nav .background {
		width: 42%;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav .background {
		width: auto;
		margin-bottom: 20px;
	}
}

#custom .p-feature-using-nav .background--logo {
	padding-right: 38px;
	padding-bottom: 36px;
}

@media (max-width: 1024px) {
	#custom .p-feature-using-nav .background--logo {
		width: 40%;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav .background--logo {
		display: block;
		width: auto;
		margin: 0 0 20px;
		padding: 0 13px;
		text-align: left;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-using-nav .background--image {
		order: -1;
		margin: 0 -20px 20px;
	}
	#custom .p-feature-using-nav .background--image img {
		max-height: 216px;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > よくあるご質問
------------------------------------------------*/
#custom .p-feature-faq {
	position: relative;
	padding: 120px 0 140px;
	background: #fff url("../../../images/asset/lp/feature/faq/bg-faq-tire.jpg") no-repeat left bottom;
	background-size: 218px 410px;
	background-position: left calc(314px);
	background-position: left calc(262px + 3.2rem);
}

@media (max-width: 1024px) {
	#custom .p-feature-faq {
		padding: 90px 0 120px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-faq {
		padding: 60px 0 180px;
		background-image: url("../../../images/asset/lp/feature/faq/bg-faq-tire-sp.jpg");
		background-size: 235px 332px;
		background-position: left calc(427px);
		background-position: left calc(252px + 11.1008rem);
	}
}

#custom .p-feature-faq h2 {
	float: left;
	max-width: 32%;
	font-size: 1.75rem;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-faq h2 {
		float: none;
		max-width: none;
		margin-bottom: 40px;
		font-size: 1.313rem;
	}
}

#custom .p-feature-faq__article {
	margin-left: 34%;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-faq__article {
		margin-left: 0;
	}
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > ブリヂストンの想い
------------------------------------------------*/
#custom .p-feature-support {
	padding: 140px 0 170px;
	background: #F5F5F5 url("../../../images/asset/lp/feature/support/bg-support.png") no-repeat center top;
	background-size: cover;
}

@media (max-width: 1024px) {
	#custom .p-feature-support {
		padding: 90px 0;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-support {
		padding: 60px 0 70px;
	}
}

#custom .p-feature-support h2 {
	margin-bottom: 1.429em;
	font-size: 1.75rem;
}

@media (max-width: 1199px) {
	#custom .p-feature-support h2 {
		font-size: 1.563rem;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-support h2 {
		margin-bottom: 1.875rem;
		font-size: 1.313rem;
	}
}

#custom .p-feature-support header p {
	text-align: center;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-support header p {
		font-size: 0.938rem;
		text-align: left;
	}
}

#custom .p-feature-support .grid {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-top: 70px;
	min-height: 440px;
}

@media (max-width: 1024px) {
	#custom .p-feature-support .grid {
		margin-top: 50px;
	}
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-support .grid {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-top: 40px;
	}
}

#custom .p-feature-support .grid > .wrapper {
	flex: 1;
}

#custom .p-feature-support .grid > .image {
	flex: 1;
	max-width: 528px;
	background: #fff no-repeat center top;
	background-size: cover;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-support .grid > .image {
		order: -1;
		max-width: none;
	}
}

#custom .p-feature-support .grid > .image img {
	width: 100%;
	height: auto;
}

#custom .p-feature-support .m-faqbox {
	border-color: #fff;
	background: #fff;
}

#custom .p-feature-support .m-faqbox__question {
	font-size: 1.063rem;
}

@media (max-width: 1024px) {
	#custom .p-feature-support .m-faqbox__question {
		font-size: 1rem;
	}
}

#custom .p-feature-support .m-faqbox .note {
	margin-top: 1em;
}

#custom .p-feature-support .m-list--check > li::before {
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

/*------------------------------------------------
	BTOS > LP > BTOSとは > タイヤを探す
------------------------------------------------*/
#custom .p-feature-search-tire {
	padding: 80px 0 80px;
	border: 1px solid #fff;
	border-width: 1px 0;
	background: #fff;
}

@media (max-width: 1024px) {
	#custom .p-feature-search-tire {
		padding: 60px 0 40px;
	}
}

@media (max-width: 1024px) {
	#custom .p-feature-search-tire {
		padding: 40px 0 20px;
	}
}

#custom .p-feature-search-tire h2 {
	margin-bottom: 24px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-search-tire h2 {
		margin-bottom: 30px;
	}
}

#custom .p-feature-search-tire h2::before {
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background: url("../../../images/asset/common/icon/icon-search-tire.svg") no-repeat center;
	background-size: contain;
	width: 80px;
	height: 80px;
	display: block;
	margin: 0 auto -10px;
}

@media only screen and (max-width: 768px) {
	#custom .p-feature-search-tire h2::before {
		margin-bottom: 0;
	}
}

/*------------------------------------------------
	BTOS > nav > ブランド一覧 (タイヤラインアップ)
------------------------------------------------*/
#custom :is(.nav-brand, .lineup) {
	padding: 60px 0 63px;
	background-image: url("../../../images/asset/lp/brand/nav/bg-nav-brand.jpg");
}

@media only screen and (max-width: 768px) {
	#custom :is(.nav-brand, .lineup) {
		padding: 50px 0 84px;
		background-image: url("../../../images/asset/lp/brand/nav/bg-nav-brand-sp.jpg");
	}
}

@media (max-width: 1024px) {
	#custom :is(.nav-brand, .lineup) h2 {
		max-width: 20em;
		margin-bottom: 0.5em;
	}
}

/*------------------------------------------------
	BTOS > nav > モノづくりへのこだわり
------------------------------------------------*/
#custom .nav-story {
	padding: 60px 0 63px;
	background-image: url("../../../images/asset/lp/story/nav/bg-nav-story.jpg");
	background-position: center center;
	background-position: center bottom;
	background-position: center top;
}

.debug-1 #custom .nav-story {
	background-position: center center;
}

.debug-2 #custom .nav-story {
	background-position: center bottom;
}

@media only screen and (max-width: 768px) {
	#custom .nav-story {
		padding: 50px 0 84px;
		background-image: url("../../../images/asset/lp/story/nav/bg-nav-story-sp.jpg");
	}
}

@media (max-width: 1024px) {
	#custom .nav-story h2 {
		max-width: 20em;
		margin-bottom: 0.5em;
	}
}
