/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

br.small {
	display: inline;
}
br.large {
	display: none;
}
img.small {
	display: block;
}
img.large {
	display: none;
}



/* --------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------- */

div#page {
	padding-top: 60px;
}
nav#navi-fix {
	display: block;
	position: fixed;
	width: 100%;
	height: 60px;
	left: 0px;
	bottom: 0px;
	z-index: 10;
	transition: 0.375s transform ease;
	transform: translateY(60px);
}
div.scroll nav#navi-fix {
	transform: translateY(0px);
}
nav#navi-fix ul,
nav#navi-fix ul li a {
	display: flex;
	flex-wrap: wrap;
}
nav#navi-fix ul li {
	width: 50%;
	font-weight: 500;
}
nav#navi-fix ul li a {
	position: relative;
	justify-content: center;
	align-items: center;
	height: 60px;
	color: #ffffff;
	background-color: #6c9592;
	transition: 0.375s background-color ease;
}
nav#navi-fix ul li a:hover {
	background-color: #1b191a;
}
nav#navi-fix ul li:not(:last-child) a::before {
	position: absolute;
	width: 0px;
	height: 40px;
	right: 0px;
	top: 10px;
	border-right: 1px solid #ffffff;
	content: "";
}
nav#navi-fix ul li i {
	display: block;
}
nav#navi-fix ul li i.icon {
	font-size: 1.875rem;
	margin-right: 10px;
}
nav#navi-fix ul li i.label {
	transform: translateY(-1px);
}
p:where(.button-default, .button-application, .button-line) {
	display: block;
}
p:where(.button-default, .button-application, .button-line) a {
	width: 100%;
}
p.button-back {
	margin-top: 60px;
}

/* home
-------------------------------------------------------------------------------- */

body.home div#page {
	padding-top: 0px;
}



/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */

header#header *#logo {
	height: 60px;
	padding-left: 15px;
}
body.admin-bar header#header *#logo {
	top: 0px;
}
header#header *#logo img {
	width: calc(172px * 0.6875);
}
header#header p#button-menu {
	right: 0px;
	top: 0px;
}
body.admin-bar header#header p#button-menu {
	top: 0px;
}
header#header p#button-menu i {
	width: 24px;
	left: calc(50% - 12px);
}
header#header p#button-menu i:nth-child(1) {
	transform: translateY(-8px);
}
header#header p#button-menu i:nth-child(2) {
	transform: translateY(8px);
}
header#header p.button-contact {
	width: 60px;
	right: 60px;
	top: 10px;
}
body.admin-bar header#header p.button-contact {
	top: 10px;
}
header#header p.button-contact i.label {
	display: none;
}
header#header div#menu {
	height: calc(100% - 60px);
	top: 60px;
	transform: translateX(100%);
}
body.admin-bar header#header div#menu {
	top: 60px;
}
div.menu-header header#header div#menu {
	transform: translateX(0%);
}
header#header div#menu div.inner-menu {
	display: block;
	width: auto;
	padding: 40px 0px;
}
header#header div#menu div.information {
	display: none;
}
header#header div#menu nav#navi {
	width: auto;
}
header#header div#menu nav#navi :where(div.list, p.privacy-policy) {
	margin-bottom: 60px;
}
header#header div#menu nav#navi div.list {
	display: block;
}
header#header div#menu nav#navi div.list div.row:not(:last-child) {
	margin-bottom: 10px;
}
header#header div#menu nav#navi div.list div.row:nth-child(1) {
	width: auto;
}
header#header div#menu nav#navi div.list div.row:nth-child(2) {
	width: auto;
}
header#header div#menu nav#navi div.list div.row:nth-child(3) {
	width: auto;
}
header#header div#menu nav#navi div.list div.row:nth-child(4) {
	width: auto;
}
header#header div#menu nav#navi div.list div.row ul li,
header#header div#menu nav#navi p.privacy-policy,
header#header div#menu div.sns {
	transition: 0.625s opacity ease-in-out, 0.625s transform ease;
	opacity: 0;
	transform: translateY(10px);
}
div.menu-header header#header div#menu nav#navi div.list div.row ul li,
div.menu-header header#header div#menu nav#navi p.privacy-policy,
div.menu-header header#header div#menu div.sns {
	opacity: 1;
	transform: translateY(0px);
}
header#header div#menu nav#navi div.list div.row ul li.home {
	transition-delay: calc(calc(0.0625s * 1) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.works {
	transition-delay: calc(calc(0.0625s * 2) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.concept-house {
	transition-delay: calc(calc(0.0625s * 3) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.single-story-house {
	transition-delay: calc(calc(0.0625s * 4) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.renovation {
	transition-delay: calc(calc(0.0625s * 5) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.concept {
	transition-delay: calc(calc(0.0625s * 6) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.event {
	transition-delay: calc(calc(0.0625s * 7) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.news {
	transition-delay: calc(calc(0.0625s * 8) + 0.125s);
}
header#header div#menu nav#navi div.list div.row ul li.company {
	transition-delay: calc(calc(0.0625s * 9) + 0.125s);
}
header#header div#menu nav#navi p.privacy-policy,
header#header div#menu div.sns {
	transition-delay: calc(calc(0.0625s * 10) + 0.125s);
}
header#header div#menu nav#navi p.privacy-policy,
header#header div#menu div.sns {
	position: static;
	right: auto;
}
header#header div#menu nav#navi p.privacy-policy {
	bottom: auto;
}
header#header div#menu nav#navi:has(div.list div.row ul li:nth-child(4)) p.privacy-policy {
	bottom: auto;
}
header#header div#menu div.sns {
	bottom: auto;
}
header#header div#background-menu {
	display: none;
}
header#header nav#navi-alternate {
	display: none;
}

/* home
-------------------------------------------------------------------------------- */

body.home header#header :where(*#logo, p.button-contact) {
	transition: 0.375s transform ease;
	transform: translateY(-60px);
}
body.home div:where(.scroll, .menu-header) header#header *#logo,
body.home div:where(.scroll, .menu-header) header#header p.button-contact {
	transform: translateY(0px);
}



/* --------------------------------------------------------------------------------
cover
-------------------------------------------------------------------------------- */

div#cover {
	aspect-ratio: 3 / 4;
	height: auto;
}
body.admin-bar div#cover {
	height: auto;
}
div#cover div.video video.large {
	display: none;
}
div#cover div.video video.small {
	display: block;
}



/* --------------------------------------------------------------------------------
title
-------------------------------------------------------------------------------- */

div#title:not(:has(p.image)) {
	padding-top: 60px;
}
div#title p.image {
	height: 420px;
}
body.admin-bar div#title p.image {
	height: 420px;
}
div#title h1 {
	width: calc(100% - 60px);
	font-size: 1.75rem;
	line-height: 2.25rem;
}
div#title:has(p.image) h1 {
	left: 30px;
}
div#title:has(p.image) h1:not(:has(span)) {
	top: 60px;
}
div#title h1:has(span) span.sub {
	font-size: 2rem;
	line-height: 2.375rem;
	margin-right: 15px;
}
div#title h1:has(span) span.main {
	font-size: 6rem;
	line-height: 5rem;
	transform: translateY(-7.5px);
}
div#title div.text {
	padding-top: 80px;
}
div#title h2 {
	font-size: 1.125rem;
	line-height: 1.625rem;
}
div#title h2 span:not(:last-child) {
	margin-left: 10px;
}



/* --------------------------------------------------------------------------------
main
-------------------------------------------------------------------------------- */

main section div.inner-section {
	width: auto;
	padding: 80px 30px;
}
div#title:not(:has(p.image)) + main section div.inner-section {
	padding-top: 60px;
}
main section header.common {
	margin-bottom: 60px;
}
main section header.common h2 {
	font-size: 1.75rem;
	line-height: 2.25rem;
}
main section header.common h3 {
	font-size: 1.25rem;
}
main h3.check {
	font-size: 1.25rem;
}
main div.list-category {
	display: block;
	margin-bottom: 60px;
}
main div.list-category p.label {
	width: auto;
	margin-bottom: 10px;
}
main div.list-category ul {
	width: auto;
}
main div.list-category:has(p.label) ul {
	width: auto;
}
main div.spec {
	display: block;
}
main div.spec p.label {
	width: auto;
	border-right: none;
	border-bottom: 1px solid #c6c5c6;
	margin-bottom: 10px;
	padding-bottom: 5px;
}
main div.spec p.body {
	width: auto;
	padding-left: 0px;
}
div.map iframe {
	height: 380px;
}
main article.common header {
	margin-bottom: 60px;
}
main article.common header p.label {
	font-size: 1.25rem;
}
main article.common header h1 {
	font-size: 1.5rem;
	line-height: 2.25rem;
}
main article.common p.headline {
	font-size: 1.125rem;
	line-height: 1.75rem;
}
main div#pager {
	margin-top: 60px;
}

/* home
-------------------------------------------------------------------------------- */

main section#home-concept div.image-text {
	display: block;
	margin-right: 0px;
}
main section#home-concept div.image-text div.text {
	width: auto;
	margin-bottom: 40px;
}
main section#home-concept div.image-text div.text h2 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
main section#home-concept div.image-text div.text h2 span:not(:last-child) {
	margin-left: 10px;
}
main section#home-concept div.image-text div.text p.button {
	position: static;
	left: auto;
	margin: 0px auto;
}
main section#home-concept div.image-text p.image {
	width: auto;
	height: 380px;
	margin: 0px -30px;
}
main section:where(#home-work, #home-renovation) div.inner-section {
	padding-bottom: 160px;
}
main section:where(#home-single-story-house, #home-concept-house) div.inner-section {
	padding-top: 0px;
}
main section:where(#home-single-story-house, #home-concept-house) p.image-main {
	height: 380px;
	margin: 0px -30px 60px -30px;
}
main section#home-single-story-house div.logo-text,
main section#home-renovation div.image-text {
	display: block;
	margin-bottom: 60px;
}
main section#home-single-story-house div.logo-text p.logo,
main section#home-renovation div.image-text p.image {
	display: none;
}
main section#home-single-story-house div.logo-text div.text,
main section#home-renovation div.image-text div.text {
	width: auto;
}
main section#home-single-story-house div.logo-text div.text h2,
main section#home-renovation div.image-text div.text h2 {
	font-size: 1.75rem;
	line-height: 2.25rem;
	margin-bottom: 60px;
}
main section#home-single-story-house div.video,
main section#home-renovation p.image-main {
	margin-bottom: 60px;
}
main section#home-renovation p.image-main {
	height: 380px;
	margin-left: -30px;
	margin-right: -30px;
}
main section#home-renovation p.image-main img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
main section#instagram div#sbi_images {
	margin: 0px -10px -10px 0px !important;
}
main section#instagram div#sb_instagram div.sbi_item {
	width: calc(50% - 10px) !important;
	margin: 0px 10px 10px 0px !important;
}

/* works
-------------------------------------------------------------------------------- */

main div.list-works {
	display: block;
	margin: 0px;
}
main div.list-works div.row {
	width: auto;
	margin: 0px;
}
main div.list-works div.row:not(:last-child) {
	margin-bottom: 40px;
}
main article.works div.image,
main article.works:has(div.spec) div.body {
	margin-bottom: 60px;
}

/* concept-house
-------------------------------------------------------------------------------- */

main div.list-concept-house {
	margin: 0px -30px;
	padding: 80px 30px;
	background-color: #dae4e4;
}
main div.list-concept-house div.row {
	display: block;
	border: none;
	background-color: #ffffff;
}
main div.list-concept-house div.row:not(:last-child) {
	margin-bottom: 20px;
}
main div.list-concept-house div.row p.image {
	width: auto;
	margin-bottom: 0px;
}
main div.list-concept-house div.row div.text {
	width: auto;
	padding: 20px 10px 10px 10px;
}
main div:where(.list-concept-house, .list-concept-house-alternate) div.row div.text div.header h3 {
	width: 150px;
}
main div:where(.list-concept-house, .list-concept-house-alternate) div.row div.text div.header h3 span.sub {
	font-size: 1.25rem;
	line-height: 1.5rem;
	margin-right: 5px;
}
main div:where(.list-concept-house, .list-concept-house-alternate) div.row div.text div.header h3 span.main {
	font-size: 3.75rem;
	line-height: 3.25rem;
}
main div:where(.list-concept-house, .list-concept-house-alternate) div.row div.text div.header p.sub {
	width: calc(100% - 150px);
}
main div.list-concept-house-alternate {
	display: block;
}
main div.list-concept-house-alternate div.row {
	width: auto;
}
main div.list-concept-house-alternate div.row:not(:last-child) {
	margin-bottom: 20px;
}
main div.list-concept-house-alternate div.row div.text {
	padding: 10px;
}
main section.concept-house header,
main section.concept-house div.summary p.description {
	margin-bottom: 60px;
}
main section.concept-house header h2 {
	font-size: 1.5rem;
	line-height: 2.25rem;
}
main section.concept-house div:where(.spec-wrapper, .feature),
main section.concept-house div:where(.detail, .feature) div.list div.row:not(:last-child),
main section.concept-house p.button-application {
	margin-bottom: 60px;
}
main section.concept-house div:where(.detail, .map) {
	margin-bottom: 80px;
}
main section#concept-house div.inner-section {
	padding-bottom: 0px;
}

/* single-story-house, renovation
-------------------------------------------------------------------------------- */

main section.single-story-house-renovation header {
	margin-bottom: 80px;
}
main section.single-story-house-renovation div:where(.summary, .proposal) {
	margin-bottom: 80px;
}
main section.single-story-house-renovation div.summary div.image-text {
	display: block;
	margin: 0px 0px 60px 0px;
}
main section.single-story-house-renovation div.summary div.image-text div.text {
	width: auto;
}
main section.single-story-house-renovation div.summary div.image-text p.image {
	width: auto;
	height: 380px;
	margin: 0px -30px 60px -30px;
}
main section.single-story-house-renovation div.summary div.image-text p.image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
main section.single-story-house-renovation div.proposal {
	padding: 60px 0px;
}
main section.single-story-house-renovation div.proposal p.description {
	text-align: justify;
	margin-bottom: 60px;
}
main section.single-story-house-renovation div.detail div.list div.row:not(:last-child) {
	margin-bottom: 60px;
}
main section#single-story-house header span.sub {
	font-size: 1.25rem;
}
main section#single-story-house header span.main {
	font-size: 4.5rem;
	line-height: 4.75rem;
}
main section#single-story-house div.summary div.image-text div.text p.logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
main section#single-story-house div.summary div.image-text div.text p.logo img {
	width: calc(272px * 0.75);
}
main section#renovation header {
	text-align: center;
}
main section#renovation header h2 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: center;
	position: relative;
}
main section#renovation header h2 span.sub {
	margin: 0px 0px 0px 5px;
}
main section#renovation header h2 span.main {
	position: static;
	right: auto;
	top: auto;
	text-align: center;
}
main section#renovation header h2 span.main i {
	display: block;
}
main section#renovation header h2 span.main i:nth-child(1) {
	font-size: 6rem;
	line-height: 5.5rem;
}
main section#renovation header h2 span.main i:nth-child(2) {
	font-size: 2.75rem;
	line-height: 2.5rem;
}
main section#renovation header h2 span.main i:nth-child(3) {
	font-size: 3rem;
	line-height: 2.75rem;
}

/* concept
-------------------------------------------------------------------------------- */

main section#concept div.summary {
	margin-bottom: 80px;
}
main section#concept div.list div.row:not(:last-child) {
	margin-bottom: 80px;
}
main section#concept div.list div.row div.point-text {
	display: block;
}
main section#concept div.list div.row div.point-text p.point {
	width: calc(160px * 0.75);
	margin: 0px auto 20px auto;
}
main section#concept div.list div.row div.point-text p.point span.icon {
	height: calc(140px * 0.75);
	padding-top: calc(20px * 0.75);
}
main section#concept div.list div.row div.point-text p.point span.icon img {
	width: calc(93px * 0.75);
}
main section#concept div.list div.row div.point-text p.point span.text {
	font-size: 1.125rem;
}
main section#concept div.list div.row div.point-text div.text {
	width: auto;
}

/* event
-------------------------------------------------------------------------------- */

main div.list-event {
	display: block;
	margin: 0px;
}
main div.list-event div.row {
	width: auto;
	margin: 0px;
}
main div.list-event div.row:not(:last-child) {
	margin-bottom: 60px;
}
main div.list-event div.row p.image {
	margin-bottom: 10px;
}
main div.list-event div.row h3 {
	line-height: 1.75rem;
	margin-bottom: 0px;
}
main div.list-event div.row :where(p.headline, div.category, p.date, p.summary-01, p.summary-02) {
	display: none;
}

/* news
-------------------------------------------------------------------------------- */

main div.list-news {
	display: block;
	margin: 0px;
}
main div.list-news div.row {
	width: auto;
	margin: 0px;
}
main div.list-news div.row:not(:last-child) {
	margin-bottom: 40px;
}

/* company
-------------------------------------------------------------------------------- */

main section#company :where(div.message, div.outline, div.history) {
	margin-bottom: 80px;
}
main section#company div.message p.image-main {
	margin-bottom: 60px;
}
main section#company div:where(.message, .history) h2 {
	font-size: 1.25rem;
}
main section#company div.message h3 {
	margin-right: -30px;
}
main section#company div.outline div.list {
	margin-bottom: 60px;
}
main section#company div:where(.outline, .history) div.list div.row {
	display: block;
	border-bottom: 1px solid #c6c5c6;
	padding: 20px 0px;
}
main section#company div:where(.outline, .history) div.list div.row:first-child {
	border-top: 1px solid #c6c5c6;
}
main section#company div:where(.outline, .history) div.list div.row:not(:last-child) {
	margin-bottom: 0px;
}
main section#company div:where(.outline, .history) div.list div.row p.label {
	width: auto;
	margin-bottom: 10px;
}
main section#company div:where(.outline, .history) div.list div.row p.body {
	width: auto;
}
main section#company div.outline div.image-text {
	display: block;
}
main section#company div.outline div.image-text p.image {
	width: auto;
	max-width: 240px;
	margin: 0px auto 40px auto;
}
main section#company div.outline div.image-text div.text {
	width: auto;
}

/* form
-------------------------------------------------------------------------------- */

main section.form div.header {
	margin-bottom: 60px;
}
main section.form div.header div.tel-button-line {
	display: block;
}
main section.form div.header div.tel {
	margin: 0px 0px 20px 0px;
}
main section.form div.header div.tel p.number span.sub {
	font-size: 1.25rem;
}
main section.form div.header div.tel p.number span.main {
	font-size: 1.75rem;
}
main section.form div.header p.button-line {
	justify-content: flex-start;
	font-size: 1rem;
}
main section.form div.header p.button-line a {
	width: 320px;
	height: 70px;
	padding-left: 70px;
}
main section.form div.header p.button-line i.icon {
	top: calc(50% - 1.25rem);
	font-size: 2.5rem;
}
main section.form div.form div.component-wrapper {
	margin-bottom: 60px;
}
main section.form div.form div.component {
	display: block;
	padding: 20px 0px;
}
main section.form div.form div.component p.label {
	width: auto;
	height: auto;
	margin-bottom: 10px;
}
main section.form div.form div.component div.body {
	width: auto;
}
main section.form div.form div.agreement {
	margin-bottom: 60px;
}
main section.form div.form div.action {
	display: block;
}
main section.form div.form div.action :where(input:where([type=button], [type=submit]), button) {
	margin: 0px 20px;
}
main section.form div.form div.action :where(input:where([type=button], [type=submit]), button):not(:last-child) {
	margin-bottom: 20px;
}


/* privacy-policy
-------------------------------------------------------------------------------- */

main section#privacy-policy div.list div.row:not(:last-child) {
	margin-bottom: 60px;
}



/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */

footer#footer div.inner-footer {
	display: block;
	width: auto;
	padding: 40px 30px 100px 30px;
}
footer#footer nav#navi-footer {
	width: auto;
}
footer#footer nav#navi-footer div.list div.row:not(:last-child) {
	margin-bottom: 10px;
}
footer#footer nav#navi-footer div.list div.row:nth-child(1) {
	width: 100%;
}
footer#footer nav#navi-footer div.list div.row:nth-child(2) {
	width: 60%;
}
footer#footer nav#navi-footer div.list div.row:nth-child(3) {
	width: 40%;
}
footer#footer nav#navi-footer div.misc {
	margin-bottom: 40px;
	padding-left: 0px;
}
footer#footer div.sns {
	position: absolute;
	width: auto;
	transform: translate(160px, -100px);
	text-align: left;
}
footer#footer div.sns ul {
	display: flex;
}
footer#footer div.sns ul li:not(:last-child) {
	margin: 0px 20px 0px 0px;
}
footer#footer div.information p.logo {
	margin-bottom: 20px;
}
footer#footer div.information {
	width: auto;
}