@charset "UTF-8";
/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2012/09/25
 */

/* save tabel
------------------------------------------------------------------*/
table.save{
	width:100%;
	margin:0 0 15px 0;
	border:1px solid #ccc;
}
table.save th,
table.save td{
	padding:5px 10px;
	border-bottom:1px dotted #ccc;
	vertical-align: middle;
}
table.save td.text{
	font-weight: bold;
}
table.save td.copy{
	width: 50px;	
}
table.save td.del{
	width: 50px;	
}

/* other
------------------------------------------------------------------*/
.ul_indent{
	list-style: none outside none;
	padding: 0px;
	margin-bottom: 1em;
	font-size: 100%;
}
.ul_indent li{
	padding-left: 1em;
	text-indent: -1em;
}

.col3img { display: flex; justify-content: space-between; align-items: flex-start; }
.col3img > div { text-align: center; }
.col3img > div img { width: 208px; margin-bottom: 5px; }
.col3img .arrow { margin-top: 66px; }
.col3img .arrow::after {
	content: "";
	display: block;
	width: 0px; height: 0px; line-height: 0px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 16px solid #842c37;
	border-right: 0px;
}

.loclaNavi ul li { font-size: inherit; line-height: inherit; }

.bold { font-weight: bold; }
.bold a { font-weight: bold; }
.bold.c01 a { color: inherit; }

h1.type01 { color: #842c37 !important; font-size: 146.5% !important; line-height: 1.5 !important; margin: 20px 0px 20px 0px !important; }
.spNavi {
	margin-bottom: 60px;
	em {
		display: block; margin-bottom: 15px;
	}
	ul {
		display: flex; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc;
		li {
			display: block; flex-basis: 50%; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
			a { display: flex; align-items: center; justify-content: center; height: 44px; font-size: 12px; line-height: 1.5; text-decoration: none; }
			&.current {
				a { color: #ffffff; background-color: #842c37; }
			}
		}
	}
}

#gContainer.newMyRoomDesign {
	position: relative;
	#gBgVideo {
		position: absolute; width: 100%; height: 540px; overflow: hidden;
		video { height: 100%; margin-left: calc(-1 * (1920px - 100%) / 2); }
	}
	#gContainerInner {
		width: fit-content; min-width: 950px; max-width: min(1200px, 100%); box-sizing: border-box; padding: 0px;
		#gMainBody {
			width: 100%;
			.contentHeader {
				height: 540px; position: relative;
				h1 { color: #ffffff; padding-top: 80px; margin-bottom: 15px; }
				p { color: #ffffff; width: 725px; padding: 0px; margin: 0px 0px 22px 0px; line-height: 1.5; }
				& > * { margin-bottom: 20px; }
				@media (max-width: 1239px) {
					padding: 0px 20px;
				}
			}
			.imagePanel {
				width: 396px; background-color: #ffffff; padding: 15px 15px 10px 15px; margin: 0px; border-radius: 10px;
				position: absolute; bottom: 20px; right: 40px;
				.flex {
					display: flex;
					& > div { width: 50%; }
				}
				img { display: block; width: 198px; aspect-ratio: 396 / 516; }
				span { display: block; text-align: center; }
			}
			.w725 { width: 725px; }
			.spNavi {
				margin: 30px 0px;
				em { display: none; }
			}
			.cIndex {
				p {
					position: relative; margin: 0px; transition: margin 150ms ease-out;
					.toggleButton {
						text-decoration: none;
						position: absolute; right: 0px; cursor: pointer;
						&::before { content: "＋"; font-weight: bold; }
					}
				}
				ol { display: none; }
				&.open {
					.toggleButton::before { content: "－"; }
					p { margin-bottom: 20px; }
					ol { display: block; }
				}
			}
			#aboutMyRoom + div {
				.col3img {
					display: grid; grid-template-columns: 1fr 1fr 1fr;
					div {
						text-align: left; padding: 10px;
						&:nth-child(1) { background-color: #f5f5f5; }
						&:nth-child(2) { background-color: #ebebeb; }
						&:nth-child(3) { background-color: #dedede; }
					}
					em { display: block; color: #842c37; font-weight: bold; }
					span { display: block; }
					img { width: 100%; height: auto; aspect-ratio: 572 / 358; }
				}
			}
			#tryMyRoom + div,
			#newRoom + div {
				line-height: 1.8;
				.flex {
					display: flex; gap: 20px;
					hr { margin: 10px 0px !important; }
					video { width: 537px !important; height: auto; aspect-ratio: 1920 / 1080; }
					div:nth-child(2) { background-color: #f5f5f5; padding: 15px; }
					.ico_check { display: inline-block; width: 23px; height: 17px; margin-right: 5px; }
					.orange { color: #e08023; }
					button {
						width: 300px; color: #ffffff; background-color: #e08023; border: none; border-radius: 18px; box-shadow: 0px 4px 0px #c66e22;
						font-size: 112%; font-weight: bold; text-decoration: none; text-align: left;
						padding: 12px 18px; cursor: pointer;
						position: relative;
						&::after {
							content: "";
							position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
							width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='white'/%3E%3Cpath d='M17 12 L25 20 L17 28' stroke='%23d97d1f' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
						}
					}
				}
			}
			#newRoom + div video { aspect-ratio: 1944 / 1080; }
			#launchGuide { border-top: none; }
			#launchGuide + div {
				.flex {
					display: flex; justify-content: space-around;
					& > div {
						& > img { display: block; width: 402px; max-width: 100%; height: 280px; }
						em { display: inline-block; color: #842c37; border-bottom: 1px solid #842c37; padding-bottom: 3px; margin-bottom: 15px; }
						.box {
							display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 455px; padding: 15px;
							border: 1px solid gray; border-radius: 10px;
							div {
								flex-grow: 1;
								a:nth-child(1) { display: block; font-size: 90%; }
								a:nth-child(2) { display: block; color: #842c37; margin-top: 5px; }
							}
							&::after {
								content: ""; display: block; width: 12px; height: 12px; margin-right: 5px;
								border-top: 1px solid #842c37; border-right: 1px solid #842c37; transform: rotate(45deg);
							}
						}
					}
				}
			}
			#savedList { border-bottom: 1px solid #555555; margin-bottom: 20px; }
			#savedListDiv {
				.grid {
					display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px;
					#createNewButton2 {
						display: flex; align-items: center; border: 1px solid #3b3b3b; border-radius: 5px; padding: 15px 15px 15px 100px; min-height: 70px; position: relative; cursor: pointer;
						&::before { content: ""; width: 6px; height: 60px; background-color: #9a9a9a; position: absolute; top: calc(50% - 30px); left: 47px; }
						&::after { content: ""; width: 60px; height: 6px; background-color: #9a9a9a; position: absolute; top: calc(50% - 3px); left: 20px; }
					}
					& > div {
						border: 1px solid #3b3b3b; border-radius: 5px; padding: 15px;
						.editButton { display: inline-block; cursor: pointer; margin-bottom: 10px; }
						.copyButton {
							padding: 5px 10px; background-color: transparent; border: 1px solid #3b3b3b; cursor: pointer;
							img { width: 21px; height: 24px; margin-right: 5px; }
						}
						.deleteButton {
							display: inline-block; padding: 5px 10px; cursor: pointer;
							img { width: 15px; height: 17px; }
						}
					}
				}
			}
			#usageGuide + div {
				.flex {
					display: flex; gap: 40px; justify-content: space-around;
					& > a {
						display: flex; gap: 15px; text-decoration: none;
						&:hover { text-decoration: underline; }
						img { width: 237px; height: auto; aspect-ratio: 474 / 264; }
						div {
							display: flex; flex-direction: column;
							em { display: inline-block; font-weight: normal; margin-bottom: 8px; }
							span:nth-of-type(1) { font-size: 80%; }
							span:nth-of-type(2) { display: inline-block; margin-top: 15px; }
						}
					}
				}
			}
			#useCase + div {
				.case {
					display: flex; gap: 50px; margin-bottom: 30px;
					.image, .photo {
						max-width: calc((100% - 134px) / 2);
						a, img, span { display: block; }
						img { width: 520px; max-width: 100%; height: auto; aspect-ratio: 1040 / 650; }
					}
					.arrow {
						display: flex; align-items: center; justify-content: center;
						&::after {
							content: ""; width: 0px; height: 0px; font-size: 0px; line-height: 0;
							border-width: 82px 0px 82px 34px;
							border-style: solid;
							border-color: transparent transparent transparent #f3e9e7;
						}
					}
				}
			}
			#coordinateService + div {
				.flex {
					display: flex; gap: 40px; margin-bottom: 20px;
					.image {
						width: 420px;
						img { width: 100%; height: auto; aspect-ratio: 836 / 522; }
					}
				}
			}
			#faq {
				position: relative;
				.qalist { position: absolute; right: 0px; }
			}
			#faq + div {
				details {
					background-color: #f5f5f5; padding: 30px 40px 30px 30px; margin-bottom: 15px;
					summary {
						display: flex; list-style: none; padding: 0px; margin: 0px; position: relative; transition: margin 150ms ease-out; cursor: pointer;
						&::-webkit-details-marker { display: none; }
						&::before { content: "Q"; display: inline-block; width: 50px; color: #842c37; font-weight: bold; }
						&::after { content: "＋"; font-weight: bold; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); }
					}
					p {
						display: flex; padding: 0px; margin: 0px;
						&::before { content: "A"; display: inline-block; width: 50px; color: #842c37; font-weight: bold; }
					}
					&[open] summary {
						margin-bottom: 10px;
						&::after { content: "－"; }
					}
				}
			}
			#idealDiv {
				background-color: #f3e9e7; padding: 30px;
				.grid {
					display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "texts image" "buttons image";
					.texts {
						grid-area: texts;
						.subtitle {}
						.title { font-size: 139%; }
					}
					.buttons {
						display: flex; flex-direction: column; gap: 20px; grid-area: buttons;
					}
					.image {
						grid-area: image;
						img { width: 327px; max-width: 100%; aspect-ratio: 654 / 466; }
					}
				}
			}
			#createNewFromSampleButtonTop, #createNewFromSampleButtonBottom {
				display: block; width: 300px; color: #ffffff; background-color: #e08023; border: none; border-radius: 18px; box-shadow: 0px 4px 0px #c66e22;
				font-size: 112%; font-weight: normal; text-decoration: none; text-align: left;
				padding: 12px 18px; cursor: pointer;
				position: relative;
				&::after {
					content: "";
					position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
					width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='white'/%3E%3Cpath d='M17 12 L25 20 L17 28' stroke='%23d97d1f' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
				}
			}
			#newOrSavedButtonTop, #newOrSavedButtonBottom {
				display: block; box-sizing: border-box; width: 300px; color: #e08023; background-color: #ffffff; border: none; border-radius: 18px; box-shadow: 0px 4px 0px #c66e22;
				font-size: 112%; font-weight: normal; text-decoration: none; text-align: left;
				padding: 12px 18px; cursor: pointer;
				position: relative;
				&::after {
					content: "";
					position: absolute; right: 18px; top: 50%;
					width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23d97d1f'/%3E%3Cpath d='M17 12 L25 20 L17 28' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
				}
			}
			#newOrSavedButtonTop::after { transform: translateY(-50%) rotate(90deg); }
			#newOrSavedButtonBottom::after { transform: translateY(-50%) rotate(-90deg); }
		}
	}
}