.page-wrapper .inner { padding-bottom: 10rem; }

.page-nav { margin-top: 8rem; }
.page-nav ul { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin: 2rem 0 4rem 0; }
.page-nav ul li a { display: block; box-sizing: border-box; border-left: 1px solid #9e7013; border-bottom: 1px solid #9e7013; transition: 0.5s; text-align: center; font-size: 1.4rem; line-height: 1; color: #dcdddd; padding: 15px 2px; }
.page-nav ul li:hover a, .page-nav ul li.current a { background: #9e7013; color: #fff; }
@media screen and (max-width: 1024px) { .page-nav ul li a { font-size: 1.2rem; padding: 10px 2px; } }
@media screen and (max-width: 834px) { .page-nav ul { grid-template-columns: repeat(2, 1fr); }
  .page-nav ul li a { font-size: 1.1rem; } }
@media screen and (max-width: 768px) { .page-nav ul { gap: 10px; } }

.category { text-align: center; }
.category .txt { display: inline-block; margin: 0 auto; padding: .5rem 2rem; padding-bottom: .5ren; border-bottom: solid 1px #9e7013; color: #9e7013; font-size: 1.6rem; letter-spacing: .1em; line-height: 1; }

.q-list { margin-top: 4rem; }
.q-list ul { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.q-list ul li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 10px 0; }
.q-list ul .li-ttl { font-size: 1rem; line-height: 1.4; }
.q-list ul .li-txt { font-size: .875rem; line-height: 1.6; }
.q-list ul .li-txt .note { display: block; line-height: 1.6; }
.q-list ul .img .waku { border: solid 1px #999; padding: 5px; }
.q-list ul .img .cap { color: #222; background: none; padding: 2px; }
.q-list ul .img .cap.w { color: #fff; background: rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 768px) { .q-list ul { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 500px) { .q-list ul { grid-template-columns: 1fr; } }

.q-list .kitchen19 { grid-column: span 4; background: #F6F3EE; padding: 1rem; grid-row: span 2; }
.q-list .kitchen19 .li-ttl { grid-column: span 4; }
.q-list .kitchen19 .kitchen19-inner { display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); }
.q-list .kitchen19 .kitchen19-1, .q-list .kitchen19 .kitchen19-2, .q-list .kitchen19 .kitchen19-34 { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.q-list .kitchen19 .kitchen19-34 { grid-column: span 2; display: grid; grid-template-rows: max-content auto; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.q-list .kitchen19 .kitchen19-34 .li-txt { grid-column: span 2; }
@media screen and (max-width: 768px) { .q-list .kitchen19 { grid-column: span 2; }
  .q-list .kitchen19 .li-ttl { grid-column: span 2; }
  .q-list .kitchen19 .kitchen19-inner { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 500px) { .q-list .kitchen19 { grid-column: span 1; }
  .q-list .kitchen19 .kitchen19-1 { grid-column: span 2; }
  .q-list .kitchen19 .kitchen19-2 { grid-column: span 2; } }

.q-list .bubble { grid-column: span 4; background: #E7F0FA; padding: 1rem; display: block; }
.q-list .bubble .li-ttl .en { display: inline-block; margin-right: 1rem; font-size: 120%; }
.q-list .bubble .li-ttl .ja { display: inline-block; }
.q-list .bubble .bubble-midashi { margin-top: 1rem; background: #7B96CC; color: #fff; font-size: 1.2rem; line-height: 1.2; padding: .5rem; }
.q-list .bubble .bubble-item { background: #fff; padding: 1rem; display: grid; gap: 1rem; }
.q-list .bubble .bubble-item-ttl { color: #557ec0; font-size: 1rem; line-height: 1.6; }
.q-list .bubble .bubble-item-ttl .note { margin-top: .5rem; color: #111; }
.q-list .bubble .bubble-item-ttl + .bubble-item-lead { margin-top: 1rem; }
.q-list .bubble .bubble-item-lead { font-size: .875rem; line-height: 1.8; }
.q-list .bubble .img-box .note { margin-top: .5rem; }
.q-list .bubble .bubble01 { grid-template-columns: 45% 1fr; }
.q-list .bubble .bubble-inner2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); grid-template-areas: "b2 b2" "b3 b4" "b5 b5"; }
.q-list .bubble .bubble-inner2 .bubble02 { grid-area: b2; grid-template-columns: 55% 1fr; }
.q-list .bubble .bubble-inner2 .bubble03 { grid-area: b3; grid-template-columns: 1fr; }
.q-list .bubble .bubble-inner2 .bubble04 { grid-area: b4; grid-template-columns: 1fr; }
.q-list .bubble .bubble-inner2 .bubble05 { grid-area: b5; grid-template-columns: repeat(2, 1fr); }
.q-list .bubble .bubble-inner2 .bubble05 .txt-box, .q-list .bubble .bubble-inner2 .bubble05 .note { grid-column: span 2; }
.q-list .bubble .bubble-inner2 .bubble05 .img-box { align-self: center; }
.q-list .bubble .bubble-inner3 { display: grid; gap: 1rem; }
.q-list .bubble .bubble-inner3 .bubble07 { grid-template-columns: 70% 1fr; }
.q-list .bubble .bubble-inner3 .bubble07 .bubble-item-ttl { font-size: 1.5rem; }
.q-list .bubble .bubble-inner3 .bubble08 { grid-template-columns: 70% 1fr; }
.q-list .bubble .bubble-inner3 .bubble09 { grid-template-columns: repeat(2, 1fr); }
.q-list .bubble .bubble-inner3 .bubble09 .txt-box { grid-column: span 2; }
@media screen and (max-width: 1024px) { .q-list .bubble .bubble01 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble01 .img { max-width: 600px; margin: auto; } }
@media screen and (max-width: 768px) { .q-list .bubble { grid-column: span 2; }
  .q-list .bubble .bubble-inner2 .bubble02 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble-inner2 .bubble02 .img { max-width: 500px; margin: auto; }
  .q-list .bubble .bubble-inner2 .bubble05 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble-inner2 .bubble05 .txt-box, .q-list .bubble .bubble-inner2 .bubble05 .note { grid-column: span 1; }
  .q-list .bubble .bubble-inner2 .bubble05 .img-box { max-width: 450px; margin: auto; }
  .q-list .bubble .bubble-inner3 .bubble07 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble-inner3 .bubble07 .img-box { max-width: 500px; margin: auto; }
  .q-list .bubble .bubble-inner3 .bubble07 .txt-box { text-align: center; }
  .q-list .bubble .bubble-inner3 .bubble08 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble-inner3 .bubble08 .img-box { max-width: 400px; margin: auto; }
  .q-list .bubble .bubble-inner3 .bubble09 { grid-template-columns: 1fr; }
  .q-list .bubble .bubble-inner3 .bubble09 .txt-box { grid-column: span 1; }
  .q-list .bubble .bubble-inner3 .bubble09 .img-box { max-width: 400px; margin: auto; } }
@media screen and (max-width: 500px) { .q-list .bubble { grid-column: span 1; }
  .q-list .bubble .bubble-inner2 { grid-template-columns: 1fr; grid-template-areas: "b2" "b3" "b4" "b5"; } }