@layer bootstrap {

	/* legacy-base.css の `td { padding: 16px; border: 2px solid #fff }` は
	   共通シェル（旧 custom.css）由来。このページはレガシーで custom.css を
	   読んでいないため、素の表に戻す */
	#dailylifecare-top td {
		padding: 0;
		border: 0;
	}

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

	/* Bootstrap 5 は .row の直下の子すべてに width: 100% を当てる（.row > *）。
	   Bootstrap 3/4 では幅を持つのは .col-* だけだったので、
	   カラムに包まれていない要素は中身なりの幅で済んでいた。
	   料金プラン表（table.tg）は .row の直下にあるため、
	   レガシーの 694px から行いっぱいの 1170px に広がり、
	   justify-content: center が効かず中央に見えなくなっていた */
	#dailylifecare-top .row > table {
		width: auto;
		max-width: 100%;
	}
}

@layer page {

	#dailylifecare-top {
		font-family: 'Open Sans', Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
		padding-top: initial;
	}

	#dailylifecare-top .shadow_drop {
		box-shadow: 0px 2px 4px 0.5px #E1E1E1;
	}

	#dailylifecare-top .nav_bord li {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	#dailylifecare-top .c_head {
		border-bottom: none;
		background: white;
		color: #e23f40;
		font-weight: 600;
	}

	#dailylifecare-top .tg {
		border-collapse: separate;
		border-spacing: 10px;
		border-radius: 15px;
	}

	@media (min-width: 1200px) {

		#dailylifecare-top .container {
			max-width: 1170px !important;
		}

	}

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

		#dailylifecare-top .tg {
			border-collapse: separate;
			border-spacing: 1px;
		}

	}

	#dailylifecare-top .tg td {
		border-style: solid;
		border-width: 1px;
		font-size: 20px;
		overflow: hidden;
		padding: 10px 15px;
		word-break: normal;
	}

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

		#dailylifecare-top .tg td {
			border-style: solid;
			border-width: 1px;
			font-size: 12px;
			overflow: hidden;
			padding: 10px 10px;
			word-break: normal;
		}

	}

	#dailylifecare-top .tg th {
		border-style: solid;
		border-width: 1px;
		font-size: 20px;
		overflow: hidden;
		padding: 10px 5px;
		word-break: normal;
	}

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

		#dailylifecare-top .tg th {
			border-style: solid;
			border-width: 1px;
			font-size: 12px;
			overflow: hidden;
			padding: 5px 10px;
			word-break: normal;
		}

	}

	#dailylifecare-top .tg .tg-1u5s {
		border-color: #000000;
		color: #e23f40;
		font-weight: bold;
		text-align: right;
		vertical-align: top;
		border: none;
	}

	#dailylifecare-top .tg .tg-75sg {
		border-color: #333333;
		color: #e23f40;
		font-weight: bold;
		text-align: right;
		vertical-align: top;
		border-radius: 8px;
		border: none;
	}

	#dailylifecare-top .tg .tg-73oq {
		border-color: #FFF;
		text-align: left;
		vertical-align: top;
		border: none;
	}

	#dailylifecare-top .tg .tg-1v1n {
		background-color: #e23f40;
		border-color: #e23f40;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		vertical-align: top;
		border-radius: 8px;
	}

	#dailylifecare-top .tg .tg-mqa1 {
		background-color: #FFF;
		border-color: #e23f40;
		font-weight: bold;
		text-align: center;
		border-radius: 8px;
	}

	#dailylifecare-top .tg .tg-amwm {
		background-color: #FFF;
		font-weight: bold;
		text-align: center;
		border-radius: 8px;
		border-color: #e23f40;
	}

	#dailylifecare-top .tg .tg-jpc1 {
		font-size: 13px;
		text-align: left;
		vertical-align: top;
		border: none;
	}

	#dailylifecare-top .line-bc {
		padding: 20px 10px;
		margin: 15px auto;
		text-align: right;
		font-size: 16px;
	}

	#dailylifecare-top .balloon6 {
		width: 100%;
		margin: 15px 0;
	}

	#dailylifecare-top .balloon6 .faceicon {
		float: left;
		margin-right: -40px;
		width: 165px;
	}

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

		#dailylifecare-top .balloon6 .faceicon {
			float: left;
			margin-right: -40px;
			width: 70px;
		}

	}

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

		#dailylifecare-top .balloon6 .faceicon {
			float: left;
			margin-right: -40px;
			width: 80px;
		}

	}

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

		#dailylifecare-top .balloon6 .faceicon {
			float: left;
			margin-right: -40px;
			width: 95px;
		}

	}

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

		#dailylifecare-top .balloon6 .faceicon {
			float: left;
			margin-right: -40px;
			width: 105px;
		}

	}

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

		#dailylifecare-top .balloon6 .faceicon {
			float: left;
			margin-right: -40px;
			width: 135px;
		}

	}

	#dailylifecare-top .balloon6 .faceicon img {
		width: 100%;
		height: auto;
		border-radius: 50%;
	}

	#dailylifecare-top .balloon6 .chatting {
		width: 100%;
		text-align: left;
		margin: 3rem 0;
	}

	#dailylifecare-top .says {
		display: inline-block;
		position: relative;
		margin: 0 0 0 65px;
		padding: 25px;
		max-width: 670px;
		border-radius: 25px;
		background: #FCFEF0;
		box-shadow: 0px 0px 12px #85D2F0;
	}

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

		#dailylifecare-top .says {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 0px;
			max-width: 185px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 320px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 370px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 540px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 590px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

	#dailylifecare-top .says:after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 45px;
		left: -15px;
		border: 25px solid transparent;
		border-right: 25px solid #FCFEF0;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	#dailylifecare-top .says p {
		margin: 0;
		padding: 15px;
	}

	#dailylifecare-top .says_two {
		display: inline-block;
		position: relative;
		margin: 0 0 0 65px;
		padding: 25px;
		max-width: 670px;
		border-radius: 25px;
		background: #FFF7E2;
		box-shadow: 0px 0px 12px #C78B00;
	}

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

		#dailylifecare-top .says_two {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 0px;
			max-width: 185px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_two {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 320px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_two {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 370px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_two {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 540px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_two {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 590px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

	#dailylifecare-top .says_two:after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 45px;
		left: -15px;
		border: 25px solid transparent;
		border-right: 25px solid #FFF7E2;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	#dailylifecare-top .says_two p {
		margin: 0;
		padding: 15px;
	}

	#dailylifecare-top .says_three {
		display: inline-block;
		position: relative;
		margin: 0 0 0 65px;
		padding: 25px;
		max-width: 670px;
		border-radius: 25px;
		background: #F0F9FF;
		box-shadow: 0px 0px 12px #175E95;
	}

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

		#dailylifecare-top .says_three {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 0px;
			max-width: 185px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_three {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 320px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_three {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 370px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_three {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 540px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

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

		#dailylifecare-top .says_three {
			display: inline-block;
			position: relative;
			margin: 0 0 0 65px;
			padding: 5px;
			max-width: 590px;
			border-radius: 25px;
			background: #FCFEF0;
			box-shadow: 0px 0px 12px #85D2F0;
		}

	}

	#dailylifecare-top .says_three:after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 45px;
		left: -15px;
		border: 25px solid transparent;
		border-right: 25px solid #F0F9FF;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	#dailylifecare-top .says_three p {
		margin: 0;
		padding: 15px;
	}

	#dailylifecare-top .h_font {
		font-size: 2.1rem;
	}

	#dailylifecare-top .h_font2 {
		font-size: 1.55rem;
		font-weight: 600;
		letter-spacing: 0.4px;
	}

	#dailylifecare-top .bann_bg {
		background: url('../img/bg_intro.jpg');
		background-size: 100%;
		background-repeat: no-repeat;
	}

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

		#dailylifecare-top .bann_bg {
			background: none;
		}

	}

	#dailylifecare-top .t_sp td {
		padding: 10px;
		font-size: 20px;
	}

	#dailylifecare-top .b_form {
		box-shadow: 0px 0px 5px grey;
		border-radius: 10px;
	}

	#dailylifecare-top .card_w_ovw {
		max-width: 365px;
	}

	#dailylifecare-top .card_h_ovw {
		border-radius: 10px;
		font-size: 1.7rem;
		padding-top: 20px;
		padding-bottom: 0px;
		padding-right: 20px;
		padding-left: 20px;
	}

	#dailylifecare-top .card_ovw {
		padding-top: 5px;
		padding-right: 20px;
		padding-left: 20px;
		padding-bottom: 15px;
		font-size: 1.2rem;
	}

	#dailylifecare-top .btn-danger {
		background-color: #e23f40;
		border-color: #e23f40;
		color: #fff;
		font-size: 2.2rem;
		padding: .8rem 5rem;
	}

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

		#dailylifecare-top .btn-danger {
			font-size: 1.4rem;
			padding: .8rem 2rem;
		}

	}

	#dailylifecare-top .btn {
		display: inline-block;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border: 1px solid transparent;
		line-height: 1.5;
		border-radius: 1rem;
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}

	#dailylifecare-top .navbar-brand {
		font-size: 30px;
		text-transform: uppercase;
		color: #010101 !important;
		font-weight: 700;
		height: auto;
		float: left;
		padding: 15px 15px;
		line-height: 21px;
	}

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

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

	#dailylifecare-top .navbar-brand span.f_en_narrow {
		font-size: 42px;
		letter-spacing: -0.6px;
		font-family: "Open Sans Condensed", sans-serif;
		line-height: 1.45;
	}

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

		#dailylifecare-top .navbar-brand span.f_en_narrow {
			white-space: nowrap;
			display: block;
			font-size: 32px;
			line-height: 0.5;
		}

	}

	#dailylifecare-top .carousel-control-next,
		#dailylifecare-top .carousel-control-prev {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 15%;
		padding: 0;
		color: #fff;
		text-align: center;
		background: 0 0;
		border: 0;
		opacity: .5;
		transition: opacity .15s ease;
	}

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

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

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

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

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

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

		#dailylifecare-top .btn-detail {
			position: absolute;
			bottom: 2vw;
			right: 18%;
			float: right;
		}

	}

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

		#dailylifecare-top .btn-detail {
			position: absolute;
			bottom: 2rem;
			left: calc(50% - 16rem / 2);
			width: 16rem;
			font-size: 1.5rem !important;
		}

	}

	#dailylifecare-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: #e23f40;
		padding: 0.5rem 1rem;
		letter-spacing: -0.5px;
	}

	@media screen and (min-width: 769px) and (max-width: 1024px) {

		#dailylifecare-top #top_slider a.btn-default {
			font-size: 1.8vw !important;
		}

	}

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

		#dailylifecare-top #top_slider a.btn-default {
			padding: 0.5rem 1rem;
		}

	}

}

@layer page {

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

	/* 本文の行間（BS4 は 1.5、テーマは 1.7） */
	#dailylifecare-top {
		line-height: 1.5;
	}

	/* 見出しのサイズ。BS4 は固定値、BS5 は RFS（画面幅に応じて変わる） */
	#dailylifecare-top h1 { font-size: 2.5rem; }
	#dailylifecare-top h2 { font-size: 2rem; }
	#dailylifecare-top h3 { font-size: 1.75rem; }
	#dailylifecare-top h4 { font-size: 1.5rem; }
	#dailylifecare-top h5 { font-size: 1.25rem; }
	#dailylifecare-top h6 { font-size: 1rem; }

	/* 指摘8: お問合せの Email と電話番号の文字色を明るく（PI 検収 2026-10-27）。
	   既定はサイト共通の --navy (#1A2B5E)。指摘3 と同じ #0072bb に揃える。
	   サイト全体のリンク色は変えず、この2つのリンクだけに閉じる */
	#dailylifecare-top a[href^="mailto:"],
	#dailylifecare-top a[href^="tel:"] {
		color: #0072bb;
	}
}
