@layer bootstrap {

	/* レガシーは 24カラムに改造した Bootstrap 3 を使っていた。
	   24分割のうち 12 で表せない幅だけ、ここで補う。
	   上限付きのものは、同じ要素に上のブレークポイントの指定があるもの */
	@media (max-width: 767.98px) {

		#carlifesupport-top .cls-col-5-24-to-md {
			flex: 0 0 auto;
			width: 20.833333%;
		}

		#carlifesupport-top .cls-col-19-24-to-md {
			flex: 0 0 auto;
			width: 79.166667%;
		}

	}

	@media (min-width: 992px) {

		#carlifesupport-top .cls-offset-lg-3-24 {
			margin-left: 12.5%;
		}

	}

	/* レガシーは parallax.min.js で背景を描いていた。背景画像は本文の style に移してある。
	   視差効果は落とした。CSS の background-attachment: fixed は背景の大きさを
	   要素ではなくビューポート基準で計算するため、画像が実寸と合わなくなる */
	#carlifesupport-top .cls-parallax {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* 吹き出しのイラストは切れると意味が変わるので、幅に合わせて全体を見せる */
	#carlifesupport-top #emergency_conparison .cls-parallax {
		background-position: center top;
		background-size: 100% auto;
	}

	/* レガシーが #services 限定で 460px 以下に当てていた出し分け。
	   Bootstrap のブレークポイントではないため、クラスをそのまま残している */
	@media (max-width: 460px) {
		#carlifesupport-top #services .hidden-xxs {
			display: none !important;
		}

		#carlifesupport-top #services .visible-xxs {
			display: block !important;
		}

		#carlifesupport-top #services .col-xxs-24 {
			width: 100%;
		}
	}

	/* legacy-base.css の `td { padding: 16px; border: 2px solid #fff }` は
	   共通シェル（旧 custom.css）由来。carlifesupport 系はレガシーで custom.css を
	   読んでいないため、素の表に戻す。個別の表の指定はページ CSS 側が上書きする */
	#carlifesupport-top td {
		padding: 0;
		border: 0;
	}

	/* 見出しの既定サイズも BS3 と BS5 で違う。
	   レガシー CSS が明示していない見出しは BS5 の大きさになってしまう */
	#carlifesupport-top h1 { font-size: 36px; }
	#carlifesupport-top h2 { font-size: 30px; }
	#carlifesupport-top h3 { font-size: 24px; }
	#carlifesupport-top h4 { font-size: 18px; }
	#carlifesupport-top h5 { font-size: 14px; }
	#carlifesupport-top h6 { font-size: 12px; }

	/* Bootstrap 3 は .container / .container-fluid / .row に clearfix の疑似要素を持つ。
	   float を解除するためのものだが、副作用として
	   「最後の子要素の margin-bottom が親を突き抜けない」効果もあった。
	   Bootstrap 5 には無いため、セクション間の余白が縮む */
	#carlifesupport-top .container::after,
	#carlifesupport-top .container-fluid::after,
	#carlifesupport-top .row::after {
		content: "";
		display: table;
		clear: both;
	}

	/* ただし .navbar の中の .container は Bootstrap 5 では flex。
	   疑似要素も flex アイテムとして数えられ、justify-content: space-between の
	   右端の席を取ってしまうため、バーガーボタンが左にずれる。ここだけ出さない */
	#carlifesupport-top .navbar > .container::after,
	#carlifesupport-top .navbar > .container-fluid::after {
		content: none;
	}

	/* Bootstrap 3/4 のカラム（.col-*）は position: relative を持っていた。
	   Bootstrap 5 で外れたため、カラムの中に position: absolute で置かれた要素
	   （おすすめ！バッジなど）が、カラムではなくページ全体を基準にしてしまう */
	#carlifesupport-top .row > * {
		position: relative;
	}

	/* Bootstrap 3 の .table-responsive は 767px 以下でセルに white-space: nowrap を当て、
	   表を縮めずに横スクロールさせていた。Bootstrap 5 は overflow-x: auto だけで
	   nowrap を持たないため、表が幅に収まるまで折り返して縦に伸びてしまう。
	   料金プラン表が「スクロール前提なのに全文が出る」状態になっていたのはこれ。
	   表の高さが変わると、カラム基準で絶対配置しているおすすめ！バッジの位置もずれる */
	@media screen and (max-width: 767px) {
		#carlifesupport-top .table-responsive {
			width: 100%;
			margin-bottom: 15px;
			overflow-y: hidden;
			-ms-overflow-style: -ms-autohiding-scrollbar;
			border: 1px solid #ddd;
		}

		#carlifesupport-top .table-responsive > .table {
			margin-bottom: 0;
		}

		#carlifesupport-top .table-responsive > .table > thead > tr > th,
		#carlifesupport-top .table-responsive > .table > tbody > tr > th,
		#carlifesupport-top .table-responsive > .table > tfoot > tr > th,
		#carlifesupport-top .table-responsive > .table > thead > tr > td,
		#carlifesupport-top .table-responsive > .table > tbody > tr > td,
		#carlifesupport-top .table-responsive > .table > tfoot > tr > td {
			white-space: nowrap;
		}
	}
}

@layer page {

	#carlifesupport-top {
		font-family: 'Open Sans', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 16px;
	}

	#carlifesupport-top .navbar .navbar-toggler {
		margin-top: 30px;
		margin-bottom: 0;
		border: 0px solid transparent;
	}

	#carlifesupport-top .navbar .navbar-toggler:hover,
		#carlifesupport-top .navbar .navbar-toggler:focus {
		background-color: initial;
	}

	#carlifesupport-top .navbar-brand {
		font-size: 50px;
		text-transform: uppercase;
		color: #010101 !important;
		font-weight: 700;
		line-height: 21px;
		height: auto;
	}

	#carlifesupport-top .navbar-brand span.small {
		font-size: 26px;
		letter-spacing: -0.6px;
	}

	#carlifesupport-top .navbar-brand > img {
		display: inline-block;
		vertical-align: bottom;
		max-width: 180px;
	}

	#carlifesupport-top nav.navbar {
		padding: 5px 0 4px;
		background: none;
		border: none;
	}

	#carlifesupport-top .navbar {
		margin-bottom: 0;
	}

	#carlifesupport-top div#defaultNavbar1.navbar-collapse {
		-webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4);
		box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4);
	}

	#carlifesupport-top section {
		margin-bottom: 40px;
	}

	#carlifesupport-top section h1 {
		font-size: 40px;
		margin-bottom: 5px;
		font-weight: bold;
	}

	#carlifesupport-top a:hover img {
		opacity: 0.8;
	}

	#carlifesupport-top :is(#home,#sub-visual) .reveal {
		padding: 0;
	}

	#carlifesupport-top #top_slider {
		margin: 0 0 40px;
	}

	#carlifesupport-top #top_slider a.btn-default {
		background-image: none;
		background-color: #ffffff;
		background-repeat: no-repeat;
		border-color: transparent;
		border-radius: 3px;
		filter: initial;
		text-shadow: 0 0 0 #fff;
		font-size: 24px;
		font-weight: bold;
		color: #e61f19;
		padding: 16px 12px;
		letter-spacing: -0.5px;
		margin-top: 20px;
	}

	#carlifesupport-top #top_slider a.btn-default:hover {
		opacity: 0.75;
	}

	#carlifesupport-top #top_slider .fa-angle-left {
		left: 18%;
		margin-left: -10px;
	}

	#carlifesupport-top #top_slider .fa-angle-right {
		right: 18%;
		margin-right: -10px;
	}

	#carlifesupport-top #top_slider .carousel-caption {
		top: 16%;
		text-align: left;
		left: 13%;
		right: 13%;
		text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
	}

	#carlifesupport-top #top_slider .carousel-caption h3 {
		font-size: 40px;
		letter-spacing: -0.5px;
		line-height: 54px;
	}

	@media all and (max-width: 1400px) {

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 2.5vw;
			line-height: 3vw;
		}

	}

	#carlifesupport-top #top_slider .carousel-control-prev i,
		#carlifesupport-top #top_slider .carousel-control-next i {
		background: rgba(255, 255, 255, 0.5);
		text-decoration: none;
		color: #fff;
		font-size: 26px;
		width: 35px;
		height: 35px;
		text-align: center;
		border-radius: 25px;
		line-height: 32px;
		transition: all ease-in-out 0.1s;
	}

	#carlifesupport-top :is(.carousel-control-prev,.carousel-control-next) .fa-angle-left,
		#carlifesupport-top :is(.carousel-control-prev,.carousel-control-next) .fa-angle-right {
		position: absolute;
		top: 50%;
		margin-top: -10px;
		z-index: 5;
		display: inline-block;
	}

	#carlifesupport-top .carousel-indicators {
		bottom: -35px;
	}

	#carlifesupport-top .carousel-indicators button {
		background-color: #acacac;
		width: 12px;
		height: 12px;
		margin: 0;
	}

	#carlifesupport-top .carousel-indicators .active {
		background-color: #ffa200;
		width: 12px;
		height: 12px;
	}

	#carlifesupport-top #cases h2 {
		font-size: 48px;
	}

	#carlifesupport-top #cases h3 {
		font-size: 33px;
		color: #c20008;
		margin-bottom: 5px;
	}

	#carlifesupport-top #cases h3 span {
		font-size: 25px;
	}

	#carlifesupport-top #cases h3 span a {
		color: #c20008;
	}

	#carlifesupport-top #cases h4 {
		margin-top: 0;
	}

	#carlifesupport-top #cases h5 {
		color: #e61f19;
	}

	#carlifesupport-top #cases p.f16,
		#carlifesupport-top #cases p.f15 {
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	#carlifesupport-top #services {
		background-color: #c20008;
		color: #fff;
		padding: 35px 15px 50px;
	}

	#carlifesupport-top #services h2 {
		margin-top: 10px;
		margin-bottom: 5px;
	}

	#carlifesupport-top #services p.f11 {
		margin-top: 10px;
	}

	#carlifesupport-top #plans_comparison .table > thead > tr > th,
		#carlifesupport-top #plans_comparison .table > tbody > tr > th,
		#carlifesupport-top #plans_comparison .table > tfoot > tr > th,
		#carlifesupport-top #plans_comparison .table > thead > tr > td,
		#carlifesupport-top #plans_comparison .table > tbody > tr > td,
		#carlifesupport-top #plans_comparison .table > tfoot > tr > td,
		#carlifesupport-top #aaa_comparison .table > thead > tr > th,
		#carlifesupport-top #aaa_comparison .table > tbody > tr > th,
		#carlifesupport-top #aaa_comparison .table > tfoot > tr > th,
		#carlifesupport-top #aaa_comparison .table > thead > tr > td,
		#carlifesupport-top #aaa_comparison .table > tbody > tr > td,
		#carlifesupport-top #aaa_comparison .table > tfoot > tr > td {
		vertical-align: middle;
	}

	#carlifesupport-top #plans_comparison table,
		#carlifesupport-top #aaa_comparison table {
		border-collapse: collapse;
	}

	#carlifesupport-top #plans_comparison table tr.row-1 td:first-child,
		#carlifesupport-top #plans_comparison table tr.row-2 td:first-child,
		#carlifesupport-top #plans_comparison table tr.row-3 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-1 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-2 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-3 td:first-child {
		color: #fff;
		vertical-align: middle;
		line-height: 16px;
		font-weight: 700;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
	}

	#carlifesupport-top #plans_comparison table tr.row-1 td:first-child span,
		#carlifesupport-top #plans_comparison table tr.row-2 td:first-child span,
		#carlifesupport-top #plans_comparison table tr.row-3 td:first-child span,
		#carlifesupport-top #aaa_comparison table tr.row-1 td:first-child span,
		#carlifesupport-top #aaa_comparison table tr.row-2 td:first-child span,
		#carlifesupport-top #aaa_comparison table tr.row-3 td:first-child span {
		font-weight: normal;
	}

	#carlifesupport-top #plans_comparison table tr.row-1 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-1 td:first-child {
		font-size: 18px;
		background-image: -webkit-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: -moz-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: -o-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: linear-gradient(0deg, #45a2ba 0%, #70cfed 98%);
	}

	#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(2),
		#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(4),
		#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(6),
		#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(8),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(2),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(4),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(6),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(8) {
		background-color: #b7dce5;
	}

	#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(3),
		#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(5),
		#carlifesupport-top #plans_comparison table tr.row-1 td:nth-child(7),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(3),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(5),
		#carlifesupport-top #aaa_comparison table tr.row-1 td:nth-child(7) {
		background-color: #dcecf2;
	}

	#carlifesupport-top #plans_comparison table tr.row-2 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-2 td:first-child {
		font-size: 18px;
		background-image: -webkit-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: -moz-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: -o-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: linear-gradient(0deg, #44799e 0%, #5f94b9 100%);
	}

	#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(2),
		#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(4),
		#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(6),
		#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(8),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(2),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(4),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(6),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(8) {
		background-color: #b7d4e6;
	}

	#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(3),
		#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(5),
		#carlifesupport-top #plans_comparison table tr.row-2 td:nth-child(7),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(3),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(5),
		#carlifesupport-top #aaa_comparison table tr.row-2 td:nth-child(7) {
		background-color: #dbe8f1;
	}

	#carlifesupport-top #plans_comparison table tr.row-3 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-3 td:first-child {
		font-size: 22px;
		background-image: -webkit-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: -moz-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: -o-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: linear-gradient(0deg, #f76c8f 0%, #fea7be 100%);
	}

	#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(2),
		#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(4),
		#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(6),
		#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(8),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(2),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(4),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(6),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(8) {
		background-color: #ffc1d1;
	}

	#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(3),
		#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(5),
		#carlifesupport-top #plans_comparison table tr.row-3 td:nth-child(7),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(3),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(5),
		#carlifesupport-top #aaa_comparison table tr.row-3 td:nth-child(7) {
		background-color: #ffe0e8;
	}

	#carlifesupport-top #plans_comparison table th,
		#carlifesupport-top #aaa_comparison table th {
		border: 1px solid #fff;
		text-align: center;
		font-size: 14px;
		background-color: #525252;
		color: #FFF;
	}

	#carlifesupport-top #plans_comparison table td,
		#carlifesupport-top #aaa_comparison table td {
		border: 1px solid #fff;
		padding: 12px 5px;
		font-size: 14px;
		font-weight: bold;
	}

	#carlifesupport-top img.icn_recommend {
		position: absolute;
		left: -25px;
		bottom: 101px;
		z-index: 1;
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-1 th,
		#carlifesupport-top #aaa_comparison table tr.row-main-1 td:nth-child(2),
		#carlifesupport-top #aaa_comparison table tr.row-main-2 td:first-child,
		#carlifesupport-top #aaa_comparison table tr.row-main-3 td:first-child {
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		text-shadow: 0px 1px 0px rgba(1, 2, 1, 0.75);
	}

	#carlifesupport-top #aaa_comparison table tr:nth-child(3) th,
		#carlifesupport-top #aaa_comparison table tr:nth-child(6) th,
		#carlifesupport-top #aaa_comparison table tr:nth-child(8) th,
		#carlifesupport-top #aaa_comparison table tr:nth-child(10) th,
		#carlifesupport-top #aaa_comparison table tr:nth-child(12) th {
		color: #ffffff;
		text-shadow: none;
		background-color: #525252;
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-1 th {
		background-color: #e1736f;
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-1 td:nth-child(2) {
		background-image: -webkit-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: -moz-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: -o-linear-gradient(90deg, #45a2ba 0%, #70cfed 98%);
		background-image: linear-gradient(0deg, #45a2ba 0%, #70cfed 98%);
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-1 td {
		background-color: #dcecf2;
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-2 td:first-child {
		background-image: -webkit-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: -moz-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: -o-linear-gradient(90deg, #44799e 0%, #5f94b9 100%);
		background-image: linear-gradient(0deg, #44799e 0%, #5f94b9 100%);
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-2 td {
		background-color: #cfe3f0;
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-3 td:first-child {
		background-image: -webkit-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: -moz-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: -o-linear-gradient(90deg, #f76c8f 0%, #fea7be 100%);
		background-image: linear-gradient(0deg, #f76c8f 0%, #fea7be 100%);
	}

	#carlifesupport-top #aaa_comparison table tr.row-main-3 td {
		background-color: #ffe0e8;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-first td {
		background-color: #e2e2e2;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-second td {
		background-color: #c8c8c8;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-third td {
		background-color: #aaa;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-first td.classic_basic {
		color: #ffffff;
		text-shadow: 0px 1px 0px rgba(1, 2, 1, 0.75);
		background-color: #a8a8a8;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-second td.plus {
		color: #ffffff;
		text-shadow: 0px 1px 0px rgba(1, 2, 1, 0.75);
		background-color: #878787;
	}

	#carlifesupport-top #aaa_comparison table tr.row-others-third td.premier {
		color: #ffffff;
		text-shadow: 0px 1px 0px rgba(1, 2, 1, 0.75);
		background-color: #666666;
	}

	#carlifesupport-top #member_testimonial dl {
		padding: 25px 40px;
		margin: 20px auto 40px;
		color: #000000;
		background-color: rgba(255, 211, 175, 0.15);
		box-shadow: 0px 0px 5.88px 0.12px rgba(1, 1, 1, 0.3);
	}

	#carlifesupport-top #member_testimonial dl dt.ttl_name {
		padding-bottom: 10px;
		font-size: 18px;
		font-weight: 400;
		line-height: 27px;
		border-bottom: 1px solid #d65100;
	}

	#carlifesupport-top #member_testimonial dl dd.testimonial {
		margin-top: 10px;
		font-size: 15px;
		line-height: 30px;
	}

	#carlifesupport-top #emergency_conparison h1.bg_script {
		background: url(../../img/carlifesupport/img_emergency_frnt.png) no-repeat center top;
		width: 100%;
		height: 760px;
	}

	#carlifesupport-top #member_benefit h1 {
		margin-top: 42%;
	}

	#carlifesupport-top #member_benefit p.bdr_benefit {
		padding: 10px 15px;
		border: 1px #959595 solid;
	}

	#carlifesupport-top #member_benefit img.col-lg-3 {
		padding: 137px 30px 0;
	}

	#carlifesupport-top #member_prime {
		margin-bottom: 40px;
	}

	#carlifesupport-top #member_prime h2 {
		color: #94783a;
		margin-bottom: 20px;
	}

	#carlifesupport-top #member_prime h3 {
		margin: 12px auto 40px;
	}

	#carlifesupport-top #member_prime div.bdr_prime {
		color: #fff;
		background-color: #94783a;
		padding: 15px;
		margin-bottom: 50px;
	}

	#carlifesupport-top #member_prime div.bdr_inner {
		border: 10px double #fff;
		padding: 15px 65px;
	}

	#carlifesupport-top #member_prime div.bdr_inner p {
		margin-left: 30px;
	}

	#carlifesupport-top #faq h2.ttl_panel {
		font-size: 24px;
		font-weight: 700;
		padding: 12px 15px 12px 25px;
		border: 1px solid #c2c2c2;
		position: relative;
		background: #ffffff;
		background: -moz-linear-gradient(top, #fff 0%, #fff 50%, #f9f9f9 51%, #f2f2f2 100%);
		background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #f9f9f9 51%, #f2f2f2 100%);
		background: linear-gradient(to bottom, #fff 0%, #fff 50%, #f9f9f9 51%, #f2f2f2 100%);
	}

	#carlifesupport-top #faq h2.ttl_panel {
		color: #000;
	}

	#carlifesupport-top #faq h2.ttl_panel::before {
		border-color: #e61f19;
	}

	#carlifesupport-top #faq h2.ttl_panel::before {
		content: "";
		border-width: 3px;
		border-style: solid;
		height: auto;
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 12px;
	}

	#carlifesupport-top #faq .accordion-item .accordion-header i {
		padding: 7px 9PX;
		color: #707070;
		margin-right: 10px;
		border: 1px solid #CCC;
	}

	#carlifesupport-top #faq .accordion .accordion-header + .accordion-collapse > .accordion-body {
		border-top: none;
	}

	#carlifesupport-top #faq .accordion-button,
		#carlifesupport-top #faq .accordion-body {
		font-size: 18px;
		font-weight: 700;
		line-height: 33px;
	}

	#carlifesupport-top #faq .accordion-button {
		color: #000;
	}

	#carlifesupport-top #faq .accordion-button a:focus {
		text-decoration: none;
	}

	#carlifesupport-top #faq .accordion-body {
		color: #e61f19;
		margin-left: 50px;
	}

	#carlifesupport-top #faq .accordion-body a {
		color: #e61f19;
		text-decoration: underline;
	}

	#carlifesupport-top #faq .accordion-body a:hover {
		text-decoration: none;
	}

	#carlifesupport-top #contact {
		background-color: #FFF7F8;
		padding: 35px 15px 50px;
		margin-bottom: 0px;
	}

	#carlifesupport-top #contact h2.contact_form a {
		text-decoration: none;
		color: #333333;
	}

	@media screen and (min-width: 1200px) {

		#carlifesupport-top div#defaultNavbar1 .navbar-nav {
			width: 1074px !important;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-link {
			width: 134.2px !important;
		}

		#carlifesupport-top #member_prime {
			margin-top: 90px;
		}

		#carlifesupport-top #member_benefit div.col-lg-12 {
			height: 670px;
			padding: 0;
		}

	}

	@media screen and (min-width: 992px) {

		#carlifesupport-top div#defaultNavbar1 {
			padding: 20px 0;
			position: absolute;
			background-color: rgba(255, 255, 255, 0.6);
			top: 62px;
			left: 0;
			right: 0;
			z-index: 5;
			transition: all ease-in-out .3s;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav {
			float: none;
			margin: 0 auto;
			width: 976px;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-link {
			color: #000;
			font-size: 15px;
			font-weight: bold;
			border-right: 1px solid #000;
			padding: 4px 0;
			line-height: 16px;
			width: 122px;
			text-align: center;
			vertical-align: middle;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-item:first-child .nav-link {
			border-left: 1px solid #000;
		}

	}

	@media screen and (max-width: 1199px) {

		#carlifesupport-top #top_slider .carousel-caption {
			top: 8%;
			left: 10%;
			right: 10%;
		}

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 32px;
			line-height: 42px;
		}

		#carlifesupport-top #top_slider .carousel-caption a.btn-default {
			margin-top: 0;
		}

		#carlifesupport-top #member_benefit div.col-lg-12 {
			height: 500px;
			padding: 0;
		}

		#carlifesupport-top #member_benefit h1 {
			margin-top: 39%;
		}

		#carlifesupport-top #member_prime {
			margin-top: 150px;
		}

		#carlifesupport-top img.icn_recommend {
			left: 8px;
			bottom: 82px;
		}

		#carlifesupport-top #emergency_conparison h1.bg_script {
			background: url(../../img/carlifesupport/img_emergency_frnt_md.png) no-repeat center center;
			height: 650px;
			margin-top: 5%;
		}

	}

	@media screen and (max-width: 991px) {

		#carlifesupport-top .navbar-brand span.small {
			font-size: 33px;
			line-height: 33px;
		}

		#carlifesupport-top div#defaultNavbar1 {
			position: absolute;
			background-color: rgba(230, 31, 25, 0.77);
			top: 104px;
			left: 25px;
			right: 25px;
			z-index: 5;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-item {
			text-align: right;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-link {
			color: #FFF;
			font-size: 20px;
			font-weight: bold;
		}

		#carlifesupport-top #top_slider .carousel-caption {
			top: 0%;
			left: 8%;
			right: 8%;
		}

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 46px;
			line-height: 64px;
			letter-spacing: -2px;
		}

		#carlifesupport-top #top_slider .carousel-caption a.btn-default {
			margin-top: 20px;
			font-size: 33px;
			display: block;
		}

		#carlifesupport-top #aaa_comparison div.table-responsive {
			width: 100%;
			margin-bottom: 15px;
			overflow-y: hidden;
			-ms-overflow-style: -ms-autohiding-scrollbar;
			border: 1px solid #dddddd;
		}

		#carlifesupport-top #aaa_comparison div.table-responsive > .table {
			margin-bottom: 0;
			width: 1140px;
			max-width: initial;
		}

		#carlifesupport-top #cases div.col-lg-4 {
			margin-bottom: 50px;
		}

		#carlifesupport-top #services div.offset-lg-0 {
			margin-bottom: 40px;
		}

		#carlifesupport-top #services div.col-xxs-24 {
			text-align: left;
		}

		#carlifesupport-top #services h4 {
			font-size: 36px;
		}

		#carlifesupport-top #services p.f11 {
			font-size: 22px;
			font-weight: 700;
		}

		#carlifesupport-top #services p.f11 span {
			font-weight: normal;
			font-size: 16px;
			margin-top: 5px;
		}

		#carlifesupport-top #member_benefit div.col-lg-12 {
			height: auto;
			padding: 20px 15px 0;
		}

		#carlifesupport-top #member_benefit h1 {
			margin-top: 5%;
		}

		#carlifesupport-top #member_benefit img.col-md-4 {
			padding-bottom: 25px;
		}

		#carlifesupport-top #member_prime div.bdr_inner h4 {
			padding-left: 28px;
		}

		#carlifesupport-top #member_prime div.bdr_inner h4 i.fa-check {
			position: absolute;
			margin-left: -30px;
		}

		#carlifesupport-top #member_prime {
			margin-top: initial;
		}

		#carlifesupport-top img.icn_recommend {
			left: -12px;
			bottom: 108px;
		}

	}

	@media screen and (max-width: 767px) {

		#carlifesupport-top {
			font-size: 16px;
		}

		#carlifesupport-top .navbar .navbar-collapse {
			margin-top: 15px;
		}

		#carlifesupport-top .navbar-brand span.small {
			margin-top: 8px;
			white-space: nowrap;
			display: block;
			font-size: 24px;
			line-height: 24px;
		}

		#carlifesupport-top div#defaultNavbar1 {
			top: 89px;
		}

		#carlifesupport-top div#defaultNavbar1 .navbar-nav .nav-link {
			font-size: 18px;
		}

		#carlifesupport-top #top_slider .carousel-caption {
			top: 0%;
			left: 5%;
			right: 5%;
		}

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 34px;
			line-height: 50px;
			letter-spacing: -1px;
		}

		#carlifesupport-top img.icn_recommend {
			left: 0px;
			bottom: -22px;
		}

		#carlifesupport-top #member_benefit img.img-mob {
			padding: 0 0 25px;
			margin: auto;
		}

		#carlifesupport-top #member_prime div.bdr_inner {
			padding: 15px;
		}

		#carlifesupport-top #faq .accordion-item .accordion-header i {
			position: absolute;
			left: 15px;
		}

		#carlifesupport-top .accordion-button > a,
			#carlifesupport-top .accordion-button > small,
			#carlifesupport-top .accordion-button > .small,
			#carlifesupport-top .accordion-button > small > a,
			#carlifesupport-top .accordion-button > .small > a {
			padding-left: 32px;
			display: block;
		}

	}

	@media screen and (max-width: 460px) {

		#carlifesupport-top .navbar-brand span.small {
			font-size: 20px;
		}

		#carlifesupport-top section h1 {
			font-size: 34px;
		}

		#carlifesupport-top #top_slider .carousel-caption {
			top: -20px;
			left: 15px;
			right: 15px;
		}

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 20px;
			line-height: 31px;
			letter-spacing: -0.5;
		}

		#carlifesupport-top #top_slider .carousel-caption a.btn-default {
			margin-top: 15px;
			font-size: 22px;
		}

		#carlifesupport-top #services div.offset-lg-0 {
			margin-bottom: 30px;
		}

		#carlifesupport-top #services div.hidden-xxs {
			display: none !important;
		}

		#carlifesupport-top #services div.col-xxs-24 {
			width: 100%;
		}

		#carlifesupport-top #services p.sub.f20 {
			text-align: left;
		}

		#carlifesupport-top #services h4 {
			font-size: 30px;
			text-align: center;
		}

		#carlifesupport-top #services img.visible-xxs {
			display: block !important;
		}

	}

	@media screen and (max-width: 360px) {

		#carlifesupport-top #top_slider .carousel-caption h3 {
			font-size: 15px;
			line-height: 28px;
		}

		#carlifesupport-top #top_slider .carousel-caption a.btn-default {
			margin-top: 10px;
			font-size: 20px;
		}

	}

	@media screen and (min-width: 992px) {

		#carlifesupport-top .justify-content-center {
			justify-content: center !important;
		}

		#carlifesupport-top .d-flex {
			display: flex !important;
		}

	}

	#carlifesupport-top .right {
		text-align:right;
	}

	#carlifesupport-top .left {
		text-align:left;
	}

	#carlifesupport-top .bold {
		font-weight:700;
	}

	#carlifesupport-top .f_en_narrow {
		font-family:"Open Sans Condensed",sans-serif;
	}

	#carlifesupport-top .clearfix:after {
		clear:both;
		display:block;
		visibility:hidden;
		height:0;
		content:".";
	}

	#carlifesupport-top .mT10 {
		margin-top:10px !important;
	}

	#carlifesupport-top .mT15 {
		margin-top:15px !important;
	}

	#carlifesupport-top .mT20 {
		margin-top:20px !important;
	}

	#carlifesupport-top .mT35 {
		margin-top:35px !important;
	}

	#carlifesupport-top .mT50 {
		margin-top:50px !important;
	}

	#carlifesupport-top .mB30 {
		margin-bottom:30px !important;
	}

	#carlifesupport-top .mB50 {
		margin-bottom:50px !important;
	}

	#carlifesupport-top .f10 {
		font-size:10px !important;
	}

	#carlifesupport-top .f11 {
		font-size:11px !important;
	}

	#carlifesupport-top .f12 {
		font-size:12px !important;
	}

	#carlifesupport-top .f15 {
		font-size:15px !important;
	}

	#carlifesupport-top .f16 {
		font-size:16px !important;
	}

	#carlifesupport-top .f20 {
		font-size:20px !important;
	}

	#carlifesupport-top .f24 {
		font-size:24px !important;
	}

	#carlifesupport-top .f34 {
		font-size:34px !important;
	}

	#carlifesupport-top .red {
		color:#e40000;
	}

}

@layer page {

	/* ここから、Bootstrap 3 と 5 で既定値が違うもの。
	   レガシー CSS が明示していない箇所に BS5 の値が出てしまうため戻す */

	/* 本文の行間（BS3 は 1.42857、テーマは 1.7） */
	#carlifesupport-top {
		line-height: 1.42857143;
	}

	/* 見出しの行間（BS3 は 1.1、BS5 は 1.2） */
	#carlifesupport-top h1,
	#carlifesupport-top h2,
	#carlifesupport-top h3,
	#carlifesupport-top h4,
	#carlifesupport-top h5,
	#carlifesupport-top h6 {
		line-height: 1.1;
	}

	/* 見出しのマージン（BS5 は margin-top が 0） */
	#carlifesupport-top h1,
	#carlifesupport-top h2,
	#carlifesupport-top h3 {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	#carlifesupport-top h4,
	#carlifesupport-top h5,
	#carlifesupport-top h6 {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/* 段落とリストの下マージン（BS3 は 10px、BS5 は 1rem） */
	#carlifesupport-top p,
	#carlifesupport-top ul,
	#carlifesupport-top ol {
		margin-bottom: 10px;
	}

	/* アコーディオンの見出しは BS5 の部品。上のマージンを打ち消す */
	#carlifesupport-top .accordion-header {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* BS3 の .navbar は position: relative。BS5 は指定がないため、
	   絶対配置のサブナビの基準がずれてヘッダーとの間に隙間ができる */
	#carlifesupport-top .navbar {
		position: relative;
	}

	/* BS3 の .navbar-brand は padding 15px、BS5 は 5px */
	#carlifesupport-top .navbar-brand {
		padding: 15px;
	}

	/* 本番はサブナビが jQuery sticky のラッパーに包まれており、ナビの下端から始まる。
	   top の px 指定をそのまま移すとずれるため 100% にする */
	@media (min-width: 992px) {
		#carlifesupport-top div#defaultNavbar1 {
			top: 100%;
		}
	}

	/* アンカー移動の着地点が追従ナビに隠れないように */
	#carlifesupport-top section[id] {
		scroll-margin-top: 44px;
	}

	/* レガシーのバーガーボタンは BS3 の .icon-bar を3本並べた作りで、
	   style.css が幅45px・高さ7px・角丸3px の赤いバーに仕立てていた。
	   BS5 では markup が .navbar-toggler-icon（SVG 背景1枚）に変わるため、
	   元の .icon-bar 向けの指定が当たらず、BS5 既定の灰色アイコンのままになっていた。
	   markup は本文側にあり差し替えに再投入が要るので、CSS で3本のバーを作り直す */
	#carlifesupport-top .navbar-toggler {
		margin-top: 30px;
		padding: 9px 10px;
		border: 0;
	}

	#carlifesupport-top .navbar-toggler:focus {
		box-shadow: none;
	}

	#carlifesupport-top .navbar-toggler-icon {
		position: relative;
		width: 45px;
		/* バー3本（7px）＋間隔2つ（9px）＋レガシーが最後のバーにも付けていた余白9px */
		height: 48px;
		background-image: none;
	}

	#carlifesupport-top .navbar-toggler-icon::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 45px;
		height: 7px;
		border-radius: 3px;
		background-color: #e61f19;
		box-shadow: 0 16px 0 #e61f19, 0 32px 0 #e61f19;
	}

	/* 開いたサブナビの項目。レガシー（BS3）は
	     .navbar-collapse  padding: 0 15px
	     .navbar-nav       margin: 7.5px -15px   ← 上の padding を打ち消す
	     > li > a          padding: 10px 15px / line-height: 20px
	   という組み合わせで、文字が枠の右端から 15px 内側に入り、1項目 40px になっていた。
	   BS5 の .navbar-collapse と .nav-link にはこの padding が無く、
	   文字が枠の右端にくっついていた。打ち消し合う 15px は省いて同じ見た目にする */
	@media (max-width: 991.98px) {
		#carlifesupport-top #defaultNavbar1 .navbar-nav {
			margin: 7.5px 0;
		}

		#carlifesupport-top #defaultNavbar1 .navbar-nav .nav-link {
			padding: 10px 15px;
			line-height: 20px;
		}
	}

	/* 追従サブナビ。レガシーは jquery.sticky.js がラッパーを差し込んでいた。
	   通常時は絶対配置なので position: sticky が使えず、JS で is-sticky を切り替える。
	   本文の data-pls-sticky はトップ・HCP・友人紹介の3本に付いているので、
	   規則もサブナビ共通の tweaks に置く（トップ専用に置いていたため他2本で効いていなかった） */
	@media (min-width: 992px) {
		#carlifesupport-top div#defaultNavbar1.is-sticky {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 50;
			padding: 10px 0;
		}
	}

	/* よくある質問の ＋／− アイコン。レガシーは jQuery が各見出しに
	   <i class="fa fa-plus"> を差し込み、クリックで fa-minus に付け替えていた。
	   BS5 のアコーディオンは右端のシェブロンなので、疑似要素でレガシーの枠付き
	   ＋／− に戻す（ページ CSS 側の .accordion-header i の指定と同じ見た目） */
	#carlifesupport-top #faq .accordion-button::after {
		display: none;
	}

	#carlifesupport-top #faq .accordion-button::before {
		content: "+";
		flex: 0 0 auto;
		align-self: flex-start;
		font-family: "Font Awesome 7 Free";
		font-weight: 900;
		font-size: 18px;
		line-height: 1;
		padding: 7px 9px;
		margin-right: 10px;
		color: #707070;
		border: 1px solid #ccc;
	}

	#carlifesupport-top #faq .accordion-button:not(.collapsed)::before {
		content: "\f068";
	}

	/* BS5 は開いた見出しに青い背景と内側の影を付けるが、レガシーには無い */
	#carlifesupport-top #faq .accordion-button:not(.collapsed) {
		background-color: transparent;
		box-shadow: none;
	}

	/* BS5 の .accordion-button は内側余白が 1rem 1.25rem、.accordion-body は 1rem 1.25rem。
	   BS3 の .panel-heading は 10px 15px、.panel-body は 15px だったので、
	   そのままだと1行あたり12px背が高くなる（18問で約100px） */
	#carlifesupport-top #faq .accordion-button {
		padding: 10px 15px;
	}

	#carlifesupport-top #faq .accordion-body {
		padding: 15px;
	}

	/* BS3 は .panel-group .panel + .panel に margin-top: 5px を持ち、
	   パネルが5pxずつ離れて見えていた。BS5 の .accordion-item は隙間なしで連結する */
	#carlifesupport-top #faq .accordion-item + .accordion-item {
		margin-top: 5px;
	}

	/* BS3 のインジケータは丸（border-radius: 10px・白枠）。
	   Bootstrap 5 は 30×3px の棒なので、レガシーの見た目に戻す */
	#carlifesupport-top .carousel-indicators button {
		width: 12px;
		height: 12px;
		margin: 0 3px;
		border: 1px solid #fff;
		border-radius: 50%;
		opacity: 1;
		text-indent: -999px;
	}

	/* 会員特典の背景帯：3枚の画像はレガシーでは float で、h1 の margin-top: 42%
	   は帯の上端から測られていた。BS5 では .row が通常フローを占めるため絶対配置に */
	#carlifesupport-top #member_benefit .cls-parallax {
		position: relative;
	}

	@media (min-width: 992px) {
		#carlifesupport-top #member_benefit .cls-benefit-imgs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	/* ここから下はレガシーの <head> にあったページ内 <style>。
	   変換で <style> ごと落としていたため丸ごと欠けていた */

	#carlifesupport-top #services h4.bold.f24 {
		min-height: 48px;
	}

	@media screen and (min-width: 992px) {
		/* レガシーの top: 64px は jquery.sticky.js が差し込む .sticky-wrapper
		   （ヘッダーより 5px 下に始まる）を基準にした値で、結果としてサブナビは
		   ヘッダーの下端にぴったり付いていた。こちらは .navbar が基準なので
		   同じ 64px だと 6px 上にずれ、ヘッダーの白が帯の上に残る。
		   高さに依存しないよう 100%（＝ヘッダーの下端）で合わせる */
		#carlifesupport-top div#defaultNavbar1 {
			top: 100%;
			transition: all ease-in-out 0.2s;
		}

		#carlifesupport-top .btn-detail {
			position: relative;
			top: 17vw;
			left: 47.5vw;
		}

		#carlifesupport-top .btn-detail_h-cls {
			position: relative;
			top: 15vw;
			left: 58vw;
		}
	}

	@media screen and (max-width: 991px) {
		#carlifesupport-top .btn-detail {
			position: relative;
			top: 60vw;
			left: 45vw;
			width: 16rem;
			font-size: 1.5rem !important;
		}

		#carlifesupport-top .btn-detail_h-cls {
			position: relative;
			top: 65vw;
			left: 0;
			width: auto;
		}
	}

	@media screen and (max-width: 768px) {
		#carlifesupport-top .btn-detail_h-cls {
			position: relative;
			top: 75vw;
			left: 0;
			width: auto;
		}
	}

/* おすすめ！バッジは、料金表を含むカラムの下端を基準に bottom: -22px で置いている。
   レガシーでは表の下の注釈（*1 …）が .col-xs-24 の float だったため、
   カラムの高さに加算されず、カラムは表の直後で止まっていた（372px）。
   移植先では注釈の高さがカラムに入り、カラムが 604px に伸びて
   バッジが 211px 下にずれていた。

   Bootstrap 5 の .row は flex で、カラムは flex アイテムとして新しい
   ブロック整形コンテキストを作る。そのままでは float がカラムの外に抜けられず
   高さに加算されてしまうため、.row を block に戻したうえで注釈を float させる。
   はみ出した float は .row の clearfix（compat.css）が受け止める。
   767px を超えるとレガシーもカラムが float して注釈を含むので、モバイルだけに閉じる */
@media screen and (max-width: 767px) {
	#carlifesupport-top #plans_comparison > .row {
		display: block;
	}

	/* 注釈の .row。バッジを箱の外に出した結果 .table-responsive の隣ではなくなったので、
	   「カラムの中の .row」として指す */
	#carlifesupport-top #plans_comparison > .row > * > .row {
		float: left;
		width: 100%;
	}
}

	/* 指摘3: 料金プランセクションのリンクの青を明るく（PI 検収 2026-10-27）。
	   既定はサイト共通の --navy (#1A2B5E)。レガシーのナビアイコンで使われていた
	   #0072bb に寄せる。白背景のコントラスト比 5.1 で WCAG AA を満たす。
	   サイト全体のリンク色は変えず、指摘のあったこのセクションだけに閉じる */
	#carlifesupport-top #plans_comparison a {
		color: #0072bb;
	}
}