@charset "UTF-8";
/* CSS Document */

/* -----------RESET----------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section
{margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}
/* clear Fix */
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
.clr{clear:both;}
section {clear:both; zoom:1;}
header:after,footer:after,nav:after,article:after,main:after,section:after,dl:after,/*ul:after,*/.inner:after,.clrFx:after{content:''; clear:both; display:block;}
img{-ms-interpolation-mode: bicubic;}
/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button {outline:none;}

/* -----------BASE SET----------- */
html{overflow:visible;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#333; background:#fff;}
/* font family */
body {-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
button {font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; cursor:pointer;}
/* link color */
a:link {color:#333; text-decoration: underline;}
a:visited {color:#333; text-decoration:none;}
a:hover {color:#18c0cf; text-decoration:none;}
a:active {color:#333; text-decoration:none;}
a,button,input {-webkit-tap-highlight-color:rgba(24,192,207,0.5);}
/* leyoutblock */
header,footer,section,main,nav,.fat-nav,#fixed,#header {font-size:0; line-height: 1;}
header img,footer img,section img,main img,#header img {width:100%; height:auto;}

/* 
	common
	
*****************************************************/
nav a:link {color:#333; text-decoration: none;}

/* 
	for SP
	
*****************************************************/
@media screen and (max-width:500px){
	
	.pcitem {display: none;}
	
    /* ---------------------------------
				  header
	--------------------------------- */
	header h1 {display: block; width: 33.5vw; height: 5vw; background:url("../images/common/h_logo.png"); background-size: 100%; float: left; margin: 4vw;}
    header ul li:last-child p,
    header ul li:last-child dl {display: none;}
	/* fixedDrawer 
	.fixed {position: fixed; width: 100%;}
	#top .fixed h1 {display: block; width: 188.5px; height: 28.5px; background:url("../images/common/h_logo@70.png") no-repeat; background-size: 100%; float: left; margin: 30px;}
	/* --Base */
	.drawer-open {overflow: hidden !important;}
	.drawer-nav {position: fixed; z-index: 101; top: 0; overflow: hidden; width: 100vw; height: 100%; color: #222; background-color: #fff;}
	/* --Right */
	.drawer--right .drawer-nav {right: -100vw; -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
	.drawer--right.drawer-open .drawer-nav,.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {right: 0;}
	.drawer--right.drawer-open .drawer-hamburger {right: 0;}
	/* --icon */
	.drawer-hamburger {position: fixed; z-index: 104; top: 0; display: block; box-sizing: content-box; width: 6vw; padding: 4.8vw 4vw; border: 0; outline: 0; background-color: transparent; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
	.drawer-hamburger:hover {cursor: pointer; background-color: transparent;}
	.drawer-hamburger-icon {position: relative; display: block; margin-top: 10px;}
	.drawer-hamburger-icon,
	.drawer-hamburger-icon:before,
	.drawer-hamburger-icon:after {width: 100%; height: 2px; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); background: #333;}
	.drawer-hamburger-icon:before,
	.drawer-hamburger-icon:after {position: absolute; top: -1.4vw; left: 0; content: ' ';}
	.drawer-hamburger-icon:after {top: 1.4vw;}
	.drawer-open .drawer-hamburger-icon {background: none;}
	.drawer-open .drawer-hamburger-icon:before,
	.drawer-open .drawer-hamburger-icon:after {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);}
	.drawer-menu {display: block; width: 80vw; margin: 15vw auto 0;}
    .drawer-menu li {font-size: 10vw; font-weight: bold; letter-spacing: 0.12em; margin-right: 0; padding-top: 0; margin-bottom: 7vw;}
	/*.drawer-menu li:last-child {padding-top: 5vw;}*/
    .drawer-menu li:last-child p {display: block; font-size: 3.4vw; font-weight: normal; letter-spacing: 0.05em; line-height: 1.8em; margin-bottom: 3vw;}
    .drawer-menu li:last-child dl {display: block; border-top: 1px solid #ccc; width: 80vw; margin-top: 5vw; padding-top: 5vw;}
    .drawer-menu li:last-child dl dt {width: 59.1vw; margin-bottom: 1.7vw; line-height: 0;}
    .drawer-menu li:last-child dl dd {font-size: 3.2vw; font-weight: normal; letter-spacing: 0.05em; line-height: 1.5;}
    .drawer-menu li:last-child a {display: table-cell; position: relative; width: 80vw; height: 16vw; background: #ffe507; border-radius: 1vw; text-align: center; vertical-align: middle; font-size: 5.6vw; letter-spacing: 0.05em;}
	.drawer-menu li:last-child a span:before {content: ""; display: inline-block; background: url("../images/common/contact_icon_large.png"); width: 6.2vw; height: 4.7vw; background-size: 100%; margin-right: 2vw;}
	/* current */
	.drawer-menu li a {position: relative;}
    #top .drawer-menu li:nth-child(1) a,
	#promise .drawer-menu li:nth-child(2) a,
	#service .drawer-menu li:nth-child(3) a,
	#aboutus .drawer-menu li:nth-child(4) a {color: #18c0cf;}
    #top .drawer-menu li:nth-child(1) a:after,
	#promise .drawer-menu li:nth-child(2) a:after,
	#service .drawer-menu li:nth-child(3) a:after,
	#aboutus .drawer-menu li:nth-child(4) a:after {position: absolute; bottom: -1vw; left: 0; content: ''; width: 100%; height: 4px; background: #18c0cf;}
    /* ---------------------------------
				  footer
	--------------------------------- */
    footer {border-top: 1px solid #ccc; padding: 5vw; font-size: 3vw; letter-spacing: 0.05em;text-align: center;}
    footer dl dt {width: 59.1vw; margin: 0 auto;}
    footer dl dd {margin: 3vw 0;}
	
}

/* 
	for PC
	
*****************************************************/
@media screen and (min-width:501px){
	
	.spitem {display: none;}
	body,header,main,footer {min-width: 1200px;}
	
    /* ---------------------------------
				  header
	--------------------------------- */
	header {position: absolute; width: 100%; z-index: 100;}
	header h1 {display: block; width: 268.5px; height: 40px; background:url("../images/common/h_logo.png"); background-size: 100%; float: left; margin: 40px;}
	#top header h1 {display: block; width: 240px; height: 240px; background: url("../images/top/top_logo.png"); background-size: 100%; float: left; margin: 0;}
	header button {display: none;}
	header nav { float: right;}
	header ul {font-size: 14px; letter-spacing: 0.1em; font-weight: bold; display: inline-flex; margin-top: 40px;}
	header ul li {margin-right: 50px; padding-top: 15px;}
	header ul li a {position: relative; display: inline-block;}
	header ul li a:after {position: absolute; bottom: -10px; left: 0; content: ''; width: 100%; height: 2px; background: #18c0cf; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;}
	header ul li a:hover {color: #18c0cf;}
	header ul li a:hover:after {transform-origin: left top; transform: scale(1, 1);}
	header ul li:last-child {margin-right: 0; padding-top: 0;}
    header ul li:last-child p,
    header ul li:last-child dl {display: none;}
	header ul li:last-child a {display: table-cell; width: 200px; height: 40px; background: #ffe507; border-radius: 20px 0 0 20px; text-align: center; vertical-align: middle;}
	header ul li:last-child a:after {content: none;}
	header ul li:last-child a span:before {content: ""; display: inline-block; background: url("../images/common/contact_icon.png"); width: 16px; height: 12px; background-size: 100%; margin-right: 10px;}
	header ul li:last-child a:hover {background: #333; transition: all  0.3s ease;}
	header ul li:last-child a:hover span:before {background: url("../images/common/contact_icon_hover.png"); width: 16px; height: 12px;background-size: 100%;}
	/* current */
	#top header ul li:nth-child(1) a:after,
	#promise header ul li:nth-child(2) a:after,
	#service header ul li:nth-child(3) a:after,
	#aboutus header ul li:nth-child(4) a:after {position: absolute; bottom: -10px; left: 0; content: ''; width: 100%; height: 2px; background: #18c0cf; transform: scale(1);}
	/* fixedDrawer */
    .fixed h1 {display: none;}
	.fixed {position: fixed; width: 100%;}
	#top .fixed h1 {display: none;}
	/* --Base */
	.drawer-open {overflow: hidden !important;}
	.fixed .drawer-nav {position: fixed; z-index: 101; top: 0; overflow: hidden; width: 100vw; height: 100%; color: #222; background-color: #fff;}
	/* --Right */
	.drawer--right .drawer-nav {right: -100vw; -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
	.drawer--right.drawer-open .drawer-nav,.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {right: 0;}
	.drawer--right.drawer-open .drawer-hamburger {right: 0;}
	/* --icon */
	.fixed .drawer-hamburger {position: absolute; z-index: 104; top: 0; display: block; box-sizing: content-box; width: 40px; padding: 30px; border: 0; outline: 0; background-color: transparent; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
	.fixed .drawer-hamburger:hover {cursor: pointer; background-color: transparent;}
	.fixed .drawer-hamburger-icon {position: relative; display: block; margin-top: 10px;}
	.fixed .drawer-hamburger-icon,
	.fixed .drawer-hamburger-icon:before,
	.fixed .drawer-hamburger-icon:after {width: 100%; height: 2px; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); background: #333;}
	.fixed .drawer-hamburger-icon:before,
	.fixed .drawer-hamburger-icon:after {position: absolute; top: -8px; left: 0; content: ' ';}
	.fixed .drawer-hamburger-icon:after {top: 8px;}
	.drawer-open .drawer-hamburger-icon {background: none;}
	.drawer-open .drawer-hamburger-icon:before,
	.drawer-open .drawer-hamburger-icon:after {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);}
	/* --menu */
	.fixed ul.drawer-menu {display: block; position: absolute; width: 920px; margin: 0; top: 50%; left: 50%; margin-left: -460px; margin-top: -230px;}
    .fixed ul.drawer-menu li {font-size: 60px; letter-spacing: 0.12em; margin-right: 0; padding-top: 0; margin-bottom: 36px;}
	.fixed ul li a:after {height: 5px;}
    .fixed ul.drawer-menu li:last-child {position: absolute; top: 0; right: 0;}
    .fixed ul.drawer-menu li:last-child p {display: block; font-size: 15px; font-weight: normal; letter-spacing: 0.05em; line-height: 1.8em; margin-bottom: 25px;}
    .fixed ul.drawer-menu li:last-child dl {display: block; border-top: 1px solid #ccc; width: 450px; margin-top: 30px; padding-top: 30px;}
    .fixed ul.drawer-menu li:last-child dl dt {width: 196.5px; margin-bottom: 15px; line-height: 0;}
    .fixed ul.drawer-menu li:last-child dl dd {font-size: 14px; font-weight: normal; letter-spacing: 0.05em; line-height: 2.2;}
    .fixed ul.drawer-menu li:last-child a {display: table-cell; width: 450px; height: 75px; background: #ffe507; border-radius: 10px; text-align: center; vertical-align: middle; font-size: 30px; letter-spacing: 0.05em;}
	.fixed ul.drawer-menu li:last-child a span:before {content: ""; display: inline-block; background: url("../images/common/contact_icon_large.png"); width: 31px; height: 23.5px; background-size: 100%; margin-right: 17px;}
	.fixed ul li:last-child a:hover {background: #333; transition: all  0.3s ease;}
	.fixed ul.drawer-menu li:last-child a:hover span:before {background: url("../images/common/contact_icon_hover_large.png"); width: 31px; height: 23.5px; background-size: 100%;}
	/* current */
    #top .fixed  ul li:nth-child(1) a,
	#promise .fixed  ul li:nth-child(2) a,
	#service .fixed  ul li:nth-child(3) a,
	#aboutus .fixed  ul li:nth-child(4) a {color: #18c0cf;}
    #top .fixed  ul li:nth-child(1) a:after,
    #promise .fixed  ul li:nth-child(2) a:after,
    #service .fixed  ul li:nth-child(3) a:after,
    #aboutus .fixed  ul li:nth-child(4) a:after {height: 5px;}
    /* ---------------------------------
				  footer
	--------------------------------- */
    footer {border-top: 1px solid #ccc; padding: 40px; font-size: 14px; letter-spacing: 0.05em;}
    footer dl {display: inline-flex; float: left;}
    footer dl dt {width: 196.5px; margin-right: 20px;}
    footer dl dd {padding-top: 3px;}
    footer p {float: right;}
}