.top:after, .top #main .links:after {
content: "";
clear: both;
display: block
}
.top {
width: 1260px;
margin: 0 auto;
padding-bottom: 650px
}
.top #main {
float: left;
width: 816px;
padding-bottom: 30px
}
.top #main h2 {
font-size: 1.7em;
padding: 0 0 3px 5px;
margin: 10px 0 10px
}
.top #main .pick-up {
margin: 20px auto 100px;
max-width: 816px
}
.top #main .pick-up h3 {
text-align: center
}
.top #main .pick-up .slides img {
width: auto;
height: auto;
max-height: 460px;
max-width: 816px;
margin: 0 auto
}
.top #main .links {
margin: 30px auto
}
.top #main .links li {
float: left
}
.top #main .links li a {
display: block;
width: 200px;
margin: 10px 30px;
padding: 130px 0 20px;
height: 30px;
text-align: center;
color: #FFF;
background: #3E7603;
;
font-size: 1.1em;
box-shadow: 1px 1px 1px #999;
border-radius: 5px
}
.top #main .links li:first-child a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/apartment.png) no-repeat center 20px
}
.top #main .links li:nth-child(2) a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/mansion.png) no-repeat center 20px
}
.top #main .links li:nth-child(3) a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/single.png) no-repeat center 20px
}
.top #main .links li:nth-child(4) a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/house.png) no-repeat center 20px
}
.top #main .links li:nth-child(5) a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/shop.png) no-repeat center 20px
}
.top #main .links li:nth-child(6) a {
background: #59A805 url(//kaihatsu.uniho.co.jp/gallery/wp-content/themes/gallery/img/walfare.png) no-repeat center 20px
}
.top #main .links li a:hover {
box-shadow: none
}
#main .top-cases {
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
margin: 100px auto
}
#main .top-cases h2 {
color: #2e97d8;
font-weight: 400
}
#main .top-cases ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
font-size: 16px;
width: 100%;
margin: 30px auto;
padding: 0
}
#main .top-cases li {
width: 30%;
display: block;
margin-bottom: 30px
}
#main .top-cases li a {
text-decoration: none;
color: #074064
}
#main .top-cases li a:hover {
opacity: .8
}
#main .top-cases li a strong {
font-weight: 400;
font-size: 1.1em
}
#main .top-cases li a span {
font-size: .8em
}
#main .top-cases li figure {
padding: 0;
margin: 0 auto 10px
}
#main .top-cases li img {
width: 100%;
height: auto;
border: 0;
vertical-align: bottom
}
#main .text p {
margin-bottom: 15px
}
#main .text p strong {
font-size: 1.3em;
color: #185C85
}
#main .text aside {
font-size: .8em;
width: 100%;
margin-top: 30px
}
@media screen and (max-width:960px) {
#main .top-cases ul {
font-size: 12px
}
}
@media screen and (max-width:640px) {
#main .top-cases ul {
font-size: 10px
}
#main .top-cases h2 {
font-size: 18px
}
}
@media screen and (max-width:480px) {
#main .top-cases ul {
font-size: 8px
}
#main .top-cases h2 {
font-size: 16px
}
}
.top #main .photos h3 {
font-size: 1.3em
}
.top #main .photos h4 {
color: #3E7603;
;
margin-bottom: 15px;
font-size: 1.2em;
font-weight: 400;
text-align: center
}
.top #main .photos ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap
}
.top #main .photos li {
margin: 0 5px 15px
}
.top #main .photos a {
display: block;
background: #666;
color: #FFF;
border-radius: 5px;
padding: 9px 15px;
box-shadow: 0 1px 3px #ccc
}
.top aside {
float: right;
width: 300px
}
.top aside a {
color: #074064
}
.top aside h3 {
margin: 20px auto 10px;
font-size: 1.2em
}
.top aside h4 {
background: #23282D;
color: #FFF;
padding: 3px;
margin-bottom: 10px;
font-weight: 400
}
.top aside .side-links {
text-align: left;
margin-left: 10px
}
.top aside .side-links li {
list-style: disc inside;
padding-bottom: 10px
}
.top aside section .side-links {
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px dotted #666
}
.top aside section h5 {
color: #3E7603;
;
margin-bottom: 10px
}
.top aside .side-banner {
margin-top: 10px
}
.top aside .side-banner li {
margin-bottom: 10px
}
.top aside .side-banner li img {
width: 100%;
height: auto
}
@media screen and (max-width:1260px) {
img {
max-width: 100%;
height: auto;
width: auto
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.top {
max-width: calc(100% - 10px);
padding-bottom: 650px
}
.top #main {
width: 70%;
margin: 0 0 0 2%
}
.top #main .links li {
width: 33.3%
}
.top #main .links li a {
height: 180px;
width: 90%;
margin: 10px auto
}
.top #main #form li a {
display: block
}
.top aside {
width: 26%;
margin-right: 2%
}
.top aside h4 {
width: 90%;
margin: 0 auto 10px
}
.top aside .side-links {
width: 90%;
margin: 0 auto 20px
}
.top aside .banners li {
width: 96%
}
.menu-black ul li a {
width: 100%
}
}
@media screen and (max-width:960px) {
.top {
padding-bottom: 100px
}
}
@media screen and (max-width:768px) {
.top #main {
width: 98%
}
.top #main .links li a {
height: 200px;
padding: 150px 0 30px;
font-size: 1em
}
.top #main .links li:first-child a, .top #main .links li:nth-child(2) a, .top #main .links li:nth-child(3) a, .top #main .links li:nth-child(4) a, .top #main .links li:nth-child(5) a, .top #main .links li:nth-child(6) a {
background-size: 55%
}
.top aside {
width: 100%
}
.top aside h3 {
font-size: 1.1em
}
.top aside .side-links {
font-size: .9em
}
.top aside .photos ul {
width: 90%;
margin: 0 auto
}
.top aside .side-banner {
display: flex;
justify-content: space-around;
flex-wrap: wrap
}
.top aside .side-banner li {
width: 48%;
max-width: 316px
}
}
@media screen and (max-width:600px) {
.top #main .links li a {
height: 80px;
font-size: .8em;
padding: 120px 0 30px;
margin: 5px auto
}
.top #main .links li:first-child a, .top #main .links li:nth-child(2) a, .top #main .links li:nth-child(3) a, .top #main .links li:nth-child(4) a, .top #main .links li:nth-child(5) a, .top #main .links li:nth-child(6) a {
background-size: 60%
}
.top aside h3 {
font-size: .9em;
font-weight: 400
}
.top aside .side-links {
font-size: .75em
}
}
@media screen and (max-width:560px) {
.top #main .links li a {
padding: 105px 0 30px
}
.top #main .links li:nth-child(6) a {
letter-spacing: -.5px
}
.top #main .links li:first-child a, .top #main .links li:nth-child(2) a, .top #main .links li:nth-child(3) a, .top #main .links li:nth-child(4) a, .top #main .links li:nth-child(5) a, .top #main .links li:nth-child(6) a {
background-size: 50%
}
.top aside h3 {
font-size: 1em
}
.top aside h4, .top aside .side-links {
width: 80%
}
.top aside .side-links {
font-size: .9em
}
}
@media screen and (max-width:480px) {
.top #main .pick-up .slides img {
max-height: 320px
}
}
@media screen and (max-width:360px) {
.top #main .links li a {
padding: 90px 0 30px;
font-size: .75em
}
}