@charset "utf-8";

@media all and (min-width:751px) and (max-width: 1920px) {
main#wrapInner{
width: 1000px;
margin: 0 auto;
}
}

main#wrapInner{
background: #fff;
line-height: 1.5;
}
/* section
-------------------------------------*/
article.article{
}
section.section{
padding: 40px 20px;
}
section.section2{
padding: 40px 20px;
text-align: center;
background: #fff;
}

/* header
-------------------------------------*/
header{
width: 100%;
background: #fff;
}
header h1#logo{
width: 100%;
}
header h1#logo img{
margin: 0 auto;
}
header h1#logo a,
header h1#logo img{
display: block;
vertical-align: middle;
}
header nav ul li{
line-height: 1.2;
}
header nav ul li a.active{
width: 100%;
font-size: 88%;
text-decoration: none;
color: #fff;
/*padding: 0.75em 1em;*/
background: #0ba39b;
border-bottom: 1px solid #fff;
}
header nav ul li a span{
font-size: 75%;
font-weight: bold;
color: #0ba39b;
margin-left: 0.17em;
}
header nav ul li a.active span{
font-weight: bold;
color: #222;
}
header nav ul li a span.sns:after{
margin-left: 5px;
content: "\f2d2";
font-size: 88%;
font-weight: normal;
font-family: fontAwesome;
}
header nav ul li#copyright{
padding-top: 1.5em;
font-size: 75%;
line-height: 1.3;
}
header nav ul li#copyright small.drawer-menu-item{
border-bottom: none;
}
.drawer-open{
overflow: hidden!important;
}
.drawer-nav{
position: fixed;
z-index: 9995;
top: 0;
right: 0;
overflow: hidden;
width: 16.25rem;
height: 100%;
color: #222;
background: #4A3A2B;
}
.drawer-brand{
font-size: 1.5rem;
font-weight: 700;
line-height: 3.75rem;
display: block;
padding-right: .75rem;
padding-left: .75rem;
text-decoration: none;
color: #fff;
}
.drawer-menu{
margin: 0;
padding: 0;
list-style: none;
}
.drawer-menu-item{
/*padding: 0.75em 1em;*/
font-size: 88%;
color: #222;
text-decoration: none;
border-bottom: 1px solid #fff;
display: block;
}
.drawer-overlay{
position: fixed;
z-index: 9994;
top: 0;
right: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
}
.drawer-open .drawer-overlay{
display: block;
}
.drawer--top .drawer-nav{
top: -100%;
right: 0;
width: 100%;
height: auto;
max-height: 100%;
-webkit-transition: top .6s cubic-bezier(.19,1,.22,1);
transition: top .6s cubic-bezier(.19,1,.22,1);
}
.drawer--top.drawer-open .drawer-nav{
top: 0;
}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{
right: 0;
}
.drawer-right .drawer-nav{
right: -16.25rem;
-webkit-transition: left .6s cubic-bezier(.19,1,.22,1);
transition: right .6s cubic-bezier(.19,1,.22,1);
}
.drawer-right .drawer-hamburger,.drawer-right.drawer-open .drawer-nav,.drawer-right.drawer-open .drawer-navbar .drawer-hamburger{
right: 0;
}
.drawer-right.drawer-open .drawer-hamburger{
right: 16.25rem;
}
.drawer-right .drawer-nav{
right: -16.25rem;
-webkit-transition: right .6s cubic-bezier(.19,1,.22,1);
transition: right .6s cubic-bezier(.19,1,.22,1);
}
.drawer-right .drawer-hamburger,.drawer-right.drawer-open .drawer-nav,.drawer-right.drawer-open .drawer-navbar .drawer-hamburger{
right: 0;
}
.drawer-right .drawer-hamburger,.drawer-right.drawer-open .drawer-navbar .drawer-hamburger{
margin-top: 12.5px;
}
.drawer-right.drawer-open .drawer-hamburger{
right: 16.25rem;
}
.drawer-hamburger{
position: fixed;
z-index: 9998;
top: 0;
display: block;
box-sizing: content-box;
width: 2.25rem;
padding: 15px 12.5px 15px 20px;
-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
transition: all .6s cubic-bezier(.19,1,.22,1);
-webkit-transform: translateZ(0);
transform: translateZ(0);
border: 0;
outline: 0;
background: transparent;
}
.drawer-hamburger-icon{
position: relative;
display: block;
margin-top: 10px;
}
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
width: 100%;
height: 4px;
-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
transition: all .6s cubic-bezier(.19,1,.22,1);
background: #4A3A2B;
}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
position: absolute;
top: -11px;
right: 0;
content: "";
}
.drawer-hamburger-icon:after{
top: 11px;
}
.drawer-open .drawer-hamburger-icon{
background: transparent;
}
.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{
top: 0;
}
.drawer-open .drawer-hamburger-icon:before{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.drawer-open .drawer-hamburger-icon:after{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sr-only{
position: absolute;
overflow: hidden;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.sr-only-focusable:active,.sr-only-focusable:focus{
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
.drawer-sidebar,.drawer-sidebar .drawer-contents{
background: #fff;
}
.drawer--navbarTopGutter{
padding-top: 3.75rem;
}
.drawer-navbar .drawer-navbar-header{
border-bottom: 1px solid #ddd;
background: #fff;
}
.drawer-navbar{
z-index: 9996;
top: 0;
width: 100%;
}
.drawer-navbar--fixed{
position: fixed;
}
.drawer-navbar-header{
position: relative;
z-index: 9997;
box-sizing: border-box;
width: 100%;
height: 3.75rem;
padding: 0 .75rem;
text-align: center;
}
.drawer-navbar .drawer-brand{
line-height: 3.75rem;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
text-decoration: none;
}
.drawer-navbar .drawer-nav{
padding-top: 3.75rem;
}
.drawer-navbar .drawer-menu{
padding-bottom: 7.5rem;
}
.drawer-dropdown-menu{
display: none;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
}
.drawer-dropdown-menu>li{
width: 100%;
list-style: none;
}
.drawer-dropdown-menu-item{
line-height: 3.75rem;
display: block;
padding: 0;
padding-right: .75rem;
padding-left: 1.5rem;
text-decoration: none;
color: #222;
}
.drawer-dropdown.open>.drawer-dropdown-menu{
display: block;
}
.drawer-dropdown .drawer-caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
-webkit-transition: opacity .2s ease,-webkit-transform .2s ease;
transition: opacity .2s ease,-webkit-transform .2s ease;
transition: transform .2s ease,opacity .2s ease;
transition: transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.drawer-dropdown.open .drawer-caret{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.drawer-container{
margin: 0 auto;
}
header nav ul li#shortaboutme{
width: 90%;
padding: 20px 5%;
font-size: 75%;
color: #fff;
line-height: 1.4;
}
header nav ul li#shortaboutme span{
font-weight: bold;
color: #222;
}
header p#info{
padding-left: 12.5px;
z-index: 9993;
position: absolute;
position: relative;
/*top: 50px;*/
top: 46px;
}
header p#info span.yoyaku a,
header p#info span.shiryo a,
header p#info span.mailform a{
/*padding: 0.5em;*/
padding: 0.75em 0;
font-size: 70%;
color: #fff;
text-decoration: none;
box-shadow: 0 3px 2px #abb9bb;
box-shadow: 1px 3px 2px rgba(0,0,0,0.25);
}
@media screen and (min-width: 350px){
header p#info span.yoyaku a,
header p#info span.shiryo a,
header p#info span.mailform a{
/*padding: 0.65em;*/
padding: 0.75em 0;
font-size: 75%;
}
}
header p#info span.yoyaku a{
background: #f45d77;
border: 1px solid #bd374f;
border-radius: 5px;
}
header p#info span.shiryo a{
background: #00a99d;
border: 1px solid #008789;
border-radius: 5px;
}
header p#info span.mailform a{
background: #036eb4;
border: 1px solid #035796;
border-radius: 5px;
}
header p#info span.yoyaku a:after,
header p#info span.shiryo a:after,
header p#info span.mailform a:after{
content: "\f105";
margin-left: 0.25em;
color: #fff;
font-family: fontAwesome;
}
header p#info span.tel a{
position: absolute;
right: 7%;
bottom: -11px;
}
/*header p#info span a{
display: inline;
vertical-align: middle;
}*/
header p#info span a{
width: 40%;
display: inline-block;
text-align: center;
vertical-align: middle;
}


/* mailform-header
-------------------------------------*/
header#mailform-header{
height: 85px;
}
header#mailform-header h1#logo{
padding-bottom: 15px;
background: #036eb4;
}
header#mailform-header nav{
width: 100%;
padding-top: 10px;
position: absolute;
bottom: 10%;
}
header#mailform-header nav ul{
width: 80%;
margin: 0 auto;
text-align: center;
}
header#mailform-header nav ul li{
width: 33.3%;
float: left;
position: relative;
}
header#mailform-header nav ul li:nth-of-type(odd):before,
header#mailform-header nav ul li:nth-of-type(odd):after{
content: "£ü";
vertical-align: middle;
display: inline-block;
position: absolute;
top: 2.1px;
}
header#mailform-header nav ul li:nth-of-type(odd):before{
left: -1em;
margin-left: 0.5em;
}
header#mailform-header nav ul li:nth-of-type(odd):after{
right: -1em;
margin-right: 0.5em;
}
header#mailform-header nav ul li a{
width: 100%;
text-align: center;
vertical-align: middle;
color: #222;
font-size: 88%;
text-decoration: none;
}

/* form
-------------------------------------*/
section.form{
padding: 40px 20px;
}
section.form p#breadcrumb{
margin: 60px 0 20px;
}
section.form nav.step ul{
margin: 0 0 20px;
padding: 10px 0;
background: #F7F3F0;
display: block;
text-align: center;
}
section.form p{
font-size: 88%;
text-align: center;
}
section.form nav.step ul li{
margin-right: 0.25em;
display: inline;
}
section.form nav.step ul li:after{
content: "\f105";
margin-left: 0.25em;
font-family: fontAwesome;
}
section.form nav.step ul li:last-of-type:after{
content: "";
}
section.form nav.step ul li.naw{
color: #f00;
}
section.form nav.step ul li.fix{
color: #390;
}
section.form h2{
margin-bottom: 20px;
padding: 20px;
display: block;
text-align: center;
}
section.form h2.h2-form{
margin-bottom: 20px;
padding: 0;
background: none;
vertical-align: middle;
}
section.form dl{
display: block;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eeeeee;
}
section.form dl dt{
margin-bottom: 12px;
display: block;
font-size: 100%;
font-weight: bold;
width: auto;
float: none;
line-height: 20px;
}
section.form dl dt.circle{
text-indent: -1em;
padding-left: 1em;
line-height: 1.5;
}
section.form dl dt.circle:before{
content: "\f111";
font-family: fontAwesome;
}
section.form dl dd{
font-size: 88%;
}
section.form dd#checkbox{
position: relative;
background: url(/images/common/mailform-img-02.png)no-repeat center center;
background-size: 120%;
height: 400px;
}
@media screen and (min-width: 360px){
section.form dd#checkbox{
height: 480px;
}
}
@media screen and (min-width: 430px){
section.form dd#checkbox{
height: 600px;
}
}
@media screen and (min-width: 500px){
section.form dd#checkbox{
height: 690px;
}
}
@media screen and (min-width: 600px){
section.form dd#checkbox{
height: 800px;
}
}
@media screen and (min-width: 700px){
section.form dd#checkbox{
height: 1000px;
}
}
section.form dd#checkbox label:nth-of-type(1) input{
position: absolute;
top: 10%;
left: 40%;
}
section.form dd#checkbox label:nth-of-type(2) input{
position: absolute;
top: 13%;
left: 30.5%;
}
section.form dd#checkbox label:nth-of-type(3) input{
position: absolute;
top: 17%;
left: 22%;
}
section.form dd#checkbox label:nth-of-type(4) input{
position: absolute;
top: 22%;
left: 15%;
}
section.form dd#checkbox label:nth-of-type(5) input{
position: absolute;
top: 28%;
left: 10%;
}
section.form dd#checkbox label:nth-of-type(6) input{
position: absolute;
top: 34.5%;
left: 6.5%;
}
section.form dd#checkbox label:nth-of-type(7) input{
position: absolute;
top: 41%;
left: 4%;
}
section.form dd#checkbox label:nth-of-type(8) input{
position: absolute;
top: 10%;
right: 38.5%;
}
section.form dd#checkbox label:nth-of-type(9) input{
position: absolute;
top: 13%;
right: 29%;
}
section.form dd#checkbox label:nth-of-type(10) input{
position: absolute;
top: 17%;
right: 20.5%;
}
section.form dd#checkbox label:nth-of-type(11) input{
position: absolute;
top: 22%;
right: 13.5%;
}
section.form dd#checkbox label:nth-of-type(12) input{
position: absolute;
top: 28%;
right: 8.5%;
}
section.form dd#checkbox label:nth-of-type(13) input{
position: absolute;
top: 34.5%;
right: 5%;
}
section.form dd#checkbox label:nth-of-type(14) input{
position: absolute;
top: 41%;
right: 2.5%;
}
section.form dd#checkbox label:nth-of-type(15) input{
position: absolute;
bottom: 10%;
left: 40%;
}
section.form dd#checkbox label:nth-of-type(16) input{
position: absolute;
bottom: 13%;
left: 30.5%;
}
section.form dd#checkbox label:nth-of-type(17) input{
position: absolute;
bottom: 17%;
left: 22%;
}
section.form dd#checkbox label:nth-of-type(18) input{
position: absolute;
bottom: 22%;
left: 15%;
}
section.form dd#checkbox label:nth-of-type(19) input{
position: absolute;
bottom: 28%;
left: 10%;
}
section.form dd#checkbox label:nth-of-type(20) input{
position: absolute;
bottom: 34.5%;
left: 6.5%;
}
section.form dd#checkbox label:nth-of-type(21) input{
position: absolute;
bottom: 41%;
left: 4%;
}
section.form dd#checkbox label:nth-of-type(22) input{
position: absolute;
bottom: 10%;
right: 38.5%;
}
section.form dd#checkbox label:nth-of-type(23) input{
position: absolute;
bottom: 13%;
right: 29%;
}
section.form dd#checkbox label:nth-of-type(24) input{
position: absolute;
bottom: 17%;
right: 20.5%;
}
section.form dd#checkbox label:nth-of-type(25) input{
position: absolute;
bottom: 22%;
right: 13.5%;
}
section.form dd#checkbox label:nth-of-type(26) input{
position: absolute;
bottom: 28%;
right: 8.5%;
}
section.form dd#checkbox label:nth-of-type(27) input{
position: absolute;
bottom: 34.5%;
right: 5%;
}
section.form dd#checkbox label:nth-of-type(28) input{
position: absolute;
bottom: 41%;
right: 2.5%;
}
section.form dd.radio input,
section.form dd.checkbox input{
width: 25px;
margin-right: 0.25em;
vertical-align: middle;
transform: scale(1.8);
-webkit-transform: scale(1.8);
}
section.form dd.radio input span,
section.form dd.checkbox input span{
padding-top: 3px;
vertical-align: middle;
}
section.form dd.radio label:nth-of-type(2),
section.form dd.radio label:nth-of-type(3){
margin-left: 1em;
}
section.form input[type=text],
section.form input[type=tel],
section.form input[type=number],
section.form input[type=email],
section.form select,
section.form textarea{
width: 94%;
margin-bottom: 10px;
padding: 8px;
background: #ebe7e6;
border: 1px solid #ebe7e6;
border-radius: 3px;
box-shadow: 0 2px 2px rgba(0,0,0,0.03) inset;
}
section.form div.btn{
text-align: center;
}
section.form input[type=submit],
section.form input.syusei,
section.form p#home a,
section.form input#btn{
cursor: pointer;
min-width: 130px;
padding: 10px;
font-size: 100%;
font-weight: bold;
color: #fff;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: #6F6657;
border-color:#222;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0.5em;
text-decoration: none;
vertical-align: middle;
text-align: center;
}
section.form input.syusei{
background: #C0A877;
}
section.form input#btn{
min-width: 10%;
background: linear-gradient(#eee,#ccc);
border: 1px solid #bbb;
color: #555;
padding: 0.55em 1em;
vertical-align: top;
}
section.form label.lh{
display: inline-block;
margin-top: 10px;
}
section.form dl#newline{
margin-top: 40px;
}
section.form dl#newline dt:before{
content: "\A";
}
section.form dl#newline dt{
background: #ebe7e6;
padding: 0.75em;
}
section.form dl#newline dd{
margin-bottom: 1.25em;
padding: 0 1em;
width: 95%;
display: inline-block;
}
section.form .any,
section.form .rep{
margin-left: 10px;
padding: 2px 4px;
font-size: 75%;
color: #fff;
font-weight: normal;
vertical-align: middle;
border-radius: 2px;
}
section.form .any{
background: #666;
}
section.form .rep{
background:#c00;
}
section.form .maru{
font-size: 75%;
vertical-align: text-top;
padding-right: 0.15em;
color:#e1d195;
}
section.form textarea{
overflow: auto;
vertical-align: top;
resize: vertical;
height: 200px;
min-height: 200px;
max-height: 350px;
}
section.form optgroup{
background: #eee;
}
section.form optgroup option{
background: #fff;
}
section.form2 p{
margin: 1em 0;
}
section.form p#home{
margin: 20px 0 0 0;
}

/* footer
-------------------------------------*/
footer{
padding: 0 1em 60px;
background: #333;
color: #fff;
line-height: 2.0;
}

/* pagetop
-------------------------------------*/
p#pagetop a{
width: 100%;
margin-top: 60px;
padding: 1em 0;
background: #4A3A2B;
color: #fff;
text-align: center;
text-decoration: none;
display: block;
position: fixed;
bottom: 0;
z-index: 9999;
}