.design-head { background: url("../images/design/bg.jpg") no-repeat 0% 0%; background-size: cover; padding-bottom: 4rem; position: relative; }
.design-head .page-intro { padding: 3rem 0 0 0; }
.design-head .page-intro::after { display: none; }
.design-head .head-img { width: 90%; max-width: 1200px; margin: 3rem auto 0 auto; display: grid; gap: 0; grid-template-columns: 40% 1fr; position: relative; }
.design-head .head-img .txt { background: #fff; padding: 2rem 1rem; font-size: 1.1rem; line-height: 1.6; }
.design-head .head-img .txt b { display: block; font-weight: normal; font-size: 2rem; line-height: 1.4; color: #a28037; padding-bottom: 1rem; }
.design-head .head-img .img { height: 100%; background: url("../images/design/img01.jpg") no-repeat 50% 50%; background-size: cover; }
.design-head .head-img .img img { display: none; }
.design-head .note { position: absolute; bottom: .5rem; right: .5rem; z-index: 2; }
@media screen and (max-width: 768px) { .design-head { background: url("../images/design/bg_sp.jpg") no-repeat 0% 0%; background-size: cover; }
  .design-head .head-img { grid-template-columns: 47% 1fr; }
  .design-head .head-img .txt { font-size: 1rem; }
  .design-head .head-img .txt b { font-size: 1.4rem; } }
@media screen and (max-width: 420px) { .design-head .head-img .img img { height: 100%; width: auto; } }

.des01 .lead { width: 90%; max-width: 720px; margin-right: auto; margin-left: auto; text-align: left; }
.des01 .skhi { max-width: 800px; margin: 3rem auto 0 auto; }
.des01 .skhi .note { text-align: right; }

.des02 { background: #F5F9FB; padding-bottom: 3rem; }
.des02 .lead { width: 90%; max-width: 720px; margin-right: auto; margin-left: auto; text-align: left; }
.des02 .c-list { margin-top: 3rem; }
.des02 .c-list ul { display: grid; gap: 30px 40px; grid-template-columns: repeat(3, 1fr); }
.des02 .c-list ul li { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }
.des02 .c-list ul li .txt { margin-top: 1rem; width: 100%; }
.des02 .c-list ul li .txt .li-ttl { color: #a28037; line-height: 1.4; padding-bottom: .5rem; border-bottom: solid thin #3e5059; }
.des02 .c-list ul li .txt .li-lead { margin-top: .5rem; font-size: .875rem; line-height: 1.6; }
.des02 .c-list ul li:nth-of-type(even) .img-box { -webkit-box-ordinal-group: 4; order: 3; }
.des02 .c-list ul li:nth-of-type(even) .txt { margin-top: 0; }
@media screen and (max-width: 768px) { .des02 .c-list ul { grid-template-columns: 1fr; }
  .des02 .c-list ul li { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; }
  .des02 .c-list ul li * { min-height: 0%; }
  .des02 .c-list ul li .img-box { width: calc(414 / 720 * 100%); }
  .des02 .c-list ul li .txt { margin-top: 0; width: calc(268 / 720 * 100%); } }

.d03 .waku { border: solid 1px #666; }
.d03 .q-list { padding: 3rem 0; }
.d03 .q-list ul { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.d03 .q-list ul li .li-name { margin-top: .5rem; font-size: 1rem; line-height: 1.4; }
.d03 .q-list ul li .li-lead { margin-top: .5rem; font-size: .875rem; line-height: 1.6; }
.d03 .q-list ul li.li01 { grid-column: 1 / 3; grid-auto-rows: 1 / 2; }
.d03 .q-list ul li.li01 .img { width: 100%; padding-bottom: 31.9944%; overflow: hidden; }
.d03 .q-list ul li.li01 .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media screen and (max-width: 768px) { .d03 .q-list ul { grid-template-columns: repeat(2, 1fr); }
  .d03 .q-list ul li.li01 .img { padding-bottom: 0; }
  .d03 .q-list ul li.li01 .img img { position: relative; top: auto; left: auto; transform: none; } }

.d04 { background: #8C959B; padding: 3rem 0; }
.d04 .inner { display: grid; gap: 30px 40px; grid-template-columns: 35% 1fr; }
.d04 .d04-head { display: grid; gap: 20px 30px; grid-template-columns: 1fr; grid-template-rows: max-content max-content 1fr; grid-template-areas: "ttl" "img1" "lead"; }
.d04 .d04-head .img12-ttl { grid-area: ttl; }
.d04 .d04-head .img12-img1 { grid-area: img1; }
.d04 .d04-head .img12-img1 .note { margin-top: .5rem; color: #fff; }
.d04 .d04-head .lead { color: #fff; grid-area: lead; }
@media screen and (max-width: 768px) { .d04 { padding: 3rem 0 0 0; }
  .d04 .inner { width: 100%; grid-template-columns: 1fr; }
  .d04 .d04-head { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; grid-template-columns: 50% 1fr; grid-template-rows: max-content 1fr; grid-template-areas: "ttl lead" "img1 lead"; } }
@media screen and (max-width: 500px) { .d04 .d04-head { grid-template-columns: 1fr; grid-template-rows: max-content max-content 1fr; grid-template-areas: "ttl" "img1" "lead"; }
  .d04 .d04-head .img12-ttl { width: 90%; max-width: 200px; margin-left: auto; margin-right: auto; } }

.img14 { padding: 3rem 0 0 0; }
.img14 .lmidashi { text-align: center; }
.img14 .img { margin-top: 3rem; }

.img15 { padding: 3rem 0 0 0; }