@charset "utf-8";

.sp{
display: block;
}
.pc{
display: none;
}
#wrap{
width: 100%;
}
main#wrapInner{
width: 100%;
}
section.section{
width: 90%;
margin: 0 auto;
}
section.section2{
width: 100%;
padding: 10% 0;
background: #42d2ce;
}
section.section3{
width: 80%;
margin: 0 auto;
padding: 7.5% 5% 0;
background: #fff;
}

/* heading
-------------------------------------*/
h2.h2{
width: 100%;
margin-bottom: 20px;
color: #2e6cac;
text-align: center;
}
h2.h2 span{
font-size: 75%;
}
h2.h2-A{
margin: 30px 0 20px;
text-align: center;
}
h3.h3{
margin-bottom: 20px;
}
h3.h3-A{
margin-bottom: 20px;
text-align: center;
}
h4.h4{
margin: 24px 0 20px;
}
h5.h5{
margin-bottom: 3px;
vertical-align: middle;
background: linear-gradient(transparent 50%, #e7d5f3 40%);
}

/* header
-------------------------------------*/
header{
width: 100%;
height: 53px;
background: #fff;
position: fixed;
top: 0;
z-index: 9999;
}
header h1#logo{
padding: 18px 20% 10px 5%;
position: absolute;
top: 0;
z-index: 9993;
}
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: #8539d2;
/*padding: 0.75em 1em;*/
border-bottom: 1px solid #e1e1e1;
}
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,
header nav ul li a:hover 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: #fff;
}
.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: 1em;
font-size: 88%;
color: #222;
text-decoration: none;
border-bottom: 1px solid #e1e1e1;
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-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: 0;
padding: 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:hover{
cursor: pointer;
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: #222;
}
.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-brand:hover{
background: transparent;
}
.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-menu-item:hover{
color: #fff;
background: #0ba39b;
}
.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: #222;
line-height: 2;
}
header nav ul li#shortaboutme span{
font-weight: bold;
color: #222;
}
header p.line{
position: relative;
}
header p.line img{
position: absolute;
bottom: -18px;
}


/* info
-------------------------------------*/
section.info{
line-height: 1.5;
}
section.section article section.info{
margin-top: 40px;
}
section.section article section.info h3.h3{
margin-bottom: 40px;
padding: 0.75em 0;
color: #222;
text-align: center;
background: #e7d5f3;
border-radius: 10px;
}
section.section article section.info h3.h3:after{
color: #fff;
font-size: 75%;
vertical-align: middle;
text-shadow: 1px 1px 30px #8539d2;
text-transform: uppercase;
display: block;
}
section.section article section.info:first-of-type h3.h3:after{
content: "Request materials";
}
section.section article section.info:last-of-type h3.h3:after{
content: "Tel mail consultation";
}
section.section article section.info div figure{
float: left;
width: 40%;
margin-right: 1em;
}

/* sosyoku
-------------------------------------*/
p.line{
margin: 40px 0;
}


/* footer
-------------------------------------*/
footer{
padding: 1em 10px;
border-top: 3px solid #337ab7;
background: #f5f5f5;
color: #333;
position: relative;
}
footer h2{
padding-bottom: 5px;
margin-bottom: 24px;
border-bottom: 1px solid #ccc;
}
footer h3{
margin-bottom: 15px;
}
footer dl dt,footer dl dd{
line-height: 1.8em;
}
footer p#copyright{
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid #e5e5e5;
text-align: center;
}

/* pagetop
-------------------------------------*/
p#pagetop a{
position: fixed;
font-weight: bold;
right: 10px;
bottom: 10px;
z-index: 9999;
opacity: 0.6;
}
p#pagetop a:hover{
opacity: 1;
}