@layer bootstrap {

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

		#digital-member .cls-col-lg-9-24 {
			flex: 0 0 auto;
			width: 37.5%;
		}

	}

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

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

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

		#digital-member #services .visible-xxs {
			display: block !important;
		}

		#digital-member #services .col-xxs-24 {
			width: 100%;
		}
	}

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

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

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

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

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

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

		#digital-member .table-responsive > .table {
			margin-bottom: 0;
		}

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

@layer page {

	#digital-member :is(#home,#sub-visual) {
		margin-bottom:0;
	}

	#digital-member .sub-visual-text {
		top:-23vw;
		left:2vw;
		position:relative;
	}

	@media (max-width:767.98px) {

		#digital-member .sub-visual-text {
			top:initial;
			position:initial;
			margin:40px 15px 0 15px;
		}

	}

	#digital-member .sub-visual-text p {
		margin-bottom:40px;
		font-weight:bold;
		font-size:20px;
	}

	#digital-member .sub-visual-frame {
		height:530px;
	}

	@media (max-width:767.98px) {

		#digital-member .sub-visual-frame {
			height:100%;
		}

	}

	@media (max-width:575.98px) {

		#digital-member .mobile-none {
			display:none;
		}

	}

	#digital-member .basic-block__text-size-large {
		font-size:23px;
	}

	#digital-member .basic-block__ico-color-red {
		color:#de0000;
	}

	#digital-member .basic-block__font-weight-bold {
		font-weight:bold;
	}

	#digital-member .basic-block__margin-bottom-0 {
		margin-bottom:0;
	}

	#digital-member .basic-block__margin-bottom-3rem {
		margin-bottom:30px;
	}

	#digital-member .basic-block__list-pl-2rem {
		padding-left:20px;
		line-height:30px;
	}

	#digital-member .basic-block__column-group {
		margin-top:50px;
		margin-bottom:50px;
	}

	#digital-member .basic-block .arrow-column {
		margin-top:100%;
	}

	@media (max-width:575.98px) {

		#digital-member .basic-block .arrow-column {
			margin-top:5%;
			font-size:14px;
		}

	}

	#digital-member .basic-block .arrow-column .fa-arrow-left {
		float:left;
	}

	#digital-member .basic-block .arrow-column .fa-arrow-right {
		float:right;
	}

	@media (min-width:991.98px) {

		#digital-member .basic-block__img-desktopMR-adjust {
			margin-right:-150px;
		}

		#digital-member .basic-block__img-desktopML-adjust {
			margin-left:-150px;
		}

	}

	@media (max-width:575.98px) {

		#digital-member .basic-block img {
			display:block;
			margin:0 auto;
		}

	}

	#digital-member .basic-block__texts-column {
		margin-top:15%;
	}

	@media (max-width:767.98px) {

		#digital-member .basic-block__texts-column {
			margin-top:5%;
		}

	}

	#digital-member .basic-block__texts-column-first,
		#digital-member .basic-block__texts-column-second {
		margin-top:6%;
	}

	@media (max-width:767.98px) {

		#digital-member .basic-block__texts-column-first,
			#digital-member .basic-block__texts-column-second {
			margin-top:6%;
		}

	}

	#digital-member .basic-block__texts-column-3 {
		margin-top:11%;
	}

	#digital-member .basic-block__colored-full-bar {
		text-align:left;
		padding:30px 30px 20px 30px;
		margin-bottom:30px;
	}

	@media (max-width:575.98px) {

		#digital-member .basic-block__colored-full-bar {
			padding:5px 30px 20px 30px;
		}

	}

	#digital-member .basic-block__colored-full-bar--bgRose {
		background:#f9dde1;
	}

	#digital-member .basic-block__colored-full-bar--bgPalemintblue {
		background:#ddf9f7;
	}

	@media (min-width:1199.98px) {

		#digital-member .basic-block__colored-full-bar--title-low {
			margin-top:-10px;
		}

	}

	#digital-member .basic-block__colored-full-bar--title {
		font-size:16px;
		font-weight:bold;
		white-space:nowrap;
	}

	@media (max-width:575.98px) {

		#digital-member .basic-block__colored-full-bar--title {
			margin-bottom:30px;
		}

	}

	#digital-member .basic-block__colored-full-bar--title i {
		font-size:50px;
		position:relative;
		top:12px;
		padding-right:10px;
	}

	#digital-member .basic-block__frame {
		border:1px solid #ccc;
		width:100%;
	}

	@media (max-width:767.98px) {

		#digital-member .basic-block .basic-block__frame-mb-2rem {
			margin-bottom:20px;
		}

	}

	#digital-member .basic-block__img-desktopwidth-small {
		width:280px;
	}

	@media (max-width:767.98px) {

		#digital-member .basic-block__img-desktopwidth-small {
			width:100%;
		}

	}

	#digital-member .basic-block__text {
		margin-bottom:30px;
		line-height:25px;
	}

	#digital-member .basic-block__step123 {
		margin:80px auto;
	}

	#digital-member .basic-block__step123-title {
		font-size:22px;
		line-height:30px;
		margin-top:0;
		margin-bottom:30px;
	}

	#digital-member .basic-block__number {
		font-size:50px;
		font-family:Meiryo;
		position:relative;
		top:-15px;
	}

	@media (max-width:575.98px) {

		#digital-member .basic-block__number {
			text-align:center;
			display:block;
		}

	}

	#digital-member .basic-block__number.two-line {
		top:-5px;
	}

	#digital-member .basic-block__horizon-four-step {
		text-align:center;
	}

	#digital-member .basic-block__horizon-four-step--bgRed {
		background:#de0000;
	}

	#digital-member .basic-block__horizon-four-step--bgMintblue {
		background:#5db9ca;
	}

	#digital-member .basic-block__horizon-four-step--title {
		font-weight:bold;
		margin-bottom:25px;
		text-align:left;
		font-size:24px;
	}

	#digital-member .basic-block__horizon-four-step--number {
		border-radius:50px;
		color:#fff;
		width:30px;
		display:block;
		margin:12.5px auto;
		height:35px;
		width:35px;
		font-size:24px;
	}

	#digital-member .basic-block__horizon-four-step--text {
		font-size:13.5px;
		line-height:24px;
	}

	@media (max-width:575.98px) {

		#digital-member .basic-block__horizon-four-step--text {
			margin-bottom:30px;
		}

	}

	#digital-member .basic-block__note {
		font-size:13px;
		line-height:23px;
	}

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

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

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

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

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

	#digital-member .navbar {
		margin-bottom:0;
	}

	#digital-member section {
		margin-bottom:40px;
	}

	@media (max-width:575.98px) {

		#digital-member section {
			margin-bottom:0;
		}

	}

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

	#digital-member a:hover img {
		opacity:0.8;
	}

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

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

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

	#digital-member .basic-block__title {
		background-color:#de0000;
		color:#fff;
		padding:70px 15px;
		margin-top:0;
	}

	@media (min-width:991.98px) {

		#digital-member .basic-block__title-mt-large {
			margin-top:130px;
		}

	}

	#digital-member .basic-block__bg-color-green {
		background-color:#9cc300;
	}

	#digital-member .basic-block h2 {
		margin-top:10px;
		margin-bottom:5px;
	}

	#digital-member #top_slider .carousel-caption {
		top:10%;
		left:47%;
		right:20%;
	}

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

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

	}

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

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

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

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

	}

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

		#digital-member {
			font-size:16px;
		}

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

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

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

	}

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

		#digital-member .navbar-brand span.small {
			font-size:20px;
		}

		#digital-member section h1 {
			font-size:34px;
		}

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

		#digital-member #top_slider .carousel-caption h3 {
			font-size:24px;
			line-height:35px;
			letter-spacing:-0.5;
		}

	}

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

		#digital-member #top_slider .carousel-caption h3 {
			font-size:21px;
			line-height:30px;
		}

	}

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

}

@layer page {

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

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

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

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

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

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

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

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

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

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

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

	#digital-member .navbar-toggler:focus {
		box-shadow: none;
	}

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

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

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

	/* レガシーは BS3 の float グリッド。col-md-6 は 992px 以上でしか効かず、
	   それ未満では画像の幅なりに収まっていた。
	   BS5 の .row > * は既定で width: 100% を持つため、col が効かない幅で
	   列が全幅に広がり、中の画像（width: 100%）が引き伸ばされる */
	@media (max-width: 991.98px) {
		#digital-member .row > .image-col {
			width: auto;
		}
	}
}