/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; }

/* Document */
/* ============================================ */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Remove gray overlay on links for iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ }

/* Sections */
/* ============================================ */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/* Vertical rhythm */
/* ============================================ */
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; }

/* Headings */
/* ============================================ */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }

/* Lists (enumeration) */
/* ============================================ */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Lists (definition) */
/* ============================================ */
dt { font-weight: bold; }

dd { margin-left: 0; }

/* Grouping content */
/* ============================================ */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border-top-width: 1px; margin: 0; clear: both; color: inherit; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

address { font-style: inherit; }

/* Text-level semantics */
/* ============================================ */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; text-decoration: none; color: inherit; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Replaced content */
/* ============================================ */
/** Prevent vertical alignment issues. */
svg, img, embed, object, iframe { vertical-align: bottom; }

/* Forms */
/* ============================================ */
/** Reset form fields to make them styleable. 1. Make form elements stylable across systems iOS especially. 2. Inherit text-transform from parent. */
button, input, optgroup, select, textarea { -webkit-appearance: none; /* 1 */ appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; /* 2 */ }

/** Correct cursors for clickable elements. */
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }

button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default; }

/** Improve outlines for Firefox and unify style with input elements & buttons. */
:-moz-focusring { outline: auto; }

select:disabled { opacity: inherit; }

/** Remove padding */
option { padding: 0; }

/** Reset to invisible */
fieldset { margin: 0; padding: 0; min-width: 0; }

legend { padding: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** Correct the outline style in Safari. */
[type="search"] { outline-offset: -2px; /* 1 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Fix font inheritance. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/** Fix appearance for Firefox */
[type="number"] { -moz-appearance: textfield; }

/** Clickable labels */
label[for] { cursor: pointer; }

/* Interactive */
/* ============================================ */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Remove outline for editable content. */
[contenteditable]:focus { outline: auto; }

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table { border-color: inherit; /* 1 */ border-collapse: collapse; }

caption { text-align: left; }

td, th { vertical-align: top; padding: 0; }

th { text-align: left; font-weight: bold; }

.quality-bg { background-color: #fff; position: relative; z-index: 1; }

.page-l-copy + .lead { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; text-align: center; margin-top: 20px; }

/*******************************

common

*******************************/
.section { position: relative; z-index: 1; padding-bottom: 6rem; --row-gap: 40px; --column-gap: 42px; --img-margin-top: 30px; --img-textblock-gap: 20px; --accent-color: #b48f4f; }

.inner { max-width: 1050px; }

.local-nav { background-color: #7b5133; padding: 10px; }
.local-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 10px; max-width: 800px; width: 100%; margin-inline: auto; }
.local-nav ul li { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: bold; font-style: normal; letter-spacing: 0.05em; text-align: center; line-height: 1; border-right: 1px solid #fff; font-size: 18px; font-weight: normal; display: grid; }
.local-nav ul li:nth-child(4n+1) { border-left: 1px solid #fff; }
.local-nav ul li a { width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 5px 0; color: #fff; }
.local-nav ul li a::after { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: block; content: ''; width: 90%; height: 1px; background-color: #fff; opacity: 0; transition: opacity 0.2s linear; }
.local-nav ul li a:hover::after { opacity: 1; }
.local-nav ul li.current a::after { opacity: 1; }

.section-header { text-align: center; margin-top: 30px; }
.section-header .category-name { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: bold; font-style: normal; letter-spacing: 0.05em; color: var(--accent-color); letter-spacing: 0.1em; font-size: 26px; }
.section-header .catch-copy { border-top: 1px solid currentColor; padding-top: 10px; margin-top: 10px; font-size: 16px; }

.item-list { display: grid; gap: var(--row-gap) var(--column-gap); margin-top: var(--row-gap); align-items: flex-start; }

.item { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
.item .name { color: var(--accent-color); font-size: 16px; margin-top: 15px; line-height: 1.4; }
.item .name .note { font-size: 80%; display: inline-block; }
.item .text { font-size: 14px; margin-top: 10px; line-height: 1.6; }
.item.eco .name::after { margin-bottom: -5px; display: inline-block; content: ''; background-image: url(../img/quality/icon_eco.png); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; width: 45px; height: 25px; margin-left: 3px; }
.item .img .cap.l.out { left: 0; }
.item .text + .note { margin-top: 10px; }
.item .img + .note { margin-top: 20px; }

#ecology .name, #comfort .name, #others .name, #security .name, #structure .name { color: #000; border-bottom: 1px solid currentColor; padding-bottom: 5px; margin-top: 0; }

@media screen and (max-width: 768px) { .section { --row-gap: 30px; --column-gap: 30px; --img-textblock-gap: 15px; }
  .local-nav ul { grid-template-columns: repeat(3, 1fr); }
  .local-nav ul li:nth-child(4n+1) { border-left: none; }
  .local-nav ul li:nth-child(3n+1) { border-left: 1px solid #fff; } }
@media screen and (max-width: 480px) { .section { padding-bottom: 4rem; --row-gap: 25px; --column-gap: 22px; --img-margin-top: 20px; }
  .section-header { margin-top: 20px; }
  .section-header .category-name { font-size: 22px; }
  .section-header .catch-copy { font-size: 15px; }
  .local-nav ul { grid-template-columns: repeat(2, 1fr); }
  .local-nav ul li:nth-child(3n+1) { border-left: none; }
  .local-nav ul li:nth-child(2n+1) { border-left: 1px solid #fff; }
  .item .name { font-size: 15px; }
  .item.eco .name::after { margin-bottom: -3px; width: 33px; height: 18px; }
  .item .text { font-size: 13px; } }
/*******************************

kitchen

*******************************/
#kitchen .inner > .img { margin-top: var(--row-gap); }
#kitchen .conservatory { padding: 40px 30px 30px 30px; background-color: #000; }
#kitchen .conservatory .item-list { gap: 30px; }
#kitchen .conservatory .title { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; color: #fff; text-align: center; font-size: 16px; font-weight: bold; }
#kitchen .conservatory .item .text { color: #fff; }
#kitchen .item-list { grid-template-columns: repeat(3, 1fr); }
#kitchen .main { display: grid; grid-template-columns: 1fr 210px; margin-top: var(--row-gap); }
#kitchen .main .kitchen_img01 { margin-top: 0; }
#kitchen .main .kitchen_img01 img { height: 100%; object-fit: cover; }
#kitchen .main .kitchen_img01 .cap { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
#kitchen .main .conservatory { padding: 20px 20px; }
#kitchen .main .conservatory .item-list { grid-template-columns: repeat(1, 1fr); row-gap: 15px; margin-top: 20px; font-feature-settings: "palt"; letter-spacing: 0.05em; }
#kitchen .main .conservatory .item-list .name { margin-top: 6px; font-size: 13px; }
#kitchen .main .conservatory .item-list .text { margin-top: 6px; font-size: 11px; }

@media screen and (max-width: 768px) { #kitchen .item-list { grid-template-columns: repeat(2, 1fr); }
  #kitchen .conservatory .item-list { display: flex; justify-content: center; flex-wrap: wrap; }
  #kitchen .conservatory .item-list .item { width: 45.71%; }
  #kitchen .main { display: grid; grid-template-columns: 1fr; }
  #kitchen .main .kitchen_img01 { margin-top: 0; }
  #kitchen .main .kitchen_img01 img { height: auto; object-fit: unset; }
  #kitchen .main .conservatory { padding: 40px 30px 30px 30px; }
  #kitchen .main .conservatory .item-list { gap: 30px; margin-top: var(--row-gap); }
  #kitchen .main .conservatory .item-list .name { margin-top: 15px; font-size: 16px; }
  #kitchen .main .conservatory .item-list .text { margin-top: 10px; font-size: 14px; } }
@media screen and (max-width: 480px) { #kitchen .conservatory { padding: 25px 20px 20px 20px; }
  #kitchen .conservatory .title { font-size: 15px; }
  #kitchen .conservatory .item-list { display: grid; grid-template-columns: 1fr; }
  #kitchen .conservatory .item-list .item { width: 100%; } }
/*******************************

powder-room

*******************************/
#powder-room .item-list { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 0; }
#powder-room .item-list .item { width: 30.66%; }
#powder-room .item-list .main { width: 54.47%; }
#powder-room .item-list .mirror { width: 41.14%; }
#powder-room .item-list::after { display: block; content: ''; width: 30.66%; }

@media screen and (max-width: 768px) { #powder-room .item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--row-gap) var(--column-gap); }
  #powder-room .item-list .item { width: 100%; }
  #powder-room .item-list .main { width: 100%; }
  #powder-room .item-list .mirror { width: 100%; } }
/*******************************

bathroom

*******************************/
#bathroom .item-list { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 0; }
#bathroom .item-list .item { width: 30.66%; }
#bathroom .item-list .main { width: 54.47%; }
#bathroom .item-list .bathtub { width: 41.14%; }
#bathroom .item-list::after { display: block; content: ''; width: 30.66%; }

@media screen and (max-width: 768px) { #bathroom .item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--row-gap) var(--column-gap); }
  #bathroom .item-list .item { width: 100%; }
  #bathroom .item-list .main { width: 100%; }
  #bathroom .item-list .bathtub { width: 100%; } }
/*******************************

ecology

*******************************/
#ecology { /*.toilet { display: grid; grid-template-columns: 0.76fr 1fr; column-gap: 25px; .name { grid-column: span 2; } .img01 { grid-row: span 2; margin-top: 20px; } .img02 { margin-top: auto; }
}*/ }
#ecology .item-list { grid-template-columns: repeat(2, 1fr); align-items: flex-start; }
#ecology .ecojozu-tes { grid-column: span 2; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--column-gap); }
#ecology .ecojozu-tes > .name { grid-column: span 2; }
#ecology .ecojozu { display: grid; grid-template-columns: 0.936fr 1fr; column-gap: var(--img-textblock-gap); margin-top: 20px; }
#ecology .ecojozu .img02, #ecology .ecojozu .note { grid-column: span 2; }
#ecology .ecojozu .img01 { margin-top: 10px; }
#ecology .ecojozu .img02 { margin-top: var(--img-margin-top); }
#ecology .tes { display: grid; align-items: flex-start; grid-template-columns: 1fr 0.833fr; grid-template-rows: repeat(2, auto) 1fr; column-gap: var(--img-textblock-gap); margin-top: 20px; }
#ecology .tes .img { grid-row: span 3; }
#ecology .set { grid-column: span 2; }
#ecology .set .sub-title { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: 16px; font-weight: bold; line-height: 1.4; }
#ecology .set .img { max-width: 905px; margin-inline: auto; margin-top: var(--img-margin-top); }
#ecology .low-e .img { max-width: 356px; margin-inline: auto; margin-top: var(--img-margin-top); }
#ecology .led .img { max-width: 374px; margin-inline: auto; margin-top: var(--img-margin-top); }
#ecology .item03 { grid-column: span 2; display: grid; grid-template-columns: 32.8578% 21.524% 37.6197%; column-gap: var(--column-gap); }
#ecology .item03 .low-e .img { max-width: 222px; }
#ecology .item03 .toilet .box { display: grid; display: flex; flex-wrap: wrap; gap: 0 5.3%; }
#ecology .item03 .toilet .txtbox { display: flex; flex-direction: column; align-items: stretch; width: 41.014%; }
#ecology .item03 .toilet .img01 { width: 53.672%; margin-top: 20px; }
#ecology .item03 .toilet .img02 { margin-top: auto; }

@media screen and (max-width: 768px) { #ecology .ecojozu-tes { grid-template-columns: 1fr; }
  #ecology .ecojozu-tes > .name { grid-column: span 1; }
  #ecology .ecojozu-tes .ecojozu { margin-top: 10px; }
  #ecology .ecojozu-tes .tes { margin-top: var(--row-gap); }
  #ecology .toilet { column-gap: var(--img-textblock-gap); }
  #ecology .toilet .img02 { margin-top: 10px; }
  #ecology .item03 { grid-template-columns: repeat(2, 1fr); gap: var(--row-gap) var(--column-gap); }
  #ecology .item03 .toilet { column-gap: var(--img-textblock-gap); }
  #ecology .item03 .toilet .img02 { margin-top: 10px; } }
@media screen and (max-width: 480px) { #ecology .set .sub-title { font-size: 15px; }
  #ecology .toilet { grid-column: span 2; } }
/*******************************

comfort

*******************************/
#comfort .item-list { grid-template-columns: 0.631fr 1fr; }
#comfort .img { margin-top: 20px; }
#comfort .jcom { grid-column: span 2; display: grid; grid-template-columns: 0.53fr 1fr; column-gap: var(--img-textblock-gap); }
#comfort .jcom .name { grid-column: span 2; order: 1; }
#comfort .jcom .img01 { order: 3; grid-row: span 4; }
#comfort .jcom .note01 { order: 4; margin-top: 5px; }
#comfort .jcom .text { order: 2; }
#comfort .jcom .img02 { order: 5; max-width: 250px; margin-inline: auto; }
#comfort .jcom .note02 { order: 6; }
#comfort .pet .img-list { margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10px; }
#comfort .pet .note { margin-top: 20px; }
#comfort .electric-power { display: grid; grid-template-columns: 1fr 0.833fr; column-gap: var(--img-textblock-gap); }
#comfort .electric-power .name { padding-top: 2rem; }
#comfort .electric-power .img01 { grid-row: span 2; max-width: 320px; margin-inline: auto; }
#comfort .electric-power .img02 { max-width: 340px; margin-inline: auto; }
#comfort .electric-power .name, #comfort .electric-power .note { grid-column: span 2; }

@media screen and (max-width: 768px) { #comfort .item-list { grid-template-columns: 1fr; }
  #comfort .jcom { grid-column: span 1; grid-template-columns: 1fr; }
  #comfort .jcom .name { grid-column: span 1; }
  #comfort .jcom .text { order: 3; }
  #comfort .jcom .img01 { order: 2; }
  #comfort .electric-power { grid-template-columns: 1fr; }
  #comfort .electric-power .name, #comfort .electric-power .note { grid-column: span 1; padding-top: 0; }
  #comfort .electric-power .name { order: 1; }
  #comfort .electric-power .text { order: 3; }
  #comfort .electric-power .img01 { order: 2; }
  #comfort .electric-power .img02 { order: 4; }
  #comfort .electric-power .note { order: 5; } }
/*******************************

others

*******************************/
#others .item-list { grid-template-columns: repeat(2, 1fr); }
#others .item { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto) 1fr; align-items: flex-start; column-gap: var(--img-textblock-gap); }
#others .item .img { grid-row: span 4; }
#others .item:nth-child(n+3) .img { order: -1; }

@media screen and (max-width: 768px) { #others .item-list { grid-template-columns: 1fr; }
  #others .item:nth-child(n+3) .img { order: inherit; }
  #others .item:nth-child(even) .img { order: -1; } }
/*******************************

security

*******************************/
#security .item-list.public { grid-template-columns: repeat(3, 1fr); }
#security .item-list.private { grid-template-columns: repeat(2, 1fr); }
#security .img { margin-top: var(--img-margin-top); }
#security .part-name { font-size: 20px; letter-spacing: 0.2em; background-color: #014259; color: #fff; padding: 5px 10px; line-height: 1; margin-top: var(--row-gap); }
#security .online-security { grid-column: span 3; display: grid; grid-template-columns: 0.501fr 1fr; grid-template-rows: repeat(2, auto) 1fr; column-gap: var(--img-textblock-gap); }
#security .online-security .name { order: 1; }
#security .online-security .text { order: 3; }
#security .online-security .img { order: 2; grid-row: span 3; margin-top: 0; }
#security .raccess { grid-column: span 3; }
#security .raccess .img .cap { bottom: -5px; }
#security .raccess .img .cap01 { right: 18.5%; }
#security .raccess .img .cap02 { right: 0; }
#security .entrance-door { grid-column: span 2; }
#security .intercom { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--img-textblock-gap); }
#security .intercom .name { grid-column: span 2; padding-top: 3.25rem; }
#security .intercom .img { margin-top: 20px; }
#security .window { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--img-textblock-gap); align-items: flex-start; }
#security .window .name { grid-column: span 2; /*display: flex;
column-gap: 10px;*/ }
#security .window .name span:first-child { width: fit-content; }
#security .window .name .note { flex: 1; display: block; margin-top: 5px; line-height: 1.2; }
#security .window .img { margin-top: 20px; }

@media screen and (max-width: 768px) { #security .item-list.public { grid-template-columns: repeat(2, 1fr); }
  #security .online-security { grid-column: span 2; grid-template-columns: 1fr; }
  #security .online-security .text { order: 2; }
  #security .online-security .img { order: 3; margin-top: var(--img-margin-top); }
  #security .raccess { grid-column: span 2; }
  #security .raccess .img .cap { bottom: -10px; }
  #security .raccess .img .cap01 { right: inherit; left: 0; }
  #security .entrance-door .img { max-width: 400px; margin-inline: auto; }
  #security .window .name { display: block; }
  #security .window .name .note { display: block; } }
@media screen and (max-width: 480px) { #security .item-list.private { grid-template-columns: 1fr; }
  #security .entrance-door { grid-column: span 1; }
  #security .intercom .name { padding-top: 0; } }
/*******************************

structure

*******************************/
#structure .item-list { grid-template-columns: repeat(3, 1fr); }
#structure .img { margin-top: var(--img-margin-top); }
#structure .wall .img .cap { bottom: -10px; }
#structure .wall .img .cap01 { right: 54%; }
#structure .wall .img .cap02 { right: 0; }
#structure .ground .name { padding-top: 2.15rem; }
#structure .ground .img .cap { bottom: -20px; }
#structure .ground .img .cap01 { right: 55%; }
#structure .ground .img .cap02 { right: 0; }
#structure .door .name { padding-top: 2.15rem; }
#structure .elevator, #structure .tokyo-mansion { grid-row: span 2; }
#structure .tokyo-mansion .name { padding-top: 2.05rem; }
#structure .flat35 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--img-textblock-gap); }
#structure .flat35 .name { grid-column: span 2; }
#structure .flat35 .img { margin-top: 20px; }

@media screen and (max-width: 768px) { #structure .item-list { grid-template-columns: repeat(2, 1fr); }
  #structure .elevator, #structure .tokyo-mansion { grid-row: span 1; } }
@media screen and (max-width: 480px) { #structure .wall .img .cap01, #structure .wall .img .cap02, #structure .ground .img .cap01, #structure .ground .img .cap02 { position: static; margin-top: 5px; }
  #structure .elevator .img .cap { text-align: left; }
  #structure .flat35 { grid-template-columns: 1fr; }
  #structure .flat35 .name { grid-column: span 1; } }