@charset "utf-8";
/* CSS Document */
#slimmenu{ display:none;}
#navArea{ display:none;}
.pcno { display:none;}
img { max-width:100%;}
#navArea{ display:none;}
/*▼ 初期化 ▼*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, ul, li, blockquote, th, td, tr, img { padding:0px; margin:0px; font-size:16px; line-height:1.5em; letter-spacing:1px; color:#333;-webkit-text-size-adjust:100%; font-weight:500; font-family:"Zen Kaku Gothic New",'futura-pt', 'Noto Sans JP', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
table { border-collapse:collapse; }
ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6, .more{ padding:0px; margin:0px;}
a { overflow:hidden; outline:none; }
img { border:none; vertical-align:bottom; }
table td { border:none; vertical-align:top; }
.text99 { text-indent:-9999px; }
a{-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
a:hover { text-decoration:none; }
a:hover { opacity:0.5; filter:alpha(opacity=50);-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
.kadomaru{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/*▲ 初期化 ▲*/
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}


/*▼エリア・背景設定▼*/
body{ min-width:1024px;}
#body-top{}
h1{ text-indent:-9999px; height:0px;}


/*▼ヘッダー▼*/
#header{ background:#fff; height:100px; box-shadow:0 5px 15px -15px rgba(0,0,0,.9);}
#header #hmid{ overflow:hidden;}

#header .left { float:left; padding:12px 0 0 40px; transition:.3s;}
#header .left a{ display:block; text-decoration:none; position:relative;}
#header .left a p { font-size:48px; font-weight:400; color:#333; letter-spacing:4px; font-family: "Marcellus", serif; transition:.3s;}
#header .left a p span{ font-size:20px; font-weight: bold; display:inline-block; line-height:1.2em; letter-spacing:1px; margin-left:10px; vertical-align: middle; font-family: "Klee One", cursive; position: relative; top:-3px;}


/*　メインナビゲーション　*/
/*　メインナビゲーション　*/
#navi{ float:right; margin-right:50px;}
#navi li { display:inline-block; font-size:16px; font-weight:600; height:100px; text-align:center; margin-right:20px; font-family: "Klee One", cursive; vertical-align: middle;}
#navi li a{ color:#222; text-decoration:none; position:relative; display:block; line-height:100px; padding:0 5px 0px; transition:.3s ease-in-out;}
#navi li a:hover{ opacity:1; color:#0f3575; transition:.3s ease-in-out;}
#navi li a:hover:after{ transform:scale(1);}
#navi li a:after{ content:""; position:absolute;left:0; right:0; margin:auto; top:0px; height:3px;background:#0f3575 ;transform:scale(0, 1); transition:.3s ease-in-out;}

/*お問い合わせボタン*/
#navi ul li:last-child{ padding-right:0; vertical-align: middle; height:1em; position: relative; top:-10px;}
#navi ul li:last-child a:after{ display:none;}
#navi ul li:last-child a{ background:#0f3575 url(../images/common/ico-mail.png) 20px 42% no-repeat; font-weight:bold; color:#fff; line-height:1em; border:2px solid #0f3575; padding:5px 25px 10px 50px; border-radius:30px; vertical-align: middle; background-size:25px auto;}
#navi ul li:last-child a:hover{ background:#fff url(../images/common/ico-mail-on.png) 20px 42% no-repeat; color:#0f3575; background-size:25px auto;}







/*▼メインビジュアル▼*/
#mp{ background:url(../images/common/mp.jpg)center top no-repeat;}
#mp .area-01{ width:1024px; height:400px; margin:auto;}
#mp .area-01 p{ font-size:60px; font-weight:bold; color:#fff; text-align: center; letter-spacing:3px; padding-top:160px; font-family: "Klee One", cursive; text-shadow:0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8);}
#mp .area-01 p span{ font-size:64px; font-weight: 400; font-family: "Marcellus", serif;}


#hmp { background:url(../images/home/mp.jpg)center top no-repeat;}
#hmp .area-01{ width:1024px; height:800px; margin:auto;}
#hmp .area-01 .p-01{ font-size:68px; font-weight:600; color:#fff; text-align: center; padding-top:280px; margin-bottom: 100px; font-family: "Klee One", cursive; text-shadow:0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.8);}
#hmp .area-01 .p-01 span{ font-size: 36px; display: block;}



/*▼フッター▼*/
#footer { background:#444444;}
#footer #fmid{ width:1024px; margin:auto; overflow:hidden; padding:50px 0 100px;}
#footer .left { float:left;}
#footer .left a{ display:block; text-decoration:none; position:relative;}
#footer .left a p { font-size:48px; font-weight:400; color:#fff; letter-spacing:4px; font-family: "Marcellus", serif; transition:.3s;}
#footer .left a p span{ font-size:20px; font-weight: bold; display:inline-block; line-height:1.2em; letter-spacing:1px; margin-left:10px; vertical-align: middle; font-family: "Klee One", cursive; position: relative; top:-3px;}
#footer .right{ float:right; padding-top:26px;}

/*▼フッターナビ▼*/
#fnavi ul{ display:inline-block; text-align:right;}
#fnavi ul li { display:inline-block; font-size:16px; font-weight:600; letter-spacing:normal; line-height:1.5em; padding:0 15px; transition:.5s; position:relative;}
#fnavi ul li:last-child{ margin-right:0px; padding-right:0;}
#fnavi ul li a{ color:#fff; text-decoration:none; display:block; font-family: "Klee One", cursive;}



#footer #tamonten { clear:both; text-align:center; font-size:10px; padding:10px 0;color:#fff;}
#footer #tamonten a { display:block; cursor:default; color:#fff; text-decoration:none; opacity:1; filter:alpha(opacity=100);}



.page-top {
	position:fixed;
    bottom:70px;
    right:60px;
	background-image:url(../images/common/totop.png);
	width:70px; height:70px; text-indent:-9999px;
    -ms-filter:"alpha(opacity=80)";
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    opacity:0.8;
	z-index:10;
	-webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; transition:0s;}



/*▼エリア・共通設定▼*/
.box{ width:1024px; margin:auto; padding:70px 0;}
.bk-gray{ background:#eff0ef;}

.h2-01{ font-size:48px; font-weight:bold; letter-spacing:2px; text-align: center; margin-bottom:30px; font-family: "Klee One", cursive;}
.h2-01 span{ font-size:24px; font-weight:400; letter-spacing: 3px; line-height: 2em; display: block; font-family: "Marcellus", serif;}
.h2-01.white{ color:#fff;}



.more{ width: 400px; font-size: 18px; font-weight:600; text-align: center; margin:50px auto; font-family: "Klee One", cursive;}
.more a{ background:#0f3575 url(../images/common/arrow.png)right 20px top 50% no-repeat; border:2px solid #0f3575; color:#fff; padding:20px 0; border-radius:50px; text-decoration: none; display: block;}
.more a:hover{ background:#fff url(../images/common/arrow-on.png)right 17px top 50% no-repeat; color:#0f3575; opacity:1;}
.more.left{ margin:50px 0;}





/*----------  ホーム home  ----------*/
/*----------  ホーム home  ----------*/
/*----------  ホーム home  ----------*/
#home #box-01{ width:1044px;}
#home #box-01 .p-01{ font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 50px; font-family: "Klee One", cursive;}
#home #box-01 .p-02{ font-size: 16px; text-align: center; line-height:2.3em; margin-bottom: 50px;}
#home #box-01 .area-01{ padding:10px; overflow: hidden;}
#home #box-01 .area-01 .entry{ width: 320px; float: left; margin-right:26px; box-shadow:0 0 10px rgba(0,0,0,.1);}
#home #box-01 .area-01 .entry:last-child{ margin-right: 0;}
#home #box-01 .area-01 .entry .inner{ padding:0 20px 30px;}
#home #box-01 .area-01 .entry h3{ font-size: 20px; font-weight: bold; color:#0f3575; text-align: center; height: 100px; padding:20px 0 20px; box-sizing:border-box; vertical-align: middle; line-height:60px;}
#home #box-01 .area-01 .entry p { font-size: 15px; line-height: 1.7em;}
#home #box-01 .area-01 .entry:last-child h3{ line-height: 1.5em;}

#home .bk-01{ background:#eff0ef;}
#home #box-02{ background: url(../images/home/bk-01.png)center 50px no-repeat; height:600px;}
#home #box-02 .area-01{ width: 1024px; margin:auto; padding-top:150px;}
#home #box-02 .area-01 h2{ font-size: 48px; font-weight:600; font-family: "Klee One", cursive;}
#home #box-02 .area-01 h2 span{ font-size: 60px; font-weight: 400; font-family: "Marcellus", serif;}

#home #box-03 { padding:100px 0 80px; }
#home #box-03 h2 { text-align:left; margin-bottom:120px; }
#home #box-03 .area-01 { overflow:hidden; position: relative;}
#home #box-03 .area-01 .left { width:230px; float:left; }
#home #box-03 .area-01 .right { width:750px; float:right; overflow-y:scroll; height:280px; margin-top:30px;}
#home #box-03 .area-01 dl{ border-top:1px solid #c2c1c1;}
#home #box-03 .area-01 dl:last-child{ border-bottom:1px solid #c2c1c1;}
#home #box-03 .area-01 dl a{ display:block; text-decoration:none; padding:20px 10px; position:relative;}
#home #box-03 .area-01 dl a:hover{ background:#e6efff; opacity:1;}
#home #box-03 .area-01 dl dt{ font-size:14px; display:inline-block; vertical-align: middle; padding-top:20px; padding-bottom:20px; margin-right:10px;}
#home #box-03 .area-01 dl dd{ display:inline-block; transition:.3s; width: 630px; vertical-align: middle; padding-top:20px; padding-bottom:20px;}
#home #box-03 .area-01 .more{ width: 230px; position: absolute; left:0; bottom:0;}


#home #box-04{ width:1044px;}
#home #box-04 .area-01{ padding:10px;}
#home #box-04 .area-01 .entry{ background:#fff; padding:20px; box-shadow:0 0 10px rgba(0,0,0,.1); overflow: hidden; margin-bottom: 20px;}
#home #box-04 .area-01 .entry img{ float: left;}
#home #box-04 .area-01 .entry .tb{ width: 660px; float: right;}
#home #box-04 .area-01 .entry .tb p{ font-size: 16px; line-height: 1.6em;}
#home #box-04 .area-01 .entry .tb .p-01{ text-align: right; padding-top:20px;}


#box-contact{ background:url(../images/common/bk-contact.jpg)center top no-repeat; height:480px;}
#box-contact .area-01{ width: 1024px; margin:auto; padding-top:80px;}
#box-contact .area-01 .p-01{ font-size: 24px; font-weight: 600; color:#fff; text-align: center; margin-bottom:50px; font-family: "Klee One", cursive;}



/*----------  クレパスについて about  ----------*/
/*----------  クレパスについて about  ----------*/
/*----------  クレパスについて about  ----------*/

#about #box-01{ padding:80px 0;}
#about #box-01 .bk-01{ background:url(../images/about/bk-01.png)center top no-repeat; min-height:530px;}
#about #box-01 .area-01{ width: 1024px; margin:auto;}
#about #box-01 .area-01 .tb{ width: 720px;}
#about #box-01 .area-01 .tb p{ line-height: 1.8em; margin-bottom: 30px;}
#about #box-01 .area-01 .tb .p-01{ font-size: 18px; font-weight: bold; text-align: right; padding-top: 15px;}
#about #box-01 .area-01 .tb span{font-weight: bold; display:block;}


#about #box-02{ padding:80px 0;}
#about #box-02 .area-01{ overflow: hidden; margin-bottom:70px;}
#about #box-02 .area-01 img{ float: left;}
#about #box-02 .area-01 .tb{ width:680px; float: right;}
#about #box-02 .area-01 .tb p{ line-height: 1.8em; margin-bottom: 30px;}
#about #box-02 .area-01 .tb h3{ font-size: 18px; font-weight: bold; margin-bottom: 5px;}

#about #box-02 .area-02{ padding:50px 0; border-top: 1px solid #ccc;}
#about #box-02 .area-02 h3{ background: #0f3575; font-size: 18px; font-weight: 600; color:#fff; text-align: center; margin-bottom:50px; padding:5px 30px; font-family: "Klee One", cursive; vertical-align: top;}
#about #box-02 .area-02 ul{}
#about #box-02 .area-02 ul li{ font-size: 16px; padding-left:23px; position: relative; margin-bottom: 15px;}
#about #box-02 .area-02 ul li:before{ content:""; width:16px; height:16px; border-radius:50%; background:#0f3575; display: inline-block; position: absolute; left:0; top:3px;}

#about #box-02 .area-03{ padding:50px 0; border-top: 1px solid #ccc; overflow: hidden;}
#about #box-02 .area-03 h3{ background: #0f3575; font-size: 18px; font-weight: 600; color:#fff; text-align: center; padding:5px 30px;font-family: "Klee One", cursive; vertical-align: top; margin-bottom: 50px;}
#about #box-02 .area-03 table{ width:100%;table-layout: fixed;}
#about #box-02 .area-03 table td{ font-size: 20px; text-align: center; padding:15px; border: 1px solid #DEDEDE; font-family: "Klee One", cursive;}



#about #box-03{ padding:80px 0 120px;}
#about #box-03 .area-01 table{ width:100%;}
#about #box-03 .area-01 table th{ width: 280px; border:1px solid #DEDEDE; padding:20px 20px; text-align-last: left; box-sizing:border-box; vertical-align: top;}
#about #box-03 .area-01 table td{ border:1px solid #DEDEDE; padding:20px 20px;}
/*

 font-family: "Klee One", cursive;

*/




/*----------  サービス内容と流れ service  ----------*/
/*----------  サービス内容と流れ service  ----------*/
/*----------  サービス内容と流れ service  ----------*/
#service #box-01{ padding:80px 0 100px;}
#service #box-01 .area-01{ text-align: center; margin-bottom: 50px;}
#service #box-01 .area-01 p{ font-size: 16px; text-align: center; line-height:2.3em; margin-bottom: 50px;}

#service #box-01 .area-02{ overflow: hidden;}
#service #box-01 .area-02 .entry{ width: 320px; float: left; text-align: center; font-size: 20px; font-weight: 600; margin-right:26px;}
#service #box-01 .area-02 .entry:last-child{ margin-right: 0;}
#service #box-01 .area-02 .entry a{ background:#0f3575; border:2px solid #0f3575; color:#fff; height:70px; border-radius:50px; text-decoration: none; display: block; position: relative;}
#service #box-01 .area-02 .entry a:hover{ background:#fff; color:#0f3575; opacity:1;}
#service #box-01 .area-02 .entry .span{ background:#fff url(../images/service/arrow.png)center 3px no-repeat; width: 32px; height: 32px; border-radius:50%; display: inline-block; position: absolute; left:10px; top:15px; transition:.5s;}
#service #box-01 .area-02 .entry a:hover .span{ background:#0f3575 url(../images/service/arrow-on.png)center 3px no-repeat; opacity:1;}
#service #box-01 .area-02 .entry p{ font-size: 20px; font-weight: 600; color:#fff; text-align: center; display: inline-block; height:1em; position: absolute; left:15px; right:0; top:0; bottom:10px; margin:auto; font-family: "Klee One", cursive;}
#service #box-01 .area-02 .entry p span{ font-size: 14px; display: block; line-height: 1em;}
#service #box-01 .area-02 .entry a:hover p{ color:#0f3575;}
#service #box-01 .area-02 .entry:last-child p{ bottom:25px;}


#service .service-box{ padding:80px 0 60px;}
#service .service-box h2{ margin-bottom: 70px;}
#service .service-box .area-01{ overflow: hidden; margin-bottom: 70px;}
#service .service-box .area-01 img{ float: right;}
#service .service-box .area-01 .tb{ width: 570px; float: left;}
#service .service-box .area-01 .tb h3{ font-size: 24px; font-weight: 600; margin-bottom: 30px; font-family: "Klee One", cursive;}
#service .service-box .area-01 .tb p{ line-height: 2em;}

#service .service-box .area-02{ padding:50px 0; border-top: 1px solid #ccc;}
#service .service-box .area-02 h3{ background: #0f3575; width: 180px; font-size: 18px; font-weight: 600; color:#fff; text-align: center; display: inline-block; padding:5px 0; font-family: "Klee One", cursive; margin-right: 50px; vertical-align: top;}
#service .service-box .area-02 ul{ display: inline-block;}
#service .service-box .area-02 ul li{ font-size: 16px; padding-left:23px; position: relative; margin-bottom: 15px;}
#service .service-box .area-02 ul li:before{ content:""; width:16px; height:16px; border-radius:50%; background:#0f3575; display: inline-block; position: absolute; left:0; top:3px;}


#service #box-03 .area-01 img{ float:left;}
#service #box-03 .area-01 .tb{ width:680px; float: right;}



#service #box-05{ width: 1025px; padding:100px 0 100px;}
#service #box-05 .area-01{ background:url(../images/service/flow.png)no-repeat; width: 1025px; overflow: hidden; margin-bottom: 70px;}
#service #box-05 .area-01 .entry{ width: 256px; height:267px; float: left; position: relative;}
#service #box-05 .area-01 .entry .p-01{ font-size:48px; font-weight: bold; color:#34b9c8; height: 1em; text-align: center; position: absolute; top:25px; left:0; right:0; margin:auto; font-family: "Marcellus", serif;}
#service #box-05 .area-01 .entry .p-02{ font-size: 24px; font-weight: 600; text-align: center; position: absolute; bottom:70px; left:0; right:0; margin:auto; font-family: "Klee One", cursive;}
#service #box-05 .area-01 .entry .p-02 span{ font-size: 18px; display: block;}

#service #box-05 .area-01 .entry:nth-child(2) .p-01{ color:#1399d6;}
#service #box-05 .area-01 .entry:nth-child(3) .p-01{ color:#037dcf;}
#service #box-05 .area-01 .entry:nth-child(4) .p-01{ color:#1d4ea0;}
#service #box-05 .area-01 .entry:nth-child(4) .p-02{ bottom:50px;}

#service #box-05 .p-03{ font-size:22px; font-weight:600; text-align: center; line-height:1.8em; font-family: "Klee One", cursive;}





/*----------  お問い合わせ contact  ----------*/
/*----------  お問い合わせ contact  ----------*/
/*----------  お問い合わせ contact  ----------*/
#contact #main{ background:#eff0ef;}
#contact #box-01 { padding:100px 20px 80px; box-sizing:border-box;}
#contact #box-01 .area-01{ text-align:center; margin:0 auto 80px;}
#contact #box-01 .area-01 p{ font-size:20px; font-weight:600; font-family: "Klee One", cursive;}

#contact #box-01 .area-02 .area-mailform{}
#contact #box-01 .area-02 .area-mailform table{ width:100%; margin-bottom:0px;}
#contact #box-01 .area-02 .area-mailform table td{ padding:20px 8px; vertical-align:middle;}
#contact #box-01 .area-02 .area-mailform table td.td-01{ width:250px; font-size:17px; font-weight:bold; vertical-align:top;}
#contact #box-01 .area-02 .area-mailform table ul li{ margin-bottom:7px;}
#contact #box-01 .area-02 .area-mailform table ul li:last-of-type{ margin-bottom:0px;}
#contact #box-01 .area-02 .area-mailform table ul.ul-01 li{ margin-bottom:0px;}
#contact #box-01 .area-02 .area-mailform table select{ padding:3px; font-size:15px;}
#contact #box-01 .area-02 .area-mailform table input{ padding:3px; font-size:15px;}
#contact #box-01 .area-02 .area-mailform table label img{ display:block; margin:0 auto 3px;}
#contact #box-01 .area-02 .area-mailform table button{}
#contact #box-01 .area-02 .area-mailform .chui{ font-weight:bold; color:#f17e86; padding:0px 7px; margin-left:0dvb; position:relative;position:relative; top:-3px;}
#contact #box-01 .area-02 .area-mailform .chui-01{ float:left;}
#contact #box-01 .area-02 .area-mailform .p-01{ margin-top:5px;}
#contact #box-01 .area-02 .area-mailform .autotext{ margin-bottom:30px;}
#contact #box-01 .area-02 .area-mailform .p-02{ font-weight:bold;}
#contact #box-01 .area-02 .area-mailform .p-min{ font-size:14px; letter-spacing:normal; padding-top:5px;}
#contact #box-01 .area-02 .area-mailform .w01{width:98%;}
#contact #box-01 .area-02 .area-mailform .w02{width:43.7%;}

#contact #box-01 .area-02 .area-mailform .kakunin{ background:#F0F7FC; overflow:hidden; padding:5px 5px;margin-bottom:20px;}
#contact #box-01 .area-02 .area-mailform .tb-01{}
#contact #box-01 .area-02 .area-mailform .tb-03{ text-align:center; display: inline-block; margin-left: 20px;}
#contact #box-01 .area-02 .area-mailform .tb-03 .chui{ float:none;}
#contact #box-01 .area-02 .area-mailform .tb-02{ text-align:center;}
#contact #box-01 .area-02 .area-mailform .tb-04{ height:200px;overflow-y:scroll;padding:20px; border:#037cba solid 1px; background:#FFF; margin:auto; margin-bottom:20px; }
#contact #box-01 .area-02 .area-mailform .p-03{ font-weight:bold; margin-bottom:10px;}
#contact #box-01 .area-02 .area-mailform .p-04{ font-weight:bold;}
#contact #box-01 .area-02 .area-mailform .p-05{margin-bottom:15px;}
#contact #box-01 .area-02 .area-mailform .ul-01{margin-bottom:15px;}

#contact #box-01 .area-02 .area-mailform .btn{ width:350px; font-size:18px; font-weight:bold; color:#fff;  background:#0f3575; border:2px solid #0f3575; padding:20px 0; border-radius:50px; display:block; text-decoration:none; box-sizing:border-box; position:relative; transition:0.5s; margin:40px auto 0; cursor:pointer;}
#contact #box-01 .area-02 .area-mailform .btn:hover{ background:#fff; color:#0f3575; opacity:1;}




/*▼▼▼スクロールでふわっと表示▼▼▼*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition-timing-function:cubic-bezier(.64,.04,.35,1);
  transition:0.9s ease-in-out;
  transform:translateY(30px);
  opacity:0;
}

.scroll_up.on {
  transform:translateY(0);
  transition:0.9s ease-in-out;
  opacity:1.0;
}
.scroll_on {
  transition-timing-function:cubic-bezier(.64,.04,.35,1);
  transition:0.9s ease-in-out;
  transform:translateY(0px);
  opacity:0;
}

.scroll_on.on {
  transform:translateY(0);
  opacity:1.0;
}

.scroll_right.on {
    opacity:1.0;
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    transform:translateX(0);
}



/*ズラして表示する*/
.on.time02{transition-delay: .2s;}
.on.time03 {transition-delay: .4s;}
.on.time04 {transition-delay: .6s;}
.on.time05 {transition-delay: .8s;}