#container { overflow: hidden; padding: 30px 0; }
#container .inner { padding-bottom: 60px; }
@media (max-width: 680px) { #container .inner { padding-bottom: 0px; } }
#container .txtarea { text-align: center; position: relative; }
#container .txtarea h3 .sub { display: block; font-size: 0.6em; }
#container .txtarea figure { position: absolute; bottom: -33px; right: 0; width: 15%; max-width: 100px; }
#container .txtarea figure img { width: 100%; height: auto; }
@media (max-width: 480px) { #container .txtarea figure { bottom: -48%; } }

#main { position: relative; z-index: 10; margin-bottom: 30px; overflow: hidden; }
#main .pic { height: 1px; padding-bottom: 40%; background: center center no-repeat; background-size: cover; width: 50%; }
#main #main1 { float: left; background-image: url(../img/modelhouse/main1.jpg); }
#main #main2 { float: right; background-image: url(../img/modelhouse/main2.jpg); }

.pagelink li { display: inline-block; width: 15%; margin-right: 2%; }
.pagelink li:last-child { margin-right: auto; }
.pagelink li a, .pagelink li .soon { display: block; background: #e2dfd7; text-align: center; padding: 10px 0; transition: .1s; }
.pagelink li .soon { color: #a8a59d; }
.pagelink li a:hover { background-color: #bcad85; }
@media (max-width: 680px) { .pagelink li { width: 32%; margin-bottom: 10px; }
  .pagelink li:nth-child(3n) { margin-right: auto; } }
@media (max-width: 380px) { .pagelink li { font-size: 0.7rem; } }

.area { padding-top: 100px; }
.area h6 { border-bottom: 2px solid #000; padding-bottom: 10px; line-height: 1; margin: 0 0 20px; }
.area .area_name span { display: inline-block; vertical-align: middle; margin-right: 7px; width: 10px; height: 4px; background-color: #000; }
.area ul { margin-bottom: 20px; }
.area li { /*display: inline-block;*/ margin: 0 30px 10px 0; /*border-bottom: 3px solid #e4e4e4;*/ }
.area a { position: relative; display: inline-block; }
.area a::before, .area a::after { position: absolute; bottom: -3px; left: 0; content: ''; width: 100%; height: 3px; transform-origin: left top; transition: transform .5s; }
.area a::before { transform: scale(1, 1); background: #e4e4e4; }
.area a::after { transform: scale(0, 1); background: #bcad85; }
.area a:hover::after { transform: scale(1, 1); }
.area .soon { position: relative; display: inline-block; }
.area .soon::before { position: absolute; bottom: -3px; left: 0; content: ''; width: 100%; height: 3px; background: #e4e4e4; }
