@charset "utf-8";

nav.menu-smartphone {
display: none;
}
@media screen and (max-width: 768px) { nav.menu-smartphone {
display: block;
z-index: 5;
}
.menu-smartphone {
margin: 0;
position: fixed;
top: 0;
right: 0;
text-align: right;
}
#nav-drawer {
position: relative;
} .nav-unshown {
display: none;
} #nav-open {
display: inline-block;
width: 50px;
height: 42px;
vertical-align: middle;
padding: 10px;
background: #666;
cursor: pointer;
} #nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px; width: 25px; border-radius: 3px;
background: #FFF;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
} #nav-close {
display: none; position: fixed;
z-index: 999;
top: 0; left: 0;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0;
transition: .3s ease-in-out;
} #nav-content {
overflow: auto;
position: fixed;
top: 0;
right: 0; z-index: 9999; width: 90%; max-width: 300px; height: 100%;
background: hsla(0,0%,0%,0.86); transition: .3s ease-in-out; -webkit-transform: translateX(105%);
transform: translateX(105%); }
.hamburger-top {
height: 40px;
}
.cancel {
display: inline-block;
position: relative;
margin: 5px 5px 0 265px;
padding-left: -23px; 
cursor: pointer;
height: 30px;
width: 50px;
}
.cancel:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -13px;
width: 31px;
height: 5px;
margin-top: -3px;
margin-left: 13px;
background: #FFF;
transform: rotate(45deg);
cursor: pointer;	
}
.cancel:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: -13px;
width: 31px;
height: 5px;
margin-top: -3px;
margin-left: 13px;
background: #FFF;
transform: rotate(-45deg);
cursor: pointer;
} #nav-input:checked ~ #nav-close {
display: block; opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%); box-shadow: 6px 0 25px rgba(0,0,0,.15);
} #nav-content {
text-align: left;
}
#nav-content ul {
margin: 0;
width: 100%;
padding: 0
}
#nav-content ul li {
margin: 3px 10px;
}
#nav-content li a {
color: #FFF;
display: inline-block;
width: 100%;
text-decoration: none;
padding: 3px 5px 3px 20px;
border-bottom: 1px dotted #FFF;
}
#nav-content li a:before {
content: "・";
padding-right: 5px;
}
#nav-content ul ul{
margin-left: 30px;
}
}
html {
height: 100%;
}
body {
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
line-height: 1.5;
color: #333;
height: 100%
}
body > #contents {
height: auto
}
div, ol, ul, dl, form {
margin: 0;
padding: 0
}
p, h1, h2, h3, h5, h5, h6, dt, dd, input, textarea, figure {
margin: 0;
padding: 0;
font-size: 100%
}
th, td {
margin: 0;
padding: 0;
line-height: normal;
font-weight: 400
}
em {
font-style: normal;
font-weight: 700
}
a img {
border: none
}
a {
text-decoration: none
}
a:hover {
opacity: .7
}
ul li {
list-style-type: none
}
ol li {
list-style: inside decimal
}
img {
border: 0;
vertical-align: bottom
}
.clearfix:after, #main:after, header .w-960:after, header nav:after, header nav ul:after, footer:after, footer .links:after, footer .bottor:after {
content: "";
clear: both;
display: block
}
#contents {
min-height: 100%;
width: 100%;
margin: 0 auto;
position: relative
}
.w-960, #main,  #breadcrumb, footer .links {
width: 960px;
margin: 0 auto
}
header {
background: #07195b;
color: #FFF
}
header .logo {
padding: 20px 0 10px;
float: left;
display: table
}
header .logo a {
color: #FFF;
text-decoration: none;
display: block;
margin-bottom: 10px
}
header .logo figure {
padding: 0 20px 0 0;
width: 130px;
display: table-cell
}
header .logo h1 {
display: table-cell;
vertical-align: bottom
}
header .inquiry {
font-size: .9em;
background: #FFF;
color: #333;
float: right;
text-align: left;
padding: 10px;
margin: 10px 0
}
header h2 {
font-weight: 400
}
header .inquiry li:first-child {
background: url(//kaihatsu.uniho.co.jp/img/free.png) no-repeat left 8px;
font-size: 2em;
padding-left: 23px
}
header .inquiry li:last-child {
text-align: center
}
header .inquiry li:last-child a {
width: 80%;
color: #FFF;
background: #6E6E00;
padding: 5px 10px;
margin: 10px auto 0;
display: block;
border-radius: 5px
}
header #menu {
width: 100%;
background: #d7c9af;
border-top: 3px solid #f0eddc;
margin-bottom: 10px
}
header #menu ul {
display: table;
margin: 0 auto;
max-width: 1200px;
}
header #menu li {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: .8em;
padding: 0 5px;
}
header #menu li a {
padding: 5px 3px;
display: block;
color: #000;
text-shadow: 1px 1px 1px #f0eddc
}
header #menu li a:hover {
color: #666
}
#main {
margin-bottom: 20px;
padding-bottom: 900px;
text-align: left;
height: auto
}
#main .pagetop {
text-align: right
}
#main .pagetop a {
display: block;
background: #E8E8E8;
color: #333;
text-align: center;
width: 85px;
padding: 15px 5px;
margin: 30px 0 30px auto;
text-decoration: none
}
#main .pagetop a span {
display: block;
padding-top: 30px;
background-image: url(//kaihatsu.uniho.co.jp/img/icon/angles-up-solid-999.svg);
background-repeat: no-repeat;
background-position: top center;	
background-size: 25px 27px;
}
#pankuzu {
margin: 0 10px 10px
}
#pankuzu li {
display: inline-block
}
#pankuzu li a {
color: #333
}
#pankuzu li::before {
content: '';
margin-left: 5px;
margin-right: 5px;
display: inline-block;
background-image: url(//kaihatsu.uniho.co.jp/img/icon/angle-right-solid-blue.svg);
width: 9px;
height: 15px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
#pankuzu li:first-child::before {
content: "";
margin-right: 5px;
display: inline-block;
background-image: url(//kaihatsu.uniho.co.jp/img/icon/house-solid-blue.svg);
width: 16px;
height: 15px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
#main .text {
text-indent: 1em
}
#main #form {
border: 2px solid #1E71A5;
border-radius: 10px;
padding: 20px;
margin: 0 100px 50px
}
#main #form h3 {
text-align: center;
font-size: 1.3em;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px dotted #666
}
#main #form ul {
margin: 10px auto 0;
font-size: 1.5em;
text-align: center
}
#main #form li {
margin-top: 10px
}
#main #form .area {
margin-top: 10px
}
#main #form address {
font-style: normal
}
#main #form .tel {
font-size: 1.5em
}
#main #form a {
background: #6E6E00;
color: #FFF;
padding: 10px;
border-radius: 5px;
display: block
}
#main #form a:hover {
background: #88C4E8
}
#main #form .area {
text-align: center;
padding-top: 5px
}
footer {
background: #F0EDDC;
position: absolute;
bottom: 0;
width: 100%
}
.menu-black {
width: 100%;
margin-bottom: 30px
}
.menu-black ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.menu-black ul li {
width: 25%
}
.menu-black ul li a {
width: calc(100% - 20px);
color: #FFF;
background: rgba(0, 0, 0, .8);
padding: 30px 10px;
display: block;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
text-align: left;
font-size: .9em
}
.menu-black ul li a span {
display: block;
font-size: 1.5em
}
footer address {
font-style: normal;
font-size: 1.3em;
padding-top: 10px
}
footer address dl {
display: table;
margin: 0 auto 20px
}
footer address dt {
font-weight: 700
}
footer address dt, footer address dd {
display: table-cell
}
footer address dt {
padding-right: 30px
}
footer address span {
font-size: .9em
}
footer .links {
font-size: .8em;
margin-bottom: 10px;
text-align: left
}
footer .links h5 {
display: none
}
footer .links div {
float: left;
width: 300px;
margin-left: 20px
}
footer .links a {
color: #333
}
footer .links a:hover {
opacity: .8
}
footer .links li {
font-size: 1.25em;
margin-bottom: 5px;
}
footer .links li::before {
margin-right: 8px;
content: '';
display: inline-block;
background-image: url(//kaihatsu.uniho.co.jp/img/icon/caret-right-solid-blue.svg);
width: 7.2px;
height: 12px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
footer .links li ul {
margin-top: 5px
}
footer .links li li {
margin-left: 20px;
font-size: .9em
}
footer .links li li::before {
width: 6.3px;
height: 10.5px;
}
footer .bottom {
height: 30px;
background: #07195b;
padding-top: 5px;
color: #FFF
}
footer .bottom p {
float: left;
width: 50%;
text-align: right
}
footer .bottom .list {
width: 50%;
float: right
}
footer .bottom .list li {
padding-left: 10px;
display: inline;
line-height: 1;
}
footer .bottom .list .icon::before {
margin-right: 8px;
content: '';
display: inline-block;
background-image: url(//kaihatsu.uniho.co.jp/img/icon/circle-right-solid-white.svg);
width: 15px;
height: 15px;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
footer .bottom .list a {
color: #ECFFFF;
text-decoration: none;
font-size: .9em
}
.left {
float: left
}
.right {
float: right
}
.banner-bottom {
text-align: center;
margin: 0 auto 30px
}
.banner-bottom li {
margin: 0 auto 10px
}
@media screen and (max-width:960px) {
img {
max-width: 100%;
height: auto;
width: auto
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.w-960, header #menu ul, #breadcrumb, #main, footer .links {
width: 100%
}
header .w-960 {
padding: 0 16px
}
header .logo img {
width: 100px
}
header #menu li a {
padding: 3px;
font-size: .9em
}
#main {
margin-bottom: 20px;
padding-bottom: 0
}
#main #form {
margin: 0 10%
}
footer {
position: static
}
.menu-black ul li a {
width: 100%
}
footer address {
font-size: 1.2em
}
footer .links div {
width: 31%;
margin-left: 2%
}
}
@media screen and (max-width:768px) {
#menu {
display: none;
width: 100%
}
header {
padding-top: 0
}
header .logo {
float: none;
margin: 0 auto;
text-align: center
}
header h1 {
font-size: .7em;
padding: 10px
}
header .inquiry {
float: none;
margin: 10px 5%;
width: 90%;
padding: 5px;
display: table;
border-spacing: 5px
}
header .inquiry ul {
text-align: center
}
header .inquiry li:first-child {
width: 75%;
margin: 0 auto;
font-size: 1.8em
}
header .pc {
display: none
}
#pankuzu li {
font-size: .9em
}
#main #form {
margin: 0 5%
}
#main #form ul {
margin: 10px 10% 0 10%;
font-size: 1.3em
}
.menu-black ul li {
width: 50%
}
footer address {
font-size: 1em;
text-align: left
}
footer .links li {
padding-bottom: 7px
}
footer .bottom .list li {
padding-left: 10px;
display: inline
}
}
@media screen and (max-width:600px) {
footer address dl, footer address dt, footer address dd {
display: inherit
}
footer address dt, footer address dd {
text-align: center
}
footer address {
font-size: .9em
}
footer .list {
font-size: .9em
}
}
@media screen and (max-width:480px) {
header .logo {
padding: 10px 0
}
header .logo img {
width: 75px;
margin: 0 auto
}
#main {
padding-top: 10px;
text-align: left
}
#pankuzu {
display: none
}
#main #form {
margin: 0 2%
}
#main #form h3 {
font-size: 1.1em
}
#main #form p {
font-size: .9em
}
#main #form ul {
margin: 10px 3% 0 3%;
font-size: 1.1em
}
footer {
height: auto;
padding-bottom: 3px
}
.menu-black ul li a span {
font-size: 1.3em
}
footer .links div {
width: 80%;
margin: 0 10% 20px
}
footer .bottom {
height: 60px
}
footer .bottom p, footer .bottom .list {
width: 100%;
text-align: center
}
}
@media screen and (max-width:320px) {
header .inquiry li:first-child {
width: 85%;
font-size: 1.7em
}
#main #form {
padding: 10px
}
footer address dt {
margin-left: 5%
}
footer address dd {
margin-left: 10%
}
footer .links div {
width: 90%;
margin: 0 5% 20px
}
}