@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
article {
	background-color: #E6E6E6;
}

sup {
	color: #000;
}

ul.star li span {
	color: #000;
}

.font-large {
	font-size: 1.1em;
}

.bg-white {
	background-color: #fff;
}

.color-bk {
	color: #000;
}

.bdr-gray {
	border: solid 1px #707070;
}

/* スクロールアニメ */
.scroll-in-delay {
	transition-property: all;
	transition-duration: 1.0s;
	transition-delay: .5s;
	transition-timing-function: ease;
	opacity: 0;
}

.scroll-in-delay.delay-after {
	transition-delay: 2s;
}

.scroll-in-delay-parent.passed .scroll-in-delay {
	opacity: 1;
}

/* サブセクション */
.sub-section .base-width::before {
	background-image: url(images/num01.svg);
}

#sub02 .base-width::before {
	background-image: url(images/num02.svg);
}

#sub03 .base-width::before {
	background-image: url(images/num03.svg);
}

#sub04 .base-width::before {
	background-image: url(images/num04.svg);
}

.bdr-b {
	padding-bottom: .2em;
	border-bottom: solid 3px #CBAF5C;
}

_:-ms-input-placeholder,
:root .bdr-b {
	padding-bottom: 0;
	line-height: 2.8;
}

.pos-relative {
	position: relative;
}

.photo-frame figcaption {
	font-size: 1.2rem;
	margin-top: .5em;
}

/* 製品セクション */
.product-section {
	background-color: #F0F0F0;
}

/* Room Clipコラム */
.roomclip-column {
	background-color: #eee;
}

.comparison-wrap {
	border: solid 8px #fff
}

.user-name {
	display: inline-block;
	border-bottom: solid 2px #CBAF5C;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	#globalPageTitle {
		border-bottom: solid 1px #d9d9d9;
	}

	/*  メインビジュアル  */
	#mainVisual .swiper-container {
		display: none;
	}

	.mv-title-container {
		padding: 3rem 0 0;
		background-color: #fff;
		text-align: center;
	}

	.mv-copy {
		margin-bottom: .5em;
		font-size: 1.6rem;
	}

	.mv-title {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.mv-img {
		margin-top: 3rem;
	}

	.roomclip-sp {
		max-width: 260px;
		margin: 0 auto 4rem;
	}

	/* RoomClipバナー */
	#roomClip {
		margin: 6rem auto 0;
	}

	/* メインセクション */
	.main-section {
		padding: 3rem 0 7rem;
	}

	.main-title {
		margin-bottom: 2rem;
		font-size: 1.8rem;
	}

	.main-text {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.profile-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 320px;
		margin: 4rem auto 0;
		font-size: 1.2rem;
		line-height: 1.4;
	}

	.profile-container .photo {
		width: 100px;
		margin-right: 15px;
	}

	.profile-container .profile {
		flex: 1;
	}

	/* サブセクション */
	.sub-section {
		padding: 0 0 6rem;
	}

	.sub-section .base-width {
		padding-top: 14rem;
		position: relative;
	}

	.sub-section .base-width::after {
		content: '';
		display: block;
		width: 90%;
		border-top: solid 1px #000;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.sub-section .base-width::before {
		content: '';
		display: block;
		width: 100%;
		height: 60px;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: auto 100%;
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.sub-title {
		margin-bottom: 4rem;
		font-size: 1.8rem;
		line-height: 2.2;
		text-align: center;
	}

	.text-container {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.photo-frame img {
		border: solid 6px #fff;
	}

	.photo-frame {
		margin-top: 3rem;
	}

	/* 特長セクション */
	.feature-section {
		padding-bottom: 6rem;
	}

	.feature-section .base-width {
		padding-top: 6rem;
		position: relative;
	}

	.feature-section .base-width::before {
		content: '';
		display: block;
		width: 90%;
		border-top: solid 1px #000;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.feature-title {
		margin-bottom: 6rem;
		font-size: 1.8rem;
		line-height: 2.2;
		text-align: center;
	}

	#features .flex-item {
		margin-top: 5rem;
		font-size: 1.4rem;
		line-height: 1.8;
	}

	#features .flex-item:first-child {
		margin-top: 0;
	}

	#features .ttl {
		margin: 1.4em 0 .6em;
		font-size: 1.6rem;
		line-height: 1.5;
	}

	/* 製品セクション */
	.product-section {
		padding: 6rem 0 6rem;
	}

	.product-title {
		margin-bottom: 4rem;
		font-size: 1.8rem;
		text-align: center;
	}

	#products .flex-container {
		justify-content: space-between;
	}

	.prod-item {
		width: 50%;
		padding-top: 70%;
		background-image: url(images/sjmf46h.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
		text-align: center;
		position: relative;
	}

	.prod-item:last-child {
		background-image: url(images/sjmw46h.jpg);
	}

	.prod-ttl {
		display: none;
	}

	.prod-name {
		font-size: 1.8rem;
	}

	.prod-info {
		margin: .5em 0 1em;
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.btn-arrow {
		margin: 0 5%;
		font-size: 1.4rem;
	}

	/* スライダー */
	#slider1 {
		margin-top: 4rem;
		padding: 0 5%;
	}

	.swiper-slide img {
		border: solid 6px #fff;
	}

	.swiper-pagination {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 20px 0;
		position: relative;
	}

	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 5px;
		background: #000;
		border-radius: 50%;
	}

	.slide-text {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	/* 個別スタイル */
	#sub03 .sub-title {
		margin-bottom: 2rem;
	}

	#sub03 .sub-title-wrap {
		margin-bottom: 4rem;
	}

	#sub03-1 {
		width: 60%;
		margin: 3rem auto 0;
	}

	#sub03-2 {
		margin: 3rem auto 0;
	}

	#sub04-1 {
		width: 80%;
		margin: 3rem auto 0;
	}

	/* Room Clipコラム */
	.line-bk {
		margin: 4rem 0;
	}

	.roomclip-column {
		padding: 3rem 5%;
		margin-top: 4rem;
	}

	.roomclip-column-header {
		text-align: center;
	}

	.roomclip-column-logo {
		display: inline-block;
		margin-bottom: 1em;
	}

	.roomclip-column-logo img {
		width: 180px;
		vertical-align: bottom;
	}

	.roomclip-column-logo .logo-text {
		margin-left: .5em;
		font-size: 1.4rem;
	}

	.roomclip-column-title {
		margin-bottom: 3rem;
		font-size: 1.8rem;
	}

	.roomclip-column-check {
		font-size: 1.5rem;
	}

	.roomclip-column-item {
		margin-top: 3rem;
	}

	.comparison-caption {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	.user-comment-container {
		margin-top: 3rem;
		font-size: 1.4rem;
	}

	.user-name {
		margin-bottom: .5em;
		font-size: 1.6rem;
	}

	.link-block {
		padding: 6rem 0 4rem;
	}

	.link-block .bdr-gray {
		width: 90%;
		margin: 0 auto;
	}
}

/* ====================================
	768px以上1023以下専用スタイル
===================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {

	/* Room Clipコラム */
	.roomclip-column-container {
		display: flex;
		justify-content: space-between;
		width: 600px;
	}

	.roomclip-column-item {
		width: 280px;
	}

}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	.pc-tr {
		text-align: right;
	}

	/* メインビジュアル */
	#mainVisual {
		height: 700px;
		overflow: hidden;
		position: relative;
	}

	#mainVisual .swiper-slide,
	#mainVisual .swiper-wrapper,
	#mainVisual .visual {
		width: 1920px;
		height: 100%;
	}

	#mainVisual .visual {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
	}

	#mainVisual .visual1 {
		background-image: url(images/main-visual01.jpg);
	}

	#mainVisual .visual2 {
		background-image: url(images/main-visual02.jpg);
	}

	#mainVisual .visual3 {
		background-image: url(images/main-visual03.jpg);
	}

	#mainVisual .swiper-slide,
	#mainVisual .swiper-wrapper,
	#mainVisual .visual {
		width: 1920px;
		height: 700px;
	}

	#mainVisual .visual figure {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}

	.mv-title-container {
		display: none;
	}

	.mv-roomclip {
		width: 300px;
		position: absolute;
		top: 260px;
		left: 50%;
		transform: translate(-505px, 0);
	}

	/* RoomClipバナー */
	#roomClip {
		width: 700px;
		margin: 10rem auto 0;
	}

	.roomclip-sp {
		display: none;
	}

	/* メインセクション */
	.main-section {
		padding: 8rem 0 10rem;
	}

	.main-title {
		margin-bottom: 8rem;
		font-size: 2.8rem;
		text-align: center;
	}

	.main-text {
		font-size: 1.7rem;
		line-height: 2.4;
		text-align: center;
	}

	.profile-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360px;
		margin: 8rem auto 0;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.profile-container .photo {
		width: 100px;
	}

	.profile-container .profile {
		width: 220px;
	}

	/* サブセクション */
	.sub-section .base-width {
		padding-top: 220px;
		border-top: solid 1px #000;
		position: relative;
	}

	.sub-section .base-width::before {
		content: '';
		display: block;
		width: 100%;
		height: 180px;
		background-repeat: no-repeat;
		background-position: right top 30px;
		background-size: auto 140px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.inbox {
		padding: 0 5%;
	}

	.sub-title {
		margin-bottom: 10rem;
		font-size: 3rem;
		line-height: 2.4;
	}

	.sub-title sup {
		font-size: .6em;
	}

	.text-container {
		font-size: 1.6rem;
		line-height: 2.4;
	}

	.photo-frame img {
		border: solid 10px #fff;
	}

	/* 特長セクション */
	.feature-section {
		padding: 0 0 12rem;
	}

	.feature-section .base-width {
		padding: 12rem 0 0;
		border-top: solid 1px #000;
	}

	.feature-title {
		margin-bottom: 12rem;
		font-size: 2.8rem;
		text-align: center;
	}

	#features .flex-item {
		margin-top: 8rem;
		font-size: 1.4rem;
		line-height: 1.7;
	}

	#features .flex-item:nth-child(-n+2) {
		margin-top: 0;
	}

	#features .ttl {
		margin: 1.4em 0 .6em;
		font-size: 1.28em;
	}

	/* 製品セクション */
	.product-section {
		padding: 10rem 0 8rem;
	}

	.product-title {
		margin-bottom: 11rem;
		font-size: 2.4rem;
		text-align: center;
	}

	#products .flex-container {
		width: 82%;
		margin: 0 auto;
	}

	.prod-item {
		width: 47%;
		padding-top: 70%;
		background-image: url(images/sjmf46h.jpg);
		background-repeat: no-repeat;
		background-position: left -10vw bottom;
		background-size: 100% auto;
		position: relative;
	}

	.prod-item:last-child {
		background-image: url(images/sjmw46h.jpg);
	}

	.prod-ttl {
		font-size: 1.8rem;
		position: absolute;
		top: 0;
		left: 0;
	}

	.prod-text-container {
		position: absolute;
		bottom: 14%;
		right: 5%;
	}

	.prod-name {
		font-size: 2rem;
	}

	.prod-info {
		margin: .5em 0 1em;
		font-size: 1.6rem;
		line-height: 1.7;
	}

	.btn-arrow {
		width: 150px;
		font-size: 1.4rem;
	}

	/* スライダー */
	#slider1 {
		margin-top: 10rem;
	}

	#slider1 .swiper-slide img {
		border: solid 8px #fff;
	}

	#slider1 .slider-next,
	#slider1 .slider-prev {
		width: 60px;
		padding-top: 60px;
		background-color: rgba(255, 255, 255, 0.8);
		background-size: auto 40%;
		background-position: center;
		background-repeat: no-repeat;
		border: solid 1px #D9D9D9;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(0, -50%);
		z-index: 2;
		cursor: pointer;
	}

	#slider1 .slider-prev {
		background-image: url(/products/common/images/chevron-left-solid.svg);
		margin-left: calc(-23% - 30px);
	}

	#slider1 .slider-next {
		background-image: url(/products/common/images/chevron-right-solid.svg);
		margin-left: calc(23% - 30px);
	}

	#slider1 .swiper-pagination {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 20px 0;
		position: relative;
	}

	#slider1 .swiper-pagination-bullet {
		width: 14px;
		height: 14px;
		margin: 0 5px;
		background: #000;
		border-radius: 50%;
	}

	#slider1 .slide-text {
		margin-top: .5em;
		font-size: 1.3rem;
		opacity: 0;
	}

	#slider1 .swiper-slide-active .slide-text {
		opacity: 1;
	}

	/* 個別スタイル */
	#sub01 {
		padding-bottom: 14rem;
	}

	#sub01 .pos-relative {
		padding-bottom: 16%;
	}

	#sub01-1 {
		width: 73.4%;
		margin-top: 10rem;
	}

	#sub01-2 {
		width: 45%;
		text-align: right;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	#sub02 {
		padding-bottom: 16rem;
	}

	#sub02 .sub-title {
		text-align: center;
	}

	#sub03 {
		padding-bottom: 16rem;
	}

	#sub03 .sub-title-wrap {
		margin-bottom: 10rem;
	}

	#sub03 .sub-title {
		display: inline-block;
		margin-bottom: 1rem;
		text-align: left;
	}

	#sub03 .flex-container {
		justify-content: space-between;
	}

	#sub03 .flex-item:first-child {
		width: 43.6%;
		padding-top: 2%;
		order: 1;
	}

	#sub03 .flex-item:last-child {
		display: flex;
		align-items: flex-end;
		width: 47%;
		order: 0;
	}

	#sub03-2 {
		margin: 4rem auto 0;
	}

	#sub04 {
		padding: 0 0 20rem;
	}

	#sub04 .inbox {
		padding-bottom: 42%;
		position: relative;
	}

	#sub04 .text-container {
		width: 50%;
	}

	#sub04-1 {
		width: 35%;
		position: absolute;
		right: 9%;
		top: 260px;
	}

	#sub04-2 {
		width: 46%;
		position: absolute;
		left: 12.5%;
		bottom: 0;
	}

	/* Room Clipコラム */
	.line-bk {
		margin: 6rem 0;
	}

	.roomclip-column {
		padding: 6rem 5%;
		margin-top: 10rem;
	}

	.roomclip-column-header {
		text-align: center;
	}

	.roomclip-column-logo {
		display: inline-block;
		margin-bottom: 1em;
	}

	.roomclip-column-logo img {
		width: 340px;
		vertical-align: bottom;
	}

	.roomclip-column-logo .logo-text {
		margin-left: .5em;
		font-size: 2rem;
	}

	.roomclip-column-title {
		margin-bottom: 4rem;
		font-size: 2.4rem;
	}

	.roomclip-column-check {
		font-size: 1.6rem;
	}

	.roomclip-column-container {
		margin-top: 4rem;
	}

	.comparison-caption {
		margin-top: .5em;
		font-size: 1.2rem;
		text-align: right;
	}

	.user-comment-container {
		margin-top: 2rem;
		font-size: 1.4rem;
	}

	.user-name {
		margin-bottom: .8em;
		font-size: 1.6rem;
	}

	.link-block {
		padding: 8rem 0 4rem;
	}
}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {

	/* メインビジュアル */
	#mainVisual {
		height: 600px;
	}

	#mainVisual .swiper-slide,
	#mainVisual .swiper-wrapper,
	#mainVisual .visual {
		width: 1646px;
	}

	.mv-roomclip {
		width: 270px;
		position: absolute;
		top: 230px;
		left: 50%;
		transform: translate(-435px, 0);
	}

	.roomclip-column-container {
		display: flex;
		justify-content: space-between;
		width: 780px;
	}

	.roomclip-column-item {
		width: 360px;
	}

}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {

	/* 製品セクション */
	#products .flex-container {
		width: 980px;
	}

	.prod-item {
		padding-top: 690px;
		background-position: left -130px bottom;
	}

	.prod-text-container {
		bottom: 90px;
		right: 30px;
	}

	.roomclip-column-container {
		display: flex;
		justify-content: space-between;
	}

	.roomclip-column-item {
		width: 47%;
	}

}