@charset "utf-8";

header {
border-bottom: 0
}
section:after{content:"";clear:both;display:block;}
.top-img {
margin: 0 auto;
text-align: center;
max-width: 1200px;
max-height: 600px;
}
.top-cases {
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
margin-bottom: 80px;
}
.top-cases h2 {
color: #2e97d8;
font-weight: normal;
font-size: 1.5em;
margin-bottom: 30px;
}
.top-cases p {
margin-bottom: 50px;
}
.top-cases ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
font-size: 16px;
width: 100%;
margin: 0;
padding: 0;
}
.top-cases li h3 {
font-weight: normal;
text-align: left;
}
.top-cases li {
width: 30%;
display: block;
margin-bottom: 30px;
}
.top-cases li a {
text-decoration: none;
color: #666;
}
.top-cases li a:hover {
opacity: 0.8;
}
.top-cases li a strong {
font-weight: normal;
font-size: 1.3em;
}
.top-cases li figure {
padding: 0;
margin: 0 auto 10px;
}
.top-cases li img {
width: 100%;
height: auto;
border: 0;
vertical-align: bottom;
}
@media screen and (max-width:960px) {
.top-cases ul {
font-size: 12px;
}
}
@media screen and (max-width:768px) {
header .logo {
margin-bottom: 100px;
}
}
@media screen and (max-width:640px) {
header {
position: relative;
}
header .logo {
position: absolute;
top: 0;
left: 10px;
z-index: 1000;
}
header .top-img {
margin-top: 50px;
}
.top-cases ul {
font-size: 10px;
}
.top-cases h2 {
font-size: 18px;
}
}
@media screen and (max-width:480px) {
.top-cases ul {
font-size: 8px;
}
.top-cases h2 {
font-size: 16px;
}
}
.example-link {
max-width: 960px;
width: 96%;
margin: 0 auto 50px;
}
.example-link h3 {
text-align: center;
margin-bottom: 30px;
}
.example-link p{
text-align: left;
margin-bottom: 30px;
}
.example-link ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.example-link li {
margin: 0 5px 5px;
}
.example-link li img{
border-radius: 5px;
}
.spec,
.equipment,
.aftercare {
width: 960px;
margin: 0 auto 50px;
}
.spec h1 {
margin-bottom: 30px;
}
.spec ul{
display: table;
width: 100%;
}
.spec li {
display: table-cell;
}
.equipment figure{
float: left;
}
.equipment .right-side{
float: left;
width: 660px;
}
.equipment h2 {
margin: 70px auto 30px 30px;
}
.equipment .text {
margin: 0 auto 30px 30px;
}
.plan {
background: url(//www.uniho.co.jp/house/wp-content/themes/house/img/plan-bk.jpg) no-repeat center top;
margin-bottom: 50px;
padding: 20px 0;
}
.aftercare h2,
.plan h2{
margin-bottom: 5px;
font-size: 1.7em;
font-weight: normal;
}
.plan .text{
margin-bottom: 20px;
}
.plan div {
margin: 0 auto;
width: 960px;
}
.plan ul {
display: table;
width: 100%;
}
.plan ul li {
display:  table-cell;
text-align: center;
}
.plan li figcaption {
margin-top:  5px;
}
.plan li a {
color: #666;
}
.example{
height:  725px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 960px) {
#house-lists {
padding-top: 75%;
}
.spec,
.equipment,
.plan div,
.aftercare {
width: 96%;
}
.example{
width: 100%;
}
.example-link li {
width: 15%;
margin: 0 .5% 5px .5%;
}
.spec li img{
width: 100%;
max-width: 180px;
padding: 10px;
}
.equipment figure{
width: 40%;
}
.equipment .right-side{
width: 60%;
}
.plan ul li img{
width: 100%;
max-width: 250px;
padding: 0 20px 5px;
}
@media screen and (max-width: 768px) {
#house-lists {
padding-top: 80%;
}
.example-link li {
width: 24%;
}
}
@media screen and (max-width: 640px) {
#house-lists {
padding-top: 90%;
}
.example-link li {
width: 30%;
}
.plan h2{
margin-bottom: 15px;
font-size: 1.5em;
font-weight: normal;
}
.example{
height: 650px;
}
}
@media screen and (max-width: 500px) {
#house-lists {
padding-top: 100%;
}
.example{
height: 900px;
}
}
@media screen and (max-width: 480px) {
#house-lists {
padding-top: 110%;
}
.spec ul{
display: block;
}
.spec li {
display: inline-block;
width: 48%;
}	
.plan ul li img{
padding: 0 10px 5px;
}
.plan li figcaption {
font-size: .9em;
}
.example{
height: 890px;
}
.equipment figure,
.equipment .right-side{
width: 100%;
float:  none;
text-align: center;
margin-bottom: 20px;
}
}
@media screen and (max-width: 400px) {
#house-lists {
padding-top: 130%;
}
.plan ul li img{
padding: 0 5px 5px;
}
}
@media screen and (max-width: 320px) {
#house-lists {
padding-top: 140%;
}
.example{
height: 1720px;
}
}