/* シンクロ調色ペンダント（住まいサイトからの移行）
   移行元の /lighting/assets/css/bundle.css から、このページが使うルールだけを取り出したもの。
   ・bundle は 552 ルール / 46,688 B。丸ごと入れると biz の共通部品 420 要素のうち 419 が変わる
     （html の font-size:62.5% と body / * のリセットを持っているため）。
   ・そのため取り出す方式にした。リセットは持ち込まない。
   ・rem は移行元の 1rem=10px を前提にしていたので px に直してある（15 箇所）。 */

.main a,.main a:visited,.main a:link{outline:none;text-decoration:none;color:#1a1a1a}
.main a:hover,.main a:visited:hover,.main a:link:hover{color:#1a1a1a}
.blockMobile{display:none !important}
@media only screen and (max-width: 900px){.blockMobile{display:block !important}}
.buttonFrame_link{display:flex;align-items:center;justify-content:center;height:54px;border:1px solid #333;color:#333;font-weight:500}
.buttonFrame_title{font-size:16px}
.buttonFrame[data-align=center]{margin-left:auto;margin-right:auto}
.buttonFrame_link{transition:.6s cubic-bezier(0.19, 1, 0.22, 1)}
@media only screen and (min-width: 901px){.buttonFrame_link:hover{background:#333}.buttonFrame_link:hover .buttonFrame_title{color:#fff}}
@media only screen and (min-width: 901px){.catelogList .buttonFrame{width:405px;margin-top:40px}}
@media only screen and (max-width: 900px){.catelogList .buttonFrame{margin-top:30px}}
.headlineLv1{text-align:center}
.headlineLv1 span{font-size:30px;text-transform:uppercase;font-family:"Noto Sans JP",sans-serif;font-style:normal;font-weight:400}
.headlineLv1[data-language=ja] span{font-size:20px;font-family:"Noto Sans JP",sans-serif;font-style:normal;font-weight:400}
@media only screen and (max-width: 900px){.headlineLv1[data-language=ja] span{font-size:18px;line-height:140%}}
.headlineLv1[data-language=ja][data-size="30"] span{font-size:30px}
@media only screen and (min-width: 901px){.hero{max-width:1280px;margin-left:auto;margin-right:auto}}
@media screen and (min-width: 902px) and (max-width: 1439px){.hero{padding-left:80px;padding-right:80px;max-width:1440px}}
.lineup_body{text-align:center;margin-bottom:94px}
@media only screen and (max-width: 900px){.lineup_body{margin-bottom:60px}}
.lineup_body p{font-size:20px;line-height:150%}
@media only screen and (max-width: 900px){.lineup_body p{font-size:18px}}
@media only screen and (min-width: 901px){.newsList_side .headlineLv1{text-align:left}}
@media only screen and (max-width: 900px){.hero .splide{padding-bottom:72px}}
@media only screen and (min-width: 901px){.hero .splide__control{right:20px;bottom:-30px}}
.hero .splide__pagination{left:0;width:100%;bottom:-58px}
@media only screen and (max-width: 900px){.hero .splide__pagination{bottom:33px}}
.synchro_headline{font-size:32px;line-height:160%;text-align:center}
@media only screen and (max-width: 900px){.synchro_headline{font-size:22px}}
.synchroIntro{margin-top:80px}
@media only screen and (min-width: 901px){.synchroIntro{max-width:1280px;margin-left:auto;margin-right:auto}}
@media screen and (min-width: 902px) and (max-width: 1439px){.synchroIntro{padding-left:80px;padding-right:80px;max-width:1440px}}
@media only screen and (max-width: 900px){.synchroIntro{margin-top:40px}}
@media only screen and (max-width: 900px)and (max-width: 900px){.synchroIntro{width:87.2%;margin-left:auto;margin-right:auto}}
.synchroIntro_image{margin-top:40px}
@media only screen and (max-width: 900px){.synchroIntro_image{margin-left:calc(50% - 50vi);margin-right:calc(50% - 50vi)}}
.synchroFeatures{margin-top:107px}
@media only screen and (min-width: 901px){.synchroFeatures{max-width:1280px;margin-left:auto;margin-right:auto}}
@media screen and (min-width: 902px) and (max-width: 1439px){.synchroFeatures{padding-left:80px;padding-right:80px;max-width:1440px}}
@media only screen and (max-width: 900px)and (max-width: 900px){.synchroFeatures{width:87.2%;margin-left:auto;margin-right:auto}}
.synchroFeatures_lead{text-align:center;font-size:24px;line-height:140%;margin-top:44px}
@media only screen and (max-width: 900px){.synchroFeatures_lead{font-size:20px;margin-top:20px}}
.synchroFeaturesCards{margin-top:69px}
@media only screen and (min-width: 901px){.synchroFeaturesCard{display:flex;justify-content:space-between;margin-bottom:40px}}
@media only screen and (max-width: 900px){.synchroFeaturesCard{margin-bottom:60px}}
@media only screen and (min-width: 901px){.synchroFeaturesCard_image{width:48.75%}}
@media only screen and (max-width: 900px){.synchroFeaturesCard_image{margin-top:20px}}
@media only screen and (min-width: 901px){.synchroFeaturesCard_content{width:48.75%}}
@media only screen and (max-width: 900px){.synchroFeaturesCard_content{margin-top:20px}}
.synchroFeaturesCard_title{font-size:20px;line-height:150%}
@media only screen and (max-width: 900px){.synchroFeaturesCard_title{font-size:18px}}
.synchroFeaturesCard_body p{font-size:16px;line-height:150%;margin-top:30px}
@media only screen and (max-width: 900px){.synchroFeaturesCard_body p{font-size:14px;margin-top:15px}}
.synchroGallery{margin-top:100px;background-color:#f2f2f2}
@media only screen and (max-width: 900px){.synchroGallery{margin-top:80px}}
.synchroGallery_wrap{padding:100px 0 70px}
@media only screen and (min-width: 901px){.synchroGallery_wrap{max-width:1280px;margin-left:auto;margin-right:auto}}
@media screen and (min-width: 902px) and (max-width: 1439px){.synchroGallery_wrap{padding-left:80px;padding-right:80px;max-width:1440px}}
@media only screen and (max-width: 900px){.synchroGallery_wrap{padding:60px 0 50px}}
@media only screen and (max-width: 900px)and (max-width: 900px){.synchroGallery_wrap{width:87.2%;margin-left:auto;margin-right:auto}}
@media only screen and (min-width: 901px){.synchroGallery_list{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:space-between}}
@media only screen and (max-width: 900px){.synchroGallery_list{margin-top:30px}}
.synchroGallery_list li{margin-bottom:32px}
@media only screen and (max-width: 900px){.synchroGallery_list li{margin-bottom:20px}}
@media only screen and (min-width: 901px){.synchroGallery_list li:nth-child(1),.synchroGallery_list li:nth-child(4),.synchroGallery_list li:nth-child(5),.synchroGallery_list li:nth-child(8){width:31.640625%}.synchroGallery_list li:nth-child(2),.synchroGallery_list li:nth-child(3),.synchroGallery_list li:nth-child(6),.synchroGallery_list li:nth-child(7){width:65.859375%}}
.synchroBottom{margin:40px 0 90px}
.synchroBottom .buttonFrame{width:405px}
@media only screen and (max-width: 900px){.synchroBottom .buttonFrame{width:90%;max-width:405px;margin-left:auto;margin-right:auto}}
.timeline .buttonFrame{width:405px;margin:80px auto 0}
@media only screen and (max-width: 900px){.timeline .buttonFrame{margin-top:20px}}
@media only screen and (max-width: 900px)and (max-width: 900px){.timeline .buttonFrame{width:87.2%;margin-left:auto;margin-right:auto}}

/* ここから下は移行元のリセットのうち、このページの組み方が前提にしている分だけ。
   リセットは biz の共通部品を壊すので丸ごとは入れず、本文（.main）に限定して当てる。
   実測: これが無いと img が原寸（2560px）で出て段組みが崩れる（87 要素中 76 要素が変わった）。 */
.main img,
.main picture {
	border: none;
	display: block;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

.main source {
	display: none;
}

.main,
.main *,
.main *::before,
.main *::after {
	box-sizing: border-box;
}

/* 移行元は #sections（本文の外枠）に重なり順の基準を置いていた。
   取り出しをクラス名で判定していたため最初は漏れていた（id セレクタはこれ 1 本だけ）。 */
#sections {
	position: relative;
	z-index: 0;
}

/* biz の customer 共通 CSS（base.css:117）が #sections a:link に青と下線を付ける。
   移行元にはどちらも無かったので打ち消す（実測: 下線 4/4 件・青 1 件）。
   色は移行元の .main a / .buttonFrame_link と同じ #333 に戻す。 */
#sections a:link,
#sections a:visited {
	color: #333;
	text-decoration: none;
}

/* ハンバーガーメニューの見出し。
   biz の base.css には .navi_title が無く、移行した 3 ページが各自持っている（実測）。
   このページの移行元は新しいフレームワークで .navi_title を持たないので、
   同じ課題のカチットT から同じものを持ってきた（PC 側は 3 ページとも同一の値）。
   SP の条件はカチットT の形（max-device-width を外した現行）に合わせている。 */
.navi_title {
	background: #666;
	color: #fff;
	font-size: 21px;
	font-weight: bold;
	padding: 20px;
	position: relative;
	width: 924px;
	overflow: hidden;
}

.navi_title span {
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	position: absolute;
	right: 20px;
	top: 30px;
}

@media only screen and (max-width:640px) {
	.navi_title {
		width: 100%;
	}
	.navi_title span {
		top: 25px;
		right: 52px;
	}
}