@import url(reset.css);
.cate-ttl { text-align: center; padding: 10rem 0 5rem 0; }
.cate-ttl .en { font-size: 2.6rem; letter-spacing: .1em; line-height: 1; color: #84746c; }
.cate-ttl .ja { margin-top: 1rem; font-size: 2rem; line-height: 1.4; }

.sec_ttl_icon + .cate-ttl { padding-top: 5rem; }

.q-list { display: grid; gap: 4rem 2%; }
.q-list li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 1rem; }
.q-list li.noimg { grid-template-rows: max-content 1fr; grid-row: auto; }
.q-list .li-ttl { font-size: 1.5rem; line-height: 1.4; }
.q-list .lead { font-size: 1.3rem; text-align: left; }
.q-list .lead .note { display: block; margin-top: 1rem; line-height: 1.6; }
.q-list .img .cap { text-align: right; }
.q-list .waku { border: solid 1px rgba(0, 0, 0, 0.5); }

#q01 .kitchen, #q01 .bathroom, #q01 .powderroom { grid-template-columns: repeat(4, 1fr); }
#q01 .kitchen01 { background: #EAE8E6; padding: 40px 3%; grid-column: 1 / 5; display: grid; gap: 2rem; grid-row: span 2; grid-template-columns: 1fr 50%; }
#q01 .kitchen01 .m-ttl { font-size: 1.4rem; line-height: 1.4; color: #84746c; text-align: center; border: solid 1px #84746c; padding: .5rem; }
#q01 .kitchen01 .img01 { grid-row: 1 / 3; display: grid; gap: 1rem; }
#q01 .kitchen01 .merit01 ul { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
#q01 .kitchen01 .merit01 ul li { background: #84746c; color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; padding: .5rem; display: block; }
#q01 .kitchen01 .merit02 ul { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
#q01 .kitchen01 .merit02 ul li { display: grid; gap: .5rem; grid-template-rows: auto 1fr; grid-template-columns: 50% 1fr; }
#q01 .kitchen01 .merit02 ul li .m02-ttl { grid-column: 1 / 3; background: #84746c; color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; padding: .5rem; }
#q01 .kitchen06 { border: solid 1px #84746c; padding: 40px 3%; grid-column: 1 / 5; display: grid; gap: 2rem 3%; grid-template-rows: max-content 1fr; grid-template-columns: 1fr 60%; }
#q01 .kitchen06 .img06 { grid-row: span 2; }
#q01 .kitchen06 .lead { margin-top: 1rem; }
#q01 .kitchen06 .m-ttl { font-size: 1.4rem; line-height: 1.4; color: #84746c; text-align: center; border: solid 1px #84746c; padding: .5rem; }
#q01 .kitchen06 .merit ul { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
#q01 .kitchen06 .merit ul li { background: #84746c; color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; padding: .5rem; display: block; }
#q01 .kitchen14 .cap { width: 53.0612244898%; }
@media screen and (max-width: 864px) { #q01 .kitchen, #q01 .bathroom, #q01 .powderroom { grid-template-columns: repeat(2, 1fr); }
  #q01 .kitchen01 { grid-column: 1 / 3; grid-row: span 3; grid-template-columns: 1fr; }
  #q01 .kitchen01 .img01 { grid-row: 1 / 2; grid-template-columns: 50% 1fr; grid-template-rows: max-content 1fr; }
  #q01 .kitchen01 .img01 .img { grid-row: 1 / 3; }
  #q01 .kitchen06 { grid-column: 1 / 3; grid-row: span 2; grid-template-columns: 50% 1fr; }
  #q01 .kitchen06 .img06 { grid-row: span 1; }
  #q01 .kitchen06 .merit { grid-column: span 2; } }
@media screen and (max-width: 480px) { #q01 .kitchen06 { grid-row: span 3; grid-template-columns: 1fr; }
  #q01 .kitchen06 .merit { grid-column: span 1; } }

#q02 .amenity { grid-template-columns: repeat(4, 1fr); }
#q02 .multimedia { margin-top: 5rem; background: #EAE8E6; padding: 40px 3%; gap: 2rem; }
#q02 .multimedia .mm-ttl { font-size: 1.6rem; line-height: 1.6; background: #84746c; padding: .5rem; color: #fff; }
#q02 .multimedia .mm-ttl .en { padding-bottom: .5rem; border-bottom: solid 1px #fff; }
#q02 .multimedia .mm-ttl .ja { margin-top: .5rem; }
#q02 .multimedia .mm { display: grid; gap: 2rem; grid-template-columns: 20% 20% 1fr; }
#q02 .multimedia .mm .lead { margin-top: 1rem; }
#q02 .multimedia .m-merit { font-size: 1.4rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
#q02 .multimedia .m-merit .m-merit-item { background: #fff; padding: .5rem; }
#q02 .multimedia .m-merit .m-merit-item .m-merit-ttl { display: inline-block; line-height: 1; background: #84746c; color: #fff; padding: .2rem 1rem; border-radius: 10rem; }
#q02 .multimedia .m-merit .m-merit-item .m-merit-ttl + p { margin-top: .5rem; line-height: 1.6; }
#q02 .multimedia .m-merit .m-merit-item .m-merit-ttl + p b { display: inline-block; background: #E94646; color: #fff; padding: .2rem .5rem; margin-right: .5rem; }
#q02 .eco { grid-template-columns: repeat(2, 1fr); }
#q02 .eco li { grid-template-rows: auto; grid-row: auto; }
#q02 .eco .eco01 { grid-column: 1 / 3; background: #EAE8E6; padding: 40px 3%; gap: 2rem; }
#q02 .eco .eco01 .e01-ttl { display: grid; gap: 2rem 3rem; grid-template-columns: 300px 1fr; }
#q02 .eco .eco01 .e01-ttl .eco-logo { display: grid; gap: 1rem; grid-template-columns: 30% 1fr; }
#q02 .eco .eco01 .e01-ttl .ttl-txt { font-size: 1.8rem; line-height: 1.8; }
#q02 .eco .eco01 .e01-item { display: grid; gap: 2rem; grid-template-columns: 40% 1fr; }
#q02 .eco .eco01 .e01-item .txt .img { margin-top: 2rem; }
#q02 .eco .eco01 .e01-img { max-width: 700px; margin: auto; }
#q02 .eco .eco02 { grid-column: 1 / 3; background: #EAE8E6; padding: 40px 3%; }
#q02 .eco .eco02 .e02-img { max-width: 800px; margin: 2rem auto 0 auto; }
#q02 .eco .eco03 { grid-column: 1 / 3; background: #EAE8E6; padding: 40px 3%; }
#q02 .eco .eco03 .li-ttl { background: #84746c; color: #fff; padding: .5rem; }
#q02 .eco .eco03 .e03-item { margin-top: 2rem; display: grid; gap: 2rem; grid-template-columns: 40% 25% 1fr; }
#q02 .eco .eco03 .e03-item .img-ttl { font-size: 1.4rem; line-height: 1.6; }
#q02 .eco .eco03 .e03-item .note { margin-top: 1rem; }
#q02 .eco .eco05 { grid-template-rows: max-content auto 1fr; }
#q02 .eco .eco05 .li-ttl { background: #004EA2; padding: .5rem; color: #fff; }
#q02 .eco .eco05 .img-list { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: 60% 1fr; }
@media screen and (max-width: 864px) { #q02 .amenity { grid-template-columns: repeat(2, 1fr); }
  #q02 .multimedia .mm { grid-template-columns: 1fr 40%; }
  #q02 .multimedia .mm .txt { grid-column: 1 / 3; }
  #q02 .multimedia .m-merit { grid-template-columns: 1fr; }
  #q02 .eco { grid-template-columns: 1fr; }
  #q02 .eco .eco01, #q02 .eco .eco02, #q02 .eco .eco03 { grid-column: 1 / 2; }
  #q02 .eco .eco01 .e01-ttl { grid-template-columns: 1fr; }
  #q02 .eco .eco01 .e01-ttl .eco-logo { max-width: 260px; }
  #q02 .eco .eco01 .e01-item { grid-template-columns: 1fr; }
  #q02 .eco .eco01 .e01-item .txt .img { max-width: 400px; margin: 2rem auto 0 auto; }
  #q02 .eco .eco01 .e01-img { max-width: 500px; }
  #q02 .eco .eco03 .e03-item { gap: 1rem; grid-template-columns: 55% 1fr; }
  #q02 .eco .eco03 .e03-item .e03-img02 { grid-column: 1 / 3; grid-row: auto; max-width: 320px; margin: auto; } }

#q03 .security { grid-template-columns: repeat(4, 1fr); }
#q03 .security .sec01, #q03 .security .sec02, #q03 .security .sec03 { grid-column: span 2; }
#q03 .security .door { grid-column: span 4; display: grid; grid-template-rows: auto; grid-template-columns: repeat(3, 1fr); background: #EAE8E6; padding: 40px 3%; }
#q03 .security .door .door-item { display: grid; gap: 1rem; grid-template-rows: max-content 1fr; grid-template-columns: 40% 1fr; }
#q03 .security .door .li-ttl { grid-column: 1 / 3; background: #B2A79F; color: #fff; display: grid; gap: 0; grid-template-columns: 3rem 1fr; }
#q03 .security .door .li-ttl .num { background: #84746c; padding: .5rem; text-align: center; }
#q03 .security .door .li-ttl .txt { padding-left: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; }
#q03 .security .door .li-ttl .txt div, #q03 .security .door .li-ttl .txt li { min-height: 0%; }
#q03 .structure { grid-template-columns: repeat(4, 1fr); }
#q03 .structure .st03 { grid-column: 1 / 5; display: grid; grid-template-columns: 40% 1fr; grid-template-rows: auto; grid-row: auto; gap: 2rem; }
#q03 .structure .st03 .img .cap { display: inline-block; width: 49.5%; text-align: left; }
#q03 .structure .st03 .img .cap.cap2 { text-align: right; }
#q03 .structure .st03 .txt { display: grid; gap: 1rem; grid-template-rows: max-content auto; }
#q03 .structure .st05 .img .cap { display: inline-block; width: 49.5%; text-align: left; }
#q03 .structure .st05 .img .cap.cap2 { width: 40%; position: absolute; right: 0; bottom: 30%; text-align: right; }
#q03 .tp-ttl { margin-top: 3rem; font-size: 1.6rem; line-height: 1.6; background: #84746c; color: #fff; padding: .5rem; }
#q03 .thirdparty { grid-template-columns: repeat(4, 1fr); background: #EAE8E6; padding: 40px 3%; }
@media screen and (max-width: 864px) { #q03 .security { grid-template-columns: repeat(2, 1fr); }
  #q03 .security .door { grid-column: 1 / 3; grid-template-columns: repeat(2, 1fr); }
  #q03 .structure { grid-template-columns: repeat(2, 1fr); }
  #q03 .structure .st03 { grid-column: 1 / 3; grid-template-columns: 1fr; gap: 1rem; }
  #q03 .structure .st03 .img { max-width: 380px; margin: auto; }
  #q03 .thirdparty { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 480px) { #q03 .structure { grid-template-columns: 1fr; }
  #q03 .structure .st03 { grid-column: 1 / 2; }
  #q03 .tp-ttl { text-align: center; } }