.local-nav ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.local-nav ul li { width: 14%; }
.local-nav ul li a { background-color: #7c5271; color: #ffffff; display: block; text-align: center; font-size: 1.5rem; padding: 10px; transition: filter .2s linear; position: relative; }
.local-nav ul li a:hover { filter: brightness(120%); }
.local-nav ul li a::after { position: absolute; content: ''; width: 10px; height: 10px; right: 1rem; top: 45%; translate: 0 -50%; border: 1px solid #ffffff; border-width: 0 1px 1px 0; rotate: 45deg; }
.local-nav ul li.current a { filter: brightness(120%); }

@media screen and (max-width: 840px) { .local-nav ul li { width: 49.8%; margin-bottom: 1px; } }
.pickup-ttl + .category-name { margin-top: 1rem; }

.category-name { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 3rem; text-align: center; color: #7c5271; margin-top: 6rem; }
.category-name small { display: block; font-size: 1.5rem; }

.category-name + .midashi { margin-top: 4rem; margin-bottom: 4rem; }

.midashi sup { top: 1em; letter-spacing: 0; }

.flexBox { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flexBox > li, .flexBox > p, .flexBox > div, .flexBox > span { margin-bottom: 3rem; }
.flexBox > li.wide_full, .flexBox > p.wide_full, .flexBox > div.wide_full, .flexBox > span.wide_full { width: 100% !important; }
.flexBox.box2 > li, .flexBox.box2 > p, .flexBox.box2 > div, .flexBox.box2 > span { width: 48%; }
.flexBox.box2::after { content: ""; display: inline-block; width: 48%; }
.flexBox.box3 > li, .flexBox.box3 > p, .flexBox.box3 > div, .flexBox.box3 > span { width: 31%; }
.flexBox.box3::after { content: ""; display: inline-block; width: 31%; }
.flexBox.box4 > li, .flexBox.box4 > p, .flexBox.box4 > div, .flexBox.box4 > span { width: 23%; }
.flexBox.box4 > li.wide_herf, .flexBox.box4 > p.wide_herf, .flexBox.box4 > div.wide_herf, .flexBox.box4 > span.wide_herf { width: 48%; }
.flexBox.box4::after { content: ""; display: inline-block; width: 23%; }
.flexBox.box5 > li, .flexBox.box5 > p, .flexBox.box5 > div, .flexBox.box5 > span { width: 19%; }
@media screen and (max-width: 640px) { .flexBox.box2 > li, .flexBox.box2 > p, .flexBox.box2 > div, .flexBox.box2 > span { width: 100%; }
  .flexBox.box2::after { content: ""; display: inline-block; width: 100%; }
  .flexBox.box3 > li, .flexBox.box3 > p, .flexBox.box3 > div, .flexBox.box3 > span { width: 100%; }
  .flexBox.box3::after { content: ""; display: inline-block; width: 100%; }
  .flexBox.box4 > li, .flexBox.box4 > p, .flexBox.box4 > div, .flexBox.box4 > span { width: 48%; }
  .flexBox.box4 > li.wide_herf, .flexBox.box4 > p.wide_herf, .flexBox.box4 > div.wide_herf, .flexBox.box4 > span.wide_herf { width: 100%; }
  .flexBox.box4::after { content: ""; display: inline-block; width: 48%; }
  .flexBox.box5 > li, .flexBox.box5 > p, .flexBox.box5 > div, .flexBox.box5 > span { width: 48%; }
  .flexBox.box5::after { content: ""; display: inline-block; width: 48%; } }

.qualityBox .img .note { right: 5px; bottom: 3px; }
.qualityBox .img .note.b { color: #000; text-shadow: 0px 0px 3px #ffffff,0px 0px 3px #ffffff; }
.qualityBox .img .note.out { position: static; text-align: right; }
.qualityBox .img + h5 { margin-top: 10px; }
.qualityBox h5 { font-size: 1.6rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #000; }
.qualityBox h5 span.icon { display: inline-block; margin-left: 10px; }
.qualityBox h5 span.icon img { height: 20px; width: auto; }
.qualityBox h5.gold { color: #998852; }
.qualityBox h5.subcopy { background: #998852; color: #fff; font-size: 1.4rem; padding: 5px 10px; border-bottom: none; }
.qualityBox p { font-size: 1.4rem; line-height: 1.5; margin-bottom: 3rem; }
.qualityBox p.note { font-size: 1.1rem; line-height: 1.6; }
@media screen and (max-width: 640px) { .qualityBox h5 span.icon { margin-left: 5px; }
  .qualityBox h5 span.icon img { height: 15px; } }

.pickup-area { background: #f3f1ec; padding: 30px; }

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

kitchen

******************************************************/
#kitchen .pickup-area .img + h5 { border-bottom: none; }
#kitchen .pickup-area .img .note2 { right: 37%; }
#kitchen .pickup-area .kitchen_point li { background: #998852; color: #fff; position: relative; height: 50px; text-align: center; margin-bottom: 1rem; font-size: 1.3rem; }
#kitchen .pickup-area .kitchen_point li span { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-width: 640px) { #kitchen .pickup-area .kitchen_point li { width: 48%; } }

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

sanitary

******************************************************/
#sanitary .inner { padding-bottom: 0; }
#sanitary .sanitary01 .flexBox.box4::after { width: 48%; }
#sanitary .sanitary02 .shower .img { width: 40%; order: 2; }
#sanitary .sanitary02 .shower .txtArea { width: 54%; order: 1; }
#sanitary .sanitary03 { padding-top: 0; }
#sanitary .sanitary03 .wide_full { margin-bottom: 0; }
@media screen and (max-width: 640px) { #sanitary .sanitary03 .flexBox.box4 li { width: 100%; } }

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

iot

******************************************************/
#iot h6 { font-size: 1.5rem; margin-bottom: 2rem; }
#iot .img + div.note { margin-top: 10px; line-height: 1.5; }
#iot .interphone .item01 { width: 33%; }
#iot .interphone .item01 p { margin-bottom: 10px; }
#iot .interphone .item01 p.note { margin-bottom: 20px; }
#iot .interphone .item02 { width: 63%; }
#iot .handsfree { margin-top: 3rem; }
#iot .handsfree li:nth-of-type(1) { width: 100%; }
#iot .handsfree li:nth-of-type(2) { width: 22%; }
#iot .handsfree li:nth-of-type(3) { width: 74%; }
#iot .wirelessLan li:nth-of-type(1) { width: 100%; margin-bottom: 0; }
#iot .wirelessLan li:nth-of-type(1) .txtArea { width: 48%; }
#iot .wirelessLan li:nth-of-type(1) .img { width: 48%; }
#iot .wirelessLan li:nth-of-type(2) { width: 35%; }
#iot .wirelessLan li:nth-of-type(3) { width: 62%; margin-bottom: 0; }
#iot .wirelessLan li:nth-of-type(3) h5 { width: 100%; }
#iot .wirelessLan li:nth-of-type(3) p { width: 100%; }
#iot .wirelessLan li:nth-of-type(3) .img01 { width: 48%; margin-bottom: 1rem; }
#iot .wirelessLan li:nth-of-type(3) .img02 { width: 48%; margin-bottom: 1rem; }
#iot .wirelessLan li:nth-of-type(3) div.note { margin-bottom: 0; }
@media screen and (max-width: 640px) { #iot .interphone .item01 { width: 100%; }
  #iot .interphone .item02 { width: 100%; }
  #iot .handsfree { margin-top: 0rem; }
  #iot .handsfree li:nth-of-type(2) { width: 100%; }
  #iot .handsfree li:nth-of-type(3) { width: 100%; }
  #iot .wirelessLan li:nth-of-type(1) { width: 100%; }
  #iot .wirelessLan li:nth-of-type(1) .txtArea { width: 100%; }
  #iot .wirelessLan li:nth-of-type(1) .txtArea p { margin-bottom: 0; }
  #iot .wirelessLan li:nth-of-type(1) .img { width: 100%; margin-bottom: 4rem; }
  #iot .wirelessLan li:nth-of-type(2) { width: 100%; }
  #iot .wirelessLan li:nth-of-type(3) { width: 100%; }
  #iot .wirelessLan li:nth-of-type(3) .img01 { width: 100%; margin-bottom: 3rem; }
  #iot .wirelessLan li:nth-of-type(3) .img02 { width: 100%; } }

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

amenity

******************************************************/
#amenity .flexBox.box4::after { width: 49%; }
#amenity .flexBox.box2 li:nth-of-type(1) { position: relative; }
#amenity .flexBox.box2 li:nth-of-type(1) h5 { color: #998852; }
#amenity .flexBox.box2 li:nth-of-type(1) h5.subcopy { color: #fff; }
#amenity .flexBox.box2 li:nth-of-type(1) .icon { position: absolute; top: 3px; right: 10px; width: 90px; }
#amenity .flexBox.box2 li:nth-of-type(1) .icon img { width: 100%; height: auto; }
#amenity .flexBox.box2 li:nth-of-type(1) p { margin-bottom: 10px; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox { margin-top: -20px; align-items: flex-end; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox .txtArea { width: 58%; margin-bottom: 0; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox .txtArea .txt { box-sizing: border-box; border: 1px solid #998852; text-align: center; color: #998852; font-size: 1.7rem; padding: 1.5rem 0; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox .txtArea .txt small { display: block; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox .img { width: 40%; position: relative; margin-bottom: 0; }
#amenity .flexBox.box2 li:nth-of-type(1) > .flexBox .note { margin-top: 5px; width: 100%; }
@media screen and (max-width: 640px) { #amenity .flexBox.box2 li:nth-of-type(1) .icon { width: 65px; } }

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

security

******************************************************/
#security .secom > li:nth-of-type(1) { width: 100%; }
#security .secom .secom1 { width: 50%; }
#security .secom .secom1 .txtArea { width: 69%; }
#security .secom .secom1 .secom_icon { width: 26%; }
#security .secom .secom1 .secom_list { width: 100%; }
#security .secom .secom1 .secom_list h6 { width: 100%; color: #998852; font-size: 1.4rem; margin-bottom: 2rem; }
#security .secom .secom1 .secom_list .item { width: 29%; /*&:nth-of-type(1) { padding-right: 15px; border-left: none;
}
&:nth-of-type(3) { padding-left: 15px;
}*/ }
#security .secom .secom1 .secom_list .item .icon { width: 50px; }
#security .secom .secom1 .secom_list .item .copy { color: #998852; font-size: 1.3rem; margin-bottom: 1rem; margin-top: 1rem; }
#security .secom .secom1 .secom_list .item p { margin-bottom: 0; font-size: 1.2rem; }
#security .secom .secom1 .secom_list .item:nth-of-type(2) { position: relative; }
#security .secom .secom1 .secom_list .item:nth-of-type(2)::before, #security .secom .secom1 .secom_list .item:nth-of-type(2)::after { content: ""; display: block; width: 1px; height: 100%; background: #000; position: absolute; top: 0; }
#security .secom .secom1 .secom_list .item:nth-of-type(2)::before { left: -12%; }
#security .secom .secom1 .secom_list .item:nth-of-type(2)::after { right: -12%; }
#security .secom .secom2 { width: 48%; }
#security .secom .secom3 { width: 100%; box-sizing: border-box; border: 1px solid #000; }
#security .secom .secom3 .inner { width: calc(100% - 60px); padding: 4rem 0 2rem; }
#security .secom .secom3 .inner .txtArea { width: 30%; margin-bottom: 0; }
#security .secom .secom3 .inner .img { width: 67%; margin-bottom: 0; }
#security .box4 .img .note2 { right: 53%; }
@media screen and (max-width: 640px) { #security .secom .secom1 { width: 100%; }
  #security .secom .secom1 .secom_list h6 { font-size: 2rem; }
  #security .secom .secom1 .secom_list .item { width: 100%; position: relative; margin: auto; padding: 20px 60px 20px 0; }
  #security .secom .secom1 .secom_list .item .icon { position: absolute; top: 10px; right: 0; }
  #security .secom .secom1 .secom_list .item .copy { font-size: 1.7rem; }
  #security .secom .secom1 .secom_list .item p { font-size: 1.4rem; }
  #security .secom .secom1 .secom_list .item:nth-of-type(2) { border-top: 1px solid #000; border-bottom: 1px solid #000; }
  #security .secom .secom1 .secom_list .item:nth-of-type(2)::before, #security .secom .secom1 .secom_list .item:nth-of-type(2)::after { content: none; }
  #security .secom .secom2 { width: 100%; }
  #security .secom .secom3 .inner .txtArea { width: 100%; }
  #security .secom .secom3 .inner .img { width: 100%; } }

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

structure

******************************************************/
#structure .qualityBox.box2 h5 { color: #998852; }

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

support

******************************************************/
#support .support2 { align-items: center; justify-content: flex-start; margin-bottom: 2rem; }
#support .support2 h5 { width: 17%; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
#support .support2 p { width: 75%; border-left: 1px solid #000; padding-left: 20px; margin-bottom: 0; padding-top: 5px; padding-bottom: 5px; }
#support .support3 li { margin-bottom: 1rem; }
#support .support3 + div.note { text-align: right; }
#support .support4 { position: relative; margin-top: 4rem; }
#support .support4 .icon { position: absolute; top: -30px; left: 0; width: 80px; }
#support .support4 h5 { border-bottom: none; padding-left: 90px; margin-bottom: 3rem; }
@media screen and (max-width: 640px) { #support .support1 > li { width: 100%; }
  #support .support1 .support1-view img { height: 230px; width: auto; }
  #support .support2 h5 { width: 100%; border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 10px; }
  #support .support2 p { width: 100%; border-left: none; padding-left: 0; }
  #support .support4 { margin-top: 6rem; } }