@charset "utf-8";
/* CSS Document */
.pc-only {
	display: none !important;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	color: #333;
	line-height: 1.7;
	font-weight: 500;
}
.inner {
	width: 100%;
	padding: 0 1rem;
}
img {
	max-width: 100%;
}
/*------------------フェイドイン-----------------------*/
.fade {
	opacity: 0;
	transition: 1s;
}
.fadein {
	opacity: 1;
}
.fade-sc {
	opacity: 0;
	transition: 1s;
	transform: translate(0, 3rem);
}
.fadeup {
	opacity: 1;
	transform: translate(0);
}
/*--------------------------------------------------header--------------------------------------------------------------*/
header {
	background-color: #fff;
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 4.5rem;
}
header .logo {
	width: 20rem;
}
header a {
	background-color: #d75f86;
	font-size: 1.2rem;
	color: #fff;
	border: .1rem solid #d75f86;
	padding: 1rem .3rem;
}

/*--------------------------------------------------article------------------------------------------------------------*/
.mainvisual {
	margin: 6rem 0 0;
}

.title {
	width: 28rem;
	margin: 0 auto 2rem;
	display: block;
}
.group {
	padding: 0 0 3rem;
}
.recommend {
	padding: 3rem 0 0;
}
.newlife {
	background-color: #fef7ee;
	margin: 9rem 0 0;
}
.newlife .inner {
	padding: 1rem 1rem 0;
}
.newlife .title {
	margin: -6rem auto 2rem;
}

.appliance {
	padding: 3rem 0;
}
.appliance img {
	margin: 0 auto;
	display: block;
}
.happy {
	background-color: #fef7ee;
	margin: 9rem 0 0;
}
.happy .inner {
	padding: 1rem 1rem 0;
}
.happy .title {
	margin: -6rem auto 2rem;
}
.note {
	padding: 3rem 0;
}
.note p {
	font-size: 1.1rem;
	line-height: 1.6;
}
/*--------------------------------------------------cta-------------------------------------------------------------*/
.cta {
	background-color: #f9e7ed;
	padding: 3rem 0;
}
.cta-camp {
	width: 26rem;
	display: block;
	margin: 0 auto;
}
.cta-copy {
	width: 30.5rem;
	display: block;
	margin: 0 auto;
}
.cta a {
	background-color: #d75f86;
	color: #fff;
	display: block;
	margin: 3rem auto;
	width: 25rem;
	padding: .5rem;
	transition: .2s;
	box-shadow: 0rem .5rem 1rem rgba(0, 0, 0, 0.2)
}
.cta a p {
	padding: 2rem 0;
	text-align: center;
	border: .2rem solid #fff;
	font-size: 1.7rem;
	position: relative;
	
}
.cta a p:after {
	position: absolute;
	content: '';
	background-image: url("img/cta-arrow-w.png");
	background-size: contain;
	width: .8rem;
	height: 1rem;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
}
.cta a:hover {
	background-color: #fff;
	color: #d75f86;
}
.cta a p:hover {
	border: .2rem solid #d75f86;
}

/*--------------------------------------------------showroom--------------------------------------------------------------*/
.showroom {
	padding: 4rem 0 0;
}
h2.title-showroom {
	font-size: 2.4rem;
	color: #5a82be;
	text-align: center;
	padding: 0 0 2rem;
	font-weight: 500;
}
.showroom p.read {
	padding: 0 0 2rem;
	text-align: center;
}
.showroom h7 {
	background-color: #eef2f8;
	display: block;
	text-align: center;
	border-radius: 2rem;
	color: #5a82be;
	font-weight: 600;
	font-size: 1.7rem;
	margin: 0 0 1rem;
}

.showroom ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 0 2rem;
}
.showroom ul li {
	width: calc((100% - 1rem) / 2);
	margin: 0 0 1rem;
}

/*----------------------------------------FOOTER----------------------------------------*/
.topbtn img {
	display: block;
	margin: 0 auto;
	width: 4.5rem;
	padding: 0rem 0 2rem;
	cursor: pointer;
}
footer {
	background-color: #EEECED;
	padding: 1rem 0;
}
.footer-logo {
	width: 80%;
	margin: 0 auto;
	display: block;
}
footer ul {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
}
footer ul li {
	padding: 0 .5rem;
}
footer p {
	font-size: 1.2rem;
}
footer p a {
	text-decoration: underline;
	color: #0062B0;
}



/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
	@media screen and (min-width:768px) {
		.sp-only {
			display: none !important;
		}
		.pc-only {
			display: block !important;
		}
		a[href^="tel:"] {
			pointer-events: none;
		}
		/*------------------------------------------------------header----------------------------------------------------------*/
		header .inner {
			height: 6rem;
		}
		header .logo {
			width: 35rem;
		}	
		header a {
			font-size: 1.5rem;
			padding: 1rem 4rem;
			transition: .3s;
		}
		header a:hover {
			background-color: #fff;
			color: #d75f86;
		}
		/*------------------------------------------------------mainvisual----------------------------------------------------------*/
		.mainvisual {
			background-image: url("img/mainvisual-back.jpg");
			background-size: cover;
			background-position: center;
		}
		.mainvisual .inner {
			position: relative;
			height: 60rem;
		}
		.mainvisual .mv-title {
			position: absolute;
			top: 1rem;
			left: 1rem;
			width: 40rem;
		}
		.mainvisual .camp-back {
			position: absolute;
			bottom: 0rem;
			left: 50%;
			transform: translateX(-50%);
			width: 70rem;
		}
		.mainvisual .cheering-title {
			position: absolute;
			bottom: 0rem;
			left: 50%;
			transform: translateX(-50%);
			width: 45rem;
		}
		.campaign {
			background-color: #eef2f8;
			padding: 2rem 0;
		}
		.campaign .camp-read {
			display: block;
			margin: 0 auto;
		}
		.title {
			width: 34rem;
			margin: 0 auto 3rem;
		}
		.group {
			padding: 0 0 4rem;
		}
		.happy ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0 4rem;
		}
		.happy ul li {
			width: calc((100% - 3rem) / 2);
		}
		.note .inner {
			max-width: 89rem;
			margin: 0 auto;
		} 
		/*--------------------------------------------------cta-------------------------------------------------------------*/
		.cta {
			padding: 3rem 0;
		}
		.cta-camp {
			width: auto;
		}
		.cta-copy {
			width: auto;
			display: block;
			margin: 0 auto;
		}
		.cta a {
			margin: 5rem auto;
			width: 50rem;
			padding: .5rem
		}
		.cta a p {
			padding: 2.5rem 0;
			border: .2rem solid #fff;
			font-size: 3rem;
		}
		.cta a p:after {
			width: 1.3rem;
			height: 1.7rem;
		}
		/*----------------------------------------------showroom----------------------------------------------------------------*/		
		.showroom-sp {
			display: block !important;
		}
		.showroom-pc {
			display: none !important;
		}
		.showroom {
			padding: 2rem 0;
		}
		.showroom .sp-only.showroom-sp {
			display: block !important;
		}
		.showroom p.read {
			padding: 2rem 0 3rem;
		}
		.showroom ul li {
			width: calc((100% - 1rem) / 4);
			margin: 0 0 1rem;
		}
		.showroom ul:before {
			content: '';
			width: calc((100% - 1rem) / 4);
			display: block;
			order: 1;
			height: 0;
		}
		.showroom ul:after {
			content: '';
			width: calc((100% - 1rem) / 4);
			display: block;
			height: 0;
		}
		
		/*----------------------------------------------footer---------------------------------------------------------------*/
		footer .inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.footer-logo {
			width: 35rem;
			margin: 0;
		}
		footer ul {
			justify-content: flex-end;
		}

		
		
		

	}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------1200px-／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
		@media screen and (min-width:1200px) {
			.mainvisual .inner, .recommend .inner, .showroom .inner {
				width: 1200px;
				margin: 0 auto;
				padding: 0;
			}
			.newlife .inner, .happy .inner {
				width: 1200px;
				margin: 0 auto;
			}
			header .inner {
				height: 7.5rem;
				padding: 0 2rem;
			}
			header .logo {
				width: 44.5rem;
			}
			header a {
				padding: 2rem 10rem;
				font-size: 1.8rem;
			}
			/*------------------------------------------------------mainvisual----------------------------------------------------------*/
			.mainvisual {
				margin: 7.5rem 0 0;
			}
			.mainvisual .inner {
				height: 74rem;
			}
			.mainvisual .mv-title {
				top: 2rem;
				left: 0rem;
				width: 46.1rem;
			}
			.mainvisual .camp-back {
				width: 97.4rem;
			}
			.mainvisual .cheering-title {
				width: 50.4rem;
			}
			.campaign {
				padding: 4rem 0;
			}
			.title {
				width: 46.5rem;
				margin: 0 auto 5rem;
			}
			.group {
				padding: 0 0 10rem;
			}
			.group.group2 {
				padding: 0 0 5rem;
			}
			.group.group3 {
				padding: 0;
			}
			.recommend {
				padding: 8rem 0 0;
			}
			.newlife {
				margin: 12rem 0 0;
			}
			.newlife .title {
				margin: -10rem auto 5rem;
			}
			.appliance {
				padding: 10rem 0;
			}
			.happy {
				margin: 12rem 0 0;
			}
			.happy .title {
				margin: -10rem auto 5rem;
			}
			
			.happy ul {
				padding: 0 0 10rem;
			}
			.happy ul li {
				width: calc((100% - 10rem) / 2);
			}
			.note {
				padding: 5rem 0;
			}
			.note p {
				font-size: 1.2rem;
			}
			.note p.second {
				padding: 2rem 0 0;
			}
			.cta {
				padding: 4rem 0;
			}
			/*----------------------------------------------------------------------------------------------------------------*/
			.showroom {
				padding: 10rem 0 0;
			}
			.showroom h2.title-showroom {
				font-size: 5rem;
			}
			.showroom p.read {
				font-size: 2rem;
				padding: 3rem 0 5rem;
			}
			.showroom-pc {
				display: block !important;
			}
			.showroom .sp-only.showroom-sp {
				display: none !important;
			}
			.showroom .inner {
				width: 1200px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
			}
			.showroom h7 {
				font-size: 3rem;
				margin: 0 0 4rem;
				border-radius: 3rem;
			}
			.showroom ul {
				padding: 0 0 4rem;
			}
			.showroom ul.wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.showroom ul.wrap li {
				background: url("img/showroom-frame.png") no-repeat;
				background-position: center;
				background-size: contain;
				width: calc((100% - 6rem) / 4);
				height: 18rem;
				padding: 3.7rem 1rem 1rem;
				position: relative;
				margin: 0 0 4rem;
			}
			.showroom ul.wrap li .common {
				display: flex;
				justify-content: flex-start;
				align-items: stretch;
			}
			.showroom ul.wrap li h3 {
				position: absolute;
				top: -1rem;
				left: 50%;
				transform: translateX(-50%);
				color: #ab8027;
				text-align: center;
				width: 100%;
				line-height: 1.3;
			}
			.showroom ul.wrap li h3.up {
				top: -1.7rem;
			}
			.showroom ul.wrap li .common .detail {
				padding: 0 0 0 1rem;
				display: flex;
				flex-direction: column;
				flex: 1;
			}
			.showroom ul.wrap li .common .detail p.address {
				font-size: 1.2rem;
				line-height: 1.5;
				color: #274F60;
				text-align: left;
			}
			.showroom ul.wrap li .common .detail p.address.small {
				font-size: 1.1rem;
			}
			.showroom ul.wrap li .common .detail p.address span {
				font-size: 1.8rem;
				font-weight: 600;
				line-height: 1.5;
			}
			.showroom ul.wrap li .common .detail p.btn {
				margin-top: auto;
				display: block;
				width: 13.3rem;
			}
			.showroom ul.wrap li .common .detail p.btn a {
				text-align: center;
				background-color: #ab8027;
				color: #fff;
				display: block;
				padding: 1rem;
				border-radius: .5rem;
				position: relative;
				line-height: 1;
			}
			.showroom ul.wrap li .common .detail p.btn a:hover {
				opacity: 0.8;
			}
			.showroom ul.wrap li .common .detail p.btn a:after {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-left: .7rem solid #fff;
				border-top: .7rem solid transparent;
				border-bottom: .7rem solid transparent;
				top: 50%;
				right: .7rem;
				transform: translateY(-50%);
			}
			
			.topbtn img {
				width: 5.5rem;
				padding: 0rem 0 4rem;
			}
			footer .inner {
				width: 120rem;
				margin: 0 auto;
			}
			
		}

				@media screen and (max-width:350px) {
					header .logo {
						width: 18rem;
					}
					header a {
						font-size: 1rem;
						
					}
				}