@layer bootstrap {


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

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

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

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

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

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

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

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

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

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

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

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

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

@layer page {

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

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

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

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

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

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

	#carlifesupport-referral div.navbar-right {
		margin-top: 30px;
		vertical-align: bottom;
	}

	#carlifesupport-referral div.navbar-right i {
		color: #0072bb;
	}

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

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

	#carlifesupport-referral .navbar-right {
		margin-right: 0;
	}

	#carlifesupport-referral 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-referral section {
		margin-bottom: 40px;
	}

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

	#carlifesupport-referral section p.txt_sub_eng {
		font-size: 25px;
		margin-bottom: 30px;
		text-align: center;
		color: #7d7c7c;
	}

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

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

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

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

	}

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

		#carlifesupport-referral 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-referral div#defaultNavbar1 .navbar-nav {
			float: none;
			margin: 0 auto;
			width: 976px;
		}

		#carlifesupport-referral 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-referral div#defaultNavbar1 .navbar-nav .nav-item:first-child .nav-link {
			border-left: 1px solid #000;
		}

	}

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

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

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

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

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

	}

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

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

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

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

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

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

	}

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

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

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

	}

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

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

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

	#carlifesupport-referral .desktop-wrap {
		display:block;
	}

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

		#carlifesupport-referral .desktop-wrap {
			display:none;
		}

	}

	#carlifesupport-referral .main-image-content {
		margin:0 calc(50% - 50vw);
		width:100vw;
	}

	#carlifesupport-referral .tagiline {
		margin-top:60px;
	}

	#carlifesupport-referral .tagiline h1 {
		color:#e61f19;
		font-size:20px;
	}

	#carlifesupport-referral .tagiline p {
		font-size:22px;
		margin-top:15px;
	}

	#carlifesupport-referral .about-cpn p {
		line-height:1.8;
	}

	#carlifesupport-referral .about-cpn strong {
		display:block;
		font-size:20px;
		padding-top:10px;
	}

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

	#carlifesupport-referral .sub-title-bar:before {
		content:"";
		border-width:3px;
		border-style:solid;
		height:auto;
		position:absolute;
		top:10px;
		bottom:10px;
		left:12px;
	}

	#carlifesupport-referral .sub-title-bar:before {
		border-color:#e61f19;
	}

	#carlifesupport-referral .terms {
		margin-top:30px;
		padding:0 20px;
	}

	#carlifesupport-referral .terms h3 {
		font-size:40px;
		margin-bottom:5px;
		font-weight:bold;
	}

	#carlifesupport-referral .terms .txt_sub_eng {
		font-size:25px;
		margin-bottom:30px;
		text-align:center;
		color:#7d7c7c;
	}

	#carlifesupport-referral .terms h4 {
		font-weight:bold;
	}

	#carlifesupport-referral .terms ul {
		padding-left:22px;
	}

	#carlifesupport-referral .get-cpn-code {
		text-align:center;
		padding:5px 0 0 0;
	}

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

		#carlifesupport-referral .get-cpn-code {
			height:280px;
		}

	}

	#carlifesupport-referral .get-cpn-code H3 {
		font-weight:bold;
	}

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

		#carlifesupport-referral .get-cpn-code p {
			width:70%;
			margin:0 auto;
		}

	}

	#carlifesupport-referral .get-cpn-code__main {
		margin-top:20px;
		background-image:url(../../img/carlifesupport/bird-ico.png);
		background-repeat:no-repeat;
		background-position:20% 0;
		z-index:999;
		background-size:82px 52px;
		height:80px;
	}

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

		#carlifesupport-referral .get-cpn-code__main {
			background-position:10% 0;
		}

	}

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

		#carlifesupport-referral .get-cpn-code__main {
			background-position:5% 0;
		}

	}

	#carlifesupport-referral .get-cpn-code__char {
		border:1px solid #ccc;
		font-size:30px;
		display:inline-block;
		padding:7.8px 25px;
		height:60px;
		white-space:nowrap;
		float:right;
		font-weight:bold;
	}

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

		#carlifesupport-referral .get-cpn-code__char {
			float:none;
			padding:7.8px 42px;
			margin-bottom:15px;
		}

	}

	#carlifesupport-referral .get-cpn-code__copy {
		background:#7bd000;
		background:linear-gradient(0deg,#7bd000 0%,#78cc00 50%,#6cb800 100%);
		font-size:20px;
		display:inline-block;
		padding:7.8px 25px;
		color:#fff;
		font-weight:bold;
		height:60px;
		line-height:45px;
		white-space:nowrap;
		float:left;
		border-radius:3px;
		cursor:pointer;
	}

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

		#carlifesupport-referral .get-cpn-code__copy {
			float:none;
		}

	}

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

		#carlifesupport-referral .call {
			display:none;
		}

	}

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

		#carlifesupport-referral .call {
			display:block;
			color:#e61f19;
			margin:20px auto;
			font-size:20px;
		}

		#carlifesupport-referral .call .text {
			line-height:40px;
		}

		#carlifesupport-referral .call__button {
			border:2px solid #e61f19;
			padding:4px 12px;
			color:#e61f19;
			font-weight:bold;
			float:right;
		}

	}

	#carlifesupport-referral .tbl-detail-wrap {
		width:auto;
		margin:35px auto;
		border:1px solid #555;
		padding:20px 0;
	}

	#carlifesupport-referral .tbl-detail-wrap__content {
		border-collapse:collapse;
	}

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

		#carlifesupport-referral .tbl-detail-wrap__content .mobile-layout {
			display:flow-root;
		}

		#carlifesupport-referral .tbl-detail-wrap__content .mobile-layout__spacing {
			height:20px;
		}

		#carlifesupport-referral .tbl-detail-wrap__content .mobile-layout td {
			float:left;
			width:100%;
			display:block;
		}

	}

	#carlifesupport-referral .tbl-detail-wrap__content th {
		padding:0px;
		background-color:#FFE712;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td {
		border-top:none;
		font-size:140%;
		text-align:center;
		line-height:28px;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td.two-col {
		background:#fff6bb;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td.one-col {
		border:2px dashed #777;
		background-color:#fff;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td.one-col h6 {
		margin-top:15px;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td p {
		font-size:16px;
		padding:10px 20px;
		font-weight:bold;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td span.nbr-detail {
		border-radius:50%;
		width:40px;
		height:38px;
		line-height:36px;
		font-size:100%;
		background-color:#c80008;
		display:inline-block;
		color:#FFF!important;
		font-weight:bold;
		text-align:center;
	}

	#carlifesupport-referral .tbl-detail-wrap__content td.nbr-three strong {
		font-size:100%;
		padding:0px 4px;
	}

	#carlifesupport-referral .tbl-detail-wrap__content h5 {
		text-align:center;
		margin:15px 15px 0px;
		font-size:20px;
		font-weight:bold;
		line-height:30px;
		margin-bottom:15px;
	}

	#carlifesupport-referral .tbl-detail-wrap__content h6 {
		text-align:center;
		margin-bottom:10px;
		font-weight:bold;
		font-size:125%;
	}

}

@layer page {

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

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

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

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

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

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

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

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

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

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

	/* アンカー移動の着地点が追従ナビに隠れないように */
	#carlifesupport-referral 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-referral .navbar-toggler {
		margin-top: 30px;
		padding: 9px 10px;
		border: 0;
	}

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

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

	#carlifesupport-referral .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-referral #defaultNavbar1 .navbar-nav {
			margin: 7.5px 0;
		}

		#carlifesupport-referral #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-referral div#defaultNavbar1.is-sticky {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 50;
			padding: 10px 0;
		}
	}
}