@charset "UTF-8";

@import url("reset.css");

/************************************************************
*************************************************************
************************************************************* 後で消す
@media screen and (max-width: px) {}

背景　高さ÷幅×100＝padding-top％
	height: 0;
	padding-top: 33.2834%;
	background: url("http://keylockhomes.com/lp4/img/") 0 0 no-repeat;
	background-size: contain;
	background-position: center;
テキストシャドウ
	text-shadow: 5px 5px 0px #e01a00, 5px -3px 0px #e01a00, 5px -8px 0px #e01a00, -5px -8px 0px #e01a00;
斜めに
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
	position: relative;
	top: -100px;
	left: -20px;
:nth-child()
:first-child()
:last-child()
:before {
	content:"1";
	color: #fff;
	font-size: 50%;
	background: #e00000;
	padding: 1% 2%;
	margin-right: 2%;
	display: inline-block;
	position: relative;
	top: -10px;}
:after {
	content: "";
	float: right;
	position: relative;
	top: -250px;
	width: 300px;
	height: 220px;
	display: inline-block;
	vertical-align: middle;
	transform: rotate(15deg);}
:before {
	content:"" ;
	margin-right: 3%;
	display:inline-block;
	width: 60px;
	height: 50px;
	background: url("http://keylockhomes.com/lp4/img/kaiketsu_icon.png") no-repeat;	
	background-size:contain;
	vertical-align:middle;}

*/

header {
    position: fixed;
    width: 100%;
    z-index: 100;
}

header nav {}

header nav ul {
    height: 0;
    padding-top: 17.5%;
    background: url("../img/header.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

header nav ul li {
    position: absolute;
    top: 2vw;
}

header nav ul li:nth-child(1) {
    left: 2.5vw;
    top: 2.8vw;
    width: 20%;
}

header nav ul li:nth-child(1) h1 {
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
    line-height: 4vw;
    text-shadow: 2px 2px 5px #fff, -2px 2px 5px #fff, 2px -2px 5px #fff, -2px -2px 5px #fff;
    color: #e01a00;
}

header nav ul li:nth-child(1) h1 span.block {
    display: block;
    font-size: 3.5vw;
}

header nav ul li:nth-child(1) h1 span.block span {
    font-size: 2.5vw;
}

header nav ul li:nth-child(2) {
    top: 3.5vw;
    width: 40%;
    left: 30vw;
    right: 30vw;
}

header nav ul li:nth-child(2) h2 {
    height: 0;
    padding-top: 20%;
    background: url("../img/logo.jpg") 0 0 no-repeat;
    background-size: 100%;
    background-position: center;
    text-indent: -99999px;
}

header nav ul li:nth-child(3) {
    right: 2vw;
    width: 12vw;
    height: 0;
    padding-top: 9vw;
    background: url("../img/tel.gif") 0 0 no-repeat;
    background-size: 100%;
    background-position: center;
}

header nav ul li:nth-child(3) a {
    display: block;
    text-indent: -99999px;
    cursor: pointer;
    position: relative;
    top: -9vw;
    padding-top: 9vw;
}

article#mv {
    height: 0;
    padding-top: 130.9375%;
    background: url("../img/mv.jpg") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

article#mv section {
    position: absolute;
    top: 22vw;
}

article#mv section h1 {
    width: 60vw;
    background: #e01a00;
    padding: 1vw;
    color: #fff;
    font-size: 4vw;
    text-align: center;
    border-radius: 100px;
    position: relative;
    left: 2vw;
}

article#mv section h2 {
    width: 60vw;
    height: 0;
    padding-top: 27%;
    background: url("../img/mv02.png") 0 0 no-repeat;
    background-size: 60vw;
    background-position: center;
    text-indent: -99999px;
    position: relative;
    top: 1.5vw;
    left: 3vw;
}

article#mv section ul#mvTOP {
    width: 98vw;
    height: 0;
    padding-top: 33.90625%;
    background: url("../img/mv03.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: 4vw;
}

article#mv section ul#mvTOP li {
    position: absolute;
    top: 0;
}

article#mv section ul#mvTOP li:nth-child(1) {
    top: 4vw;
    left: 3.2vw;
    text-align: center;
    font-size: 6.4vw;
    color: #fff;
    font-weight: bold;
    line-height: 8vw;
    letter-spacing: -0.2vw;
}

article#mv section ul#mvTOP li:nth-child(1) span {
    display: block;
    font-size: 3.1vw;
}

article#mv section ul#mvTOP li:nth-child(2) {
    top: 3vw;
    width: 40vw;
    right: 1.5vw;
    font-size: 2.6vw;
    font-weight: bold;
    color: #fff;
    line-height: 4vw;
    text-shadow: 1px 2px 2px #1c1c1c;
}

article#mv section ul#mvTOP li:nth-child(3) {
    top: 26vw;
    right: 8vw;
    width: 40vw;
    font-size: 4vw;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 2px 2px #1c1c1c;
    text-align: center;
}

article#mv section ul#mvBTM {
    height: 0;
    padding-top: 36.71875%;
    background: url("../img/mv04.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: 4vw;
}

article#mv section ul#mvBTM li {
    position: absolute;
    top: 10.2vw;
    display: inline-block;
    width: 25vw;
    font-size: 2.5vw;
    font-weight: bold;
    line-height: 3.5vw;
    color: #fff;
    font-family: "Sawarabi Mincho", serif;
    text-align: center;
}

article#mv section ul#mvBTM li:nth-child(1) {
    left: 7vw;
}

article#mv section ul#mvBTM li:nth-child(2) {
    left: 36.5vw;
}

article#mv section ul#mvBTM li:nth-child(3) {
    right: 6.8vw;
}

article#mv section ul#mvBTM li img {
    width: 20vw;
}

article.contact {}

article.contact section {}

article.contact section ul.cntTOP {
    height: 0;
    padding-top: 66.25%;
    background: url("../img/btn01.gif") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

article.contact section ul.cntTOP li {
    text-align: center;
    position: absolute;
}

article.contact section ul.cntTOP li:nth-child(1) {
    /* text-align: left; */
    /* padding-top: 4%; */
    /* padding-left: 5%; */
    /* line-height: 10vw; */
    top: 4.5vw;
    margin: 0 auto;
    width: 100%;
}

article.contact section ul.cntTOP li:nth-child(1) h1 {
    font-size: 6vw;
    font-weight: bold;
}

article.contact section ul.cntTOP li:nth-child(1) h1 span {
    font-size: 8vw;
    color: #ee3f11;
}

/* 1000円クーポン */
article.contact section ul.cntTOP li:nth-child(1) img {
    width: 95%;
    margin: 0 auto;
    display: block;
}

article.contact section ul.cntTOP li:nth-child(2) {
    top: 46vw;
    color: #fff;
    font-size: 5.5vw;
    width: 100%;
    font-weight: bold;
    letter-spacing: 0.4vw;
    text-shadow: 2px 2px #000;
}

article.contact section ul.cntMDL {
    height: 0;
    margin: 3vw 0 0;
    padding-top: 43.75%;
    background: url("../img/btn02.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

article.contact section ul.cntMDL li {
    font-weight: bold;
    text-shadow: 2px 2px 5px #fff, -2px 2px 5px #fff, 2px -2px 5px #fff, -2px -2px 5px #fff;
}

article.contact section ul.cntMDL li:nth-child(1) {
    color: #0036ff;
    font-size: 4.5vw;
    position: absolute;
    top: 20vw;
    left: 2vw;
}

article.contact section ul.cntMDL li:nth-child(2) {
    color: #e00000;
    font-size: 3.5vw;
    position: absolute;
    top: 28vw;
    left: 2vw;
}

article.contact section ul.cntMDL li:nth-child(2) span {
    border: solid 0.5vw #e00000;
    border-radius: 1.2vw;
    vertical-align: middle;
    padding: 0.5vw 1vw 0.3vw;
    margin-right: 1.5vw;
}

article.contact section ul.cntMDL li:nth-child(3) {
    color: #0036ff;
    font-size: 4vw;
    position: absolute;
    top: 36vw;
    left: 2vw;
}
article.contact section ul.cntMDL li:nth-child(4) {
    color: #555555;
    font-size: 4vw;
    position: absolute;
    top: 44vw;
    left: 2vw;
}
article.contact section a {
    display: block;
}

article.contact section a img {
    padding-top: 11%;
}

article.main {}

section#voice {
    height: auto;
    background: url("../img/voice.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 2vw 0;
}

section#voice h1 {
    height: 0;
    padding-top: 32.5%;
    background: url("../img/voice_TTL.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#voice div {
    margin: 3vw;
    padding: 2.5vw;
    background: #fff;
}

section#voice div h2 {
    height: 0;
    padding-top: 25.438596491%;
    background: url("../img/voice.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    color: #fff;
}

section#voice div.case01 h2:before {
    content: "CASE:1";
}

section#voice div.case02 h2:before {
    content: "CASE:2";
}

section#voice div.case03 h2:before {
    content: "CASE:3";
}

section#voice div.case04 h2:before {
    content: "CASE:4";
}

section#voice div.case05 h2:before {
    content: "CASE:5";
}

section#voice div.case06 h2:before {
    content: "CASE:6";
}

section#voice div.case07 h2:before {
    content: "CASE:7";
}

section#voice div.case08 h2:before {
    content: "CASE:8";
}

section#voice div.case09 h2:before {
    content: "CASE:9";
}

section#voice div.case10 h2:before {
    content: "CASE:10";
}

section#voice div h2:before {
    position: absolute;
    top: 0.6vw;
    left: 8vw;
    font-size: 8vw;
    font-family: "Haettenschweiler", sans-serif;
    letter-spacing: .5vw;
}

section#voice div h2 span.caseTOP {
    position: absolute;
    top: 5vw;
    left: 35vw;
    font-size: 4vw;
    font-weight: bold;
}

section#voice div h2 span.caseBTM {
    position: absolute;
    top: 13vw;
    left: 4vw;
    font-size: 5vw;
    font-weight: bold;
}

section#voice div h2 span.caseBTM span {
    font-size: 4vw;
    letter-spacing: 0.5vw;
}

section#voice div h3 {
    margin: 5vw 0 0 2vw;
    background: #5073e9;
    width: 45vw;
    text-align: center;
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    letter-spacing: 0.2vw;
    padding: 0.6vw 0 0.3vw;
}

section#voice div p {
    margin: 2vw 0 0 2vw;
    font-size: 4vw;
    line-height: 7vw;
}

section#trouble {
    margin: 5vw 0 0;
    height: auto;
    background: url("../img/trouble.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
}

section#trouble div.saiyasu {
    height: 0;
    padding-top: 33.28125%;
    background: url("../img/trouble.jpg") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#trouble h1 {
    height: 0;
    padding-top: 33%;
    background: url("../img/trouble.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: -6vw;
    text-indent: -99999px;
}

section#trouble div#troubleBG {
    margin: -3vw 3vw 3vw;
    padding: 2.5vw;
    background: #fff;
}

section#trouble div.troubleBG {
    height: auto;
    background: url("../img/troubleINR.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 1.5vw 2.5vw 3vw;
    position: relative;
}

section#trouble div.troubleBG div.troubleINR {
    margin-top: 32vw;
}

.troubleBG h2 {
    width: 100%;
    position: absolute;
    top: 1vw;
    left: -1.5vw;
    color: #fff;
    font-size: 7vw;
    font-weight: bold;
    text-shadow: 5px 3px 0px #e01a00;
    height: 0;
    padding-top: 33.559322033%;
}

.trouble01 h2 {
    background: url("../img/trouble01.png") 0 0 no-repeat;
}

.trouble02 h2 {
    background: url("../img/trouble02.png") 0 0 no-repeat;
}

.trouble03 h2 {
    background: url("../img/trouble03.png") 0 0 no-repeat;
}

.trouble04 h2 {
    background: url("../img/trouble04.png") 0 0 no-repeat;
}

.trouble05 h2 {
    background: url("../img/trouble05.png") 0 0 no-repeat;
}

.trouble06 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble06.png") 0 0 no-repeat;
}

.trouble07 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble07.png") 0 0 no-repeat;
}

.trouble08 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble08.png") 0 0 no-repeat;
}

.trouble09 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble09.png") 0 0 no-repeat;
}

.trouble10 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble10.png") 0 0 no-repeat;
}

.trouble11 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble11.png") 0 0 no-repeat;
}

.trouble12 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble12.png") 0 0 no-repeat;
}

.trouble13 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble13.png") 0 0 no-repeat;
}

.trouble14 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble14.png") 0 0 no-repeat;
}

.trouble15 h2 {
    background: url("http://keylockhomes.com/lp4/img/trouble15.png") 0 0 no-repeat;
}

.troubleBG h2 {
    background-size: 100%;
    background-position: center;
}

.troubleBG h2 span.troubleH2 {
    position: absolute;
    display: block;
    top: 8vw;
    left: 5vw;
}

.troubleBG p span.price {
    position: absolute;
    top: 17vw;
    left: 3.5vw;
    font-size: 10vw;
    font-family: Haettenschweiler;
    letter-spacing: 1vw;
    color: #fff;
    font-weight: bold;
    text-shadow: 3px 2px 0px #e01a00;
}

.troubleBG p span.price span {
    top: 21vw;
    left: 37vw;
    font-size: 7vw;
    display: inline-block;
}

.troubleBG dl dt {
    font-size: 4vw;
    padding: 20px 20px 0 20px;
    font-weight: bold;
}

.troubleBG dl dt strong {
    font-weight: bold;
    color: #e00000;
    font-size: 4.5vw;
}

.troubleBG dl dd {
    font-size: 4vw;
    padding: 10px 20px 20px 20px;
}

.ac-container {
    width: auto;
    margin: 0 auto;
    background: #fff;
    padding: 2vw 2vw 0;
}

.ac-contMDL {
    padding: 0 2vw 0;
}

.ac-contLST {
    padding: 0 2vw 2vw;
}

.ac-container label {
    width: 74.5vw;
    text-align: center;
    border: solid 1px #ccc;
    padding: 1vw 2vw 2vw;
    position: relative;
    display: block;
    height: 4vw;
    cursor: pointer;
    color: #fff;
}

.ac-container label:hover {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.ac-container label:after {
    content: "+";
}

.ac-container input:checked~label::after {
    content: "-";
    top: -1.7vw !important;
    font-size: 6vw !important;
}

.ac-container label:after,
.ac-container input:checked~label::after {
    color: #737373;
    font-family: "Impact";
    float: right;
    position: relative;
    top: -0.5vw;
    left: -1vw;
    font-size: 5vw;
}

.ac-container label h3 {
    font-size: 4vw;
    float: left;
    font-weight: bold;
}

.ac-container input {
    display: none;
}

.ac-container div {
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition:
        height 0.3s ease-in-out,
        box-shadow 0.6s linear;
}

.ac-container input:checked~div {
    transition:
        height 0.5s ease-in-out,
        box-shadow 0.1s linear;
}

.ac-container div p {
    font-size: 4vw;
    line-height: 7vw;
    padding: 10px 10px 20px 10px;
}

.ac-container input:checked~div {
    clear: both;
    height: auto;
}

div.troubleDCT {
    text-align: center;
    padding: 2vw 0 0;
}

div.troubleDCT small {
    font-size: 3vw;
}

div.troubleDCT small a {
    color: #fff;
    background: #1a0dab;
    padding: 2vw 4vw;
    border-radius: 10px;
    display: block;
    width: 60%;
    margin: 3vw auto 2vw;
}


section#tome {
    height: auto;
    background: url("../img/tome.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#tome h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/tome.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#tome div {
    margin: 3vw;
    padding: 2.5vw;
    background: #fff;
}

section#tome div h2 {
    position: relative;
    color: #fff;
    height: 0;
    padding-top: 25.862068965%;
}

section#tome div.tome01 h2 {
    background: url("../img/tome01.png") 0 0 no-repeat;
}

section#tome div.tome02 h2 {
    background: url("../img/tome02.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

section#tome div.tome03 h2 {
    background: url("../img/tome03.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

section#tome div.tome04 h2 {
    background: url("../img/tome04.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

section#tome div.tome05 h2 {
    background: url("http://keylockhomes.com/lp4/img/tome05.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

section#tome div.tome h2 {
    background-size: contain;
    background-position: center;
    margin-bottom: -2vw;
}

section#tome div h2:before {
    position: absolute;
    top: 0.6vw;
    left: 8vw;
    font-size: 8vw;
    font-family: Haettenschweiler;
    letter-spacing: .5vw;
}

section#tome div h2 span.tomeTTL {
    position: absolute;
    top: 1.2vw;
    left: 8vw;
    font-size: 6vw;
    font-weight: bold;
}

section#tome div h2 span.tomeDCT {
    position: absolute;
    top: 13.5vw;
    left: 4vw;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 2px 3px #000;
}

section#tome div h2 span.tomeDCT span {
    font-size: 4vw;
}

section#tome div dl {
    border: solid 1px #ccc;
    margin: 0 1.55vw 1vw 1.65vw;
    padding: 3vw 2vw 0;
}

section#tome div dt {
    margin: 1vw;
    background: #5073e9;
    width: 94.5%;
    text-align: left;
    color: #fff;
    font-size: 3.8vw;
    font-weight: bold;
    letter-spacing: 0.2vw;
    padding: 0.6vw 0 0.3vw 3vw;
}

section#tome div dd {
    margin: 2vw 0 5vw 2vw;
    font-size: 4vw;
}


section#reason {}

section#reason div.reason {
    height: auto;
    background: url("../img/reason.gif") 0 0 repeat;
    padding: 35vw 0 1vw;
    margin: -35vw auto 0;
    width: 94%;
}

section#reason h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/reason.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#reason div.reason div {
    margin: 3vw;
    padding: 2.5vw;
    background: #fff;
    border: solid 1px #e00000;
}

section#reason div.reason div h2 {
    font-size: 4.4vw;
    font-weight: bold;
    color: #e00000;
}

section#reason div.reason div.reasonTOP h2:before {
    content: "1";
}

section#reason div.reason div.reasonMDL h2:before {
    content: "2";
}

section#reason div.reason div.reasonBTM h2:before {
    content: "3";
}

section#reason div.reason div h2:before {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background: #e00000;
    text-align: center;
    line-height: 9vw;
    font-size: 6vw;
    color: #fff;
    font-weight: bold;
    vertical-align: middle;
    margin-right: 2vw;
}

section#reason div.reason div.reasonTOP {}

section#reason div.reason div.reasonTOP p.reasonTXT,
section#reason div.reason div.reasonMDL p.reasonTXT,
section#reason div.reason div.reasonBTM p {
    border: solid .5vw #e00000;
    margin: 3vw 0;
    padding: 1.5vw;
    font-size: 4vw;
    color: #e00000;
    line-height: 5vw;
    font-weight: bold;
}

section#reason div.reason div.reasonTOP ul li {
    display: inline-block;
    margin: 2.5% 2%;
    vertical-align: middle;
    width: 23vw;
}

section#reason div.reason div.reasonTOP ul li:nth-child(1),
section#reason div.reason div.reasonTOP ul li:nth-child(2) {
    width: 42%;
}

section#reason div.reason div.reasonTOP small {
    color: #e00000;
    font-size: 4vw;
    font-weight: bold;
    padding: 1.5% 0;
    line-height: 1.2;
    margin: 3% 0 0;
    text-align: right;
    display: block;
}

section#reason div.reason div.reasonMDL h3,
section#reason div.reason div.reasonMDL h4 {
    color: #e00000;
    font-size: 4.5vw;
    font-weight: bold;
    margin-top: 2%;
}

section#reason div.reason div.reasonMDL li {
    color: #030303;
    display: inline-block;
}

section#reason div.reason div.reasonMDL li:nth-child(1) {
    width: 56%;
}

section#reason div.reason div.reasonMDL li:nth-child(1),
section#reason div.reason div.reasonMDL li,
section#reason div.reason div.reasonMDL p.reasonBTM {
    color: #030303;
    font-size: 4vw;
    line-height: 1.4;
}

section#reason div.reason div.reasonMDL li:nth-child(2) {
    width: 35%;
    transform: rotate(15deg);
    position: relative;
    top: -30px;
    left: 4%;
}

section#reason div.reason div.reasonBTM ul li {
    display: inline-block;
    width: 20%;
    margin: 2.5% 1.5%;
    vertical-align: middle;
}



section#service {
    height: auto;
    background: url("../img/service.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#service h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/service.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#service div {
    margin: 3vw;
    padding: 2.5vw;
    background: #fff;
}

section#service div h2 {
    color: #fff;
    background: #e00000;
    border-radius: 10px;
    font-size: 4vw;
    font-weight: bold;
    padding-top: 7.285714285%;
    background: url("../img/serviceBar.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

section#service div h2 span {
    position: relative;
    top: -4.5vw;
}

section#service div h2.service01:before {
    content: "1";
}

section#service div h2.service02:before {
    content: "2";
}

section#service div h2.service03:before {
    content: "3";
}

section#service div h2.service04:before {
    content: "4";
}

section#service div h2:before {
    display: inline-block;
    width: 7vw;
    height: 7vw;
    background: #fff;
    text-align: center;
    line-height: 8vw;
    font-size: 5vw;
    color: #e00000;
    font-weight: bold;
    vertical-align: middle;
    margin: 0 2vw;
    border-radius: 10px;
    position: relative;
    top: -4.8vw;
}

section#service div ul {
    margin: 1vw 2.5vw;
}

section#service div ul li {
    display: inline-block;
    font-size: 3.3vw;
    vertical-align: top;
}

section#service div ul li:nth-child(1) {
    width: 65%;
}

section#service div ul li:nth-child(2) {
    width: 32.5%;
}

section#service div ul li a img {
    margin: 3vw 0 0;
}



section#parents {
    height: auto;
    background: url("../img/parents.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#parents h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/parents.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#parents div {
    margin: 3vw;
    padding: 0 0 1vw;
    background: #fff;
}

section#parents div p {
    padding: 0 5vw;
    font-size: 3.8vw;
    line-height: 6vw;
    margin: 3vw 0 6vw;
}

section#parents div p.parentsP {
    padding: 2.5vw;
    font-size: 3.8vw;
    margin: 1vw 0;
}

section#parents div ul {
    height: 0;
    padding-top: 60%;
    background: url("../img/parents01.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

section#parents div ul li {
    position: absolute;
}

section#parents div ul li:nth-child(1) {
    top: 2vw;
    left: 7vw;
}

section#parents div ul li:nth-child(2) {
    top: 1.3vw;
    left: 37vw;
}

section#parents div ul li:nth-child(2) p {
    font-size: 5vw;
    line-height: 6vw;
    text-align: center;
    font-weight: bold;
    color: #e00000;
}

section#parents div ul li dl {}

section#parents div ul li dl dt {
    margin: 2vw 0 0.3vw;
    font-size: 4vw;
    font-weight: bold;
}

section#parents div ul li dl dd {
    font-size: 3.5vw;
    font-weight: bold;
    color: #e00000;
    line-height: 5vw;
}

section#parents div h2 {
    color: #fff;
    border-radius: 10px;
    font-size: 4vw;
    font-weight: bold;
    padding-top: 24.5%;
    background: url("../img/parents02.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: -3vw;
    left: -.5vw;
    margin: 0 0 -3vw;
}

section#parents div h2 span {
    position: absolute;
    top: 12.5vw;
    left: 6vw;
    font-size: 6vw;
}

section#parents div h2.kagishi:before {
    content: "日本鍵師協会";
    display: block;
    position: absolute;
    top: 1vw;
    left: 5vw;
    font-size: 6vw;
}

section#parents div h2.joumae:before {
    content: "日本錠前技師協会";
    display: block;
    position: absolute;
    top: 1vw;
    left: 5vw;
    font-size: 6vw;
}

section#comparison {
    height: auto;
    background: url("../img/comparison.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#comparison h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/comparison.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#comparison div {
    margin: 3vw;
    padding: 3vw 3.25vw;
    background: #fff;
}

section#area {
    height: auto;
    background: url("../img/area.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#area h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/area.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#area div {
    margin: 3vw;
    padding: 3vw 3.25vw;
    background: #fff;
}

section#area table {
    border-top: solid 3px #e00000;
    border-bottom: solid 3px #e00000;
}

section#area table tr th,
section#area table tr td {
    color: #e00000;
    font-size: 5vw;
    font-weight: bold;
    vertical-align: middle;
}

section#area table tr th {
    width: 20%;
    padding: 3%;
    text-align: center;
}

section#area table tr td {
    width: 62%;
    padding: 3%;
}

section#area table tr {
    border-bottom: solid 3px #e00000;
}

section#area table tr:last-child {
    border-bottom: none;
}

section#area table tr th {
    border-right: solid 3px #e00000;
}


section#faq {
    height: auto;
    background: url("../img/faq.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#faq h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/faq.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#faq div {
    margin: 3vw;
    padding: 3vw 3.25vw;
    background: #fff;
}

section#faq dl {
    position: relative;
    left: 11vw;
    width: 76vw;
}

section#faq dl dt,
section#faq dl dd {
    text-indent: -7vw;
    font-size: 3.5vw;
    font-weight: bold;
}

section#faq dl dt {
    color: #e00000;
}

section#faq dl dd {
    clear: both;
    margin: 1vw 0 5vw;
}

section#faq dl dt:before {
    content: "Ｑ";
    background: #e00000;
}

section#faq dl dd:before {
    content: "Ａ";
    background: #0036ff;
}

section#faq dl dt:before,
section#faq dl dd:before {
    display: inline-block;
    width: 7vw;
    height: 7vw;
    text-align: center;
    line-height: 7vw;
    font-size: 3.5vw;
    color: #fff;
    position: relative;
    left: -3vw;
    text-indent: 0vw;
}

section#company {
    height: auto;
    background: url("http://keylockhomes.com/lp4/img/company.gif") 0 0 repeat-y;
    background-size: 100%;
    padding: 0 0 1vw;
    margin: 5vw 0;
}

section#company h1 {
    height: 0;
    padding-top: 35.9375%;
    background: url("../img/company.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    text-indent: -99999px;
}

section#company div {
    margin: 3vw;
    padding: 3vw 3.25vw;
    background: #fff;
}

section#company h1 {
    height: 0;
    padding-top: 35.16%;
    background: url("../img/company.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    text-indent: -99999px;
}

section#company dl {
    width: 90%;
    margin: 5% auto;
    font-size: 3.5vw;
    font-weight: bold;
}

section#company dl dt {
    width: 27%;
    color: #fff;
    background: #284d9b;
    text-align: center;
    float: left;
    clear: left;
    padding: 1vw 2vw;
    border-radius: 5px;
    margin: 2vw 2vw 0 0;
    vertical-align: middle;
}

section#company dl dd {
    margin-top: 3%;
    margin-left: 5%;
    color: #030303;
    width: 60%;
    text-align: left;
    float: left;
    vertical-align: middle;
}

section#company dl dd a {
    color: #030303;
}

section#company dl dd:last-child {
    margin-bottom: 100px;
}

footer {
    clear: both;
    display: block;
    background: #0036ff;
    text-align: center;
    padding: 2.5% 0;
    font-size: 200%;
}

footer p small {
    color: #fff;
    font-size: 3.8vw;
}

section.ryokin {
    width: 100%;
    padding: 15vw 0 0;
}

section.ryokin img {
    width: 98%;
}

section.ryokin h1 {
    margin: 50px 0 0;
    height: 0;
    padding-top: 35.16%;
    background: url("../img/ryokin.png") 0 0 no-repeat;
    background-size: contain;
    background-position: center;
    text-indent: -99999px;
}

section.ryokin small a {
    color: #fff;
    background: #1a0dab;
    padding: 2vw 4vw;
    border-radius: 10px;
    display: block;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    font-size: 4vw;
}

@media screen and (min-width: 641px) and (max-width: 768px) {}

@media screen and (min-width: 321px) and (max-width: 640px) {

    section#voice div h2:before {
        left: 7.5vw;
        font-size: 6.5vw;
        font-family: unset;
        letter-spacing: -0.2vw;
    }

    .troubleBG h2 span.price {
        top: 15vw;
        left: 4.5vw;
        font-size: 13vw;
        font-family: unset;
        letter-spacing: -.6vw;
    }

    .troubleBG h2 span.price span {
        top: 21vw;
        left: 37vw;
        font-size: 7vw;
        width: 40vw;
    }


    .ac-container label:after,
    .ac-container input:checked~label::after {
        color: #737373;
        font-family: "Impact";
        float: right;
        position: relative;
    }

    section#tome div h2:before {
        position: absolute;
        top: 0.6vw;
        left: 8vw;
        font-size: 8vw;
        font-family: Haettenschweiler;
        letter-spacing: .5vw;
    }
}

@media screen and (min-width: 0px) and (max-width: 414px) {}

@media screen and (min-width: 726px) {
    main {
        padding: 15% 0 0;
    }
}

@media screen and (min-width: 769px) {
    main {
        padding: 9% 0 0;
    }
}

@media screen and (min-width: 800px) {
    main {
        padding: 13% 0 0;
    }
}

@media screen and (min-width: 930px) {
    main {
        padding: 10% 0 0;
    }
}

@media screen and (min-width: 1200px) {
    main {
        padding: 8% 0 0;
    }
}

@media screen and (min-width: 1500px) {
    main {
        padding: 6% 0 0;
    }
}

@media screen and (min-width: 2000px) {
    main {
        padding: 4% 0 0;
    }
}