@charset "utf-8";
/* ------------------------------------------------------------ head */
#head .inner {padding: 15px 0 20px 0;}
#head .left { float: left; }
#head .left img { float: left; }
#head .left div { float: left; padding: 0 0 0 20px;}
#head .left h1 {font-size: 34px; color: #000; display: inline-block; font-weight: bold; }
#head .left h1 span {font-size: 26px; font-weight: bold; }
#head .left small {font-size: 12px; display: block; font-weight: bold; }
#head .right { float: right; }
#head .right .when { float: left; }
#head .right .mail { float: left; }
#head .right .phone a {font-size: 36px; background: url(../images/phone.gif) no-repeat left center; padding: 0 0 0 40px;}
#head .right small {font-size: 12px; padding: 0 0 0 50px; font-weight: bold;}
#head .right .mail {text-align: center; padding: 20px 0 0 40px;}
#head .right .mail a {font-size: 16px; background: url(../images/mail.png) no-repeat 25px center #e970a5; display: inline-block; width: 200px; color: #fff; padding: 12px 0; border-radius: 3px;}
/* ------------------------------------------------------------ fv*/
#fv .fv-inner {background: url(../images/fv.jpg) no-repeat center center; background-size: cover;}
#fv .fv-inner h2 {padding: 130px 0 120px 0; text-align: center;}
/* ------------------------------------------------------------ nav*/
#nav ul {padding: 23px 0;}
#nav ul li { width: 155px; float: left; text-align: center; border-right: 1px solid #e0e0e0; height: 43px; }
#nav ul li a { display: block; font-size: 14px; line-height: 43px; }
#nav ul li a.double { line-height: 130%; }
#nav ul li:first-child {border-left: 1px solid #e0e0e0;}
/* ------------------------------------------------------------ about*/
#about {background: url(../images/bg1.jpg) no-repeat center center; background-size: cover;}
#about .inner {text-align: center; color: #fff; padding: 135px 0;}
#about .inner h3 {font-size: 34px; padding: 0 0 25px 0;}
#about .inner p {font-size: 22px; line-height: 220%;}
/* ------------------------------------------------------------ specialty*/
#specialty {padding: 200px 0 0 0; }
#specialty .wrapper { background: url(../images/bg2.jpg) no-repeat center top #fafafa; background-size: contain; padding: 0 0 110px 0;}
#specialty .wrapper .posi {position: relative;}
#specialty .title {text-align: center; position: absolute; top: -90px; left: 0; right: 0;}
#specialty .title h3 {font-size: 48px; font-weight: bold; }
#specialty .title h4 {font-size: 24px; font-weight: bold; }
#specialty .title p {font-size: 24px; padding: 25px 0 0 0;}
#specialty .container1 {margin: 0 0 0 -10px; padding: 215px 0 0 0;}
#specialty .container1 h3 {font-size: 18px; color: #053675;}
#specialty .container1 h4 {font-size: 16px; padding: 0 0 0 20px;}
#specialty .container1 li {font-size: 16px; padding: 0 0 5px 0; line-height: 140%;}
#specialty .container1 li:before { content: "• "; color: #1db0ea; font-size: 26px; margin: 0 0 0 -0.8em;}
#specialty .container1 .yellow:before { content: "• "; color: #f8bd2c;}
#specialty .container1 .pink:before { content: "• "; color: #e970a5;}
#specialty .container1 .image {width: 210px; float: left;}
#specialty .container1 .text {width: 295px; float: left;  box-sizing: border-box;}
#specialty .container1 .text h3 {padding: 15px 0 25px 0;}
#specialty .container1 .text ul {padding: 0 0 0 40px;}
#specialty .container1 .left {padding: 0 0 50px 0;}
#specialty .container1 .right {padding: 0 0 30px 0;}
#specialty .container1 .box {width: 545px; float: left; background: #fff; box-sizing: border-box; padding: 30px 20px 70px 20px; margin: 0 0 0 10px; height: 385px;}
/* ------------------------------------------------------------ business*/
#business {padding: 200px 0 0 0;}
#business .wrapper { background: url(../images/bg12.jpg) no-repeat center top #fafafa; background-size: contain;}
#business .wrapper .posi {position: relative; padding: 0 0 20px 0; border-bottom: 1px solid#9a9a9a;}
#business .title {text-align: center; position: absolute; top: -90px; left: 0; right: 0;}
#business .title h3 {font-size: 48px; font-weight: bold;}
#business .title p {font-size: 24px;}
#business .container {padding: 125px 0 0 0;}
#business .container .box {background: #fff; margin: 0 0 80px 0;}
#business .container .box .outer {border:  #67b6ee 2px solid;}
#business .container .box h4 {font-size: 68px; background: #00b0e7; color: #fff; text-align: center; font-weight: bold; padding: 6px 0;}
#business .container .box .float .left {width:423px; float: left; text-align: center; padding: 45px 0 0 0;}
#business .container .box .float .right {width: 673px; float: left;}
#business .container .box .text {font-size: 18px; padding: 38px 0 0 50px; line-height: 125%;}
#business .container .box .float2 {padding: 0 0 50px 0;}
#business .container .box .float2 .right {width: 548px; float: left; padding: 110px 0 0 0;}
#business .container .box .float2 .left {width: 548px; float: left; padding: 45px 0 0 0; text-align: center;}
#business .container .box .float2 .right h5 {font-size: 28px; font-weight: bold; padding: 0 0 20px 0; text-align: center;}
#business .container .box .float2 .right h5 span {font-size: 18px; font-weight: bold;}
#business .container .box .float2 .right p {font-size: 18px; line-height: 130%; padding: 0 0 0 60px;}
#business .container .box .float2 .right .border {border: #00b0e7 1px solid; width: 450px; padding: 30px 0;  margin: 0 0 0 50px;}
#business .container .two h4 {background: #fabd41;}
#business .container .two .outer {border: #fabd41 2px solid;}
#business .container .two .float2 .right .border {border: #fabd41 1px solid;}
#business .container .three h4 {background: #e72c89;}
#business .container .three .outer {border: #e72c89 2px solid;}
#business .container .three .float2 .right .border {border: #e72c89 1px solid;}
#business .bottom {font-size: 38px; text-align: center; padding: 30px 0 70px 0;}


/* ------------------------------------------------------------ flow*/
#flow {padding: 150px 0 0 0;}
#flow .top {padding: 0 0 170px 0; background: url(../images/bg3.jpg) no-repeat center top #fafafa; background-size: contain;}
#flow .top .posi {position: relative;}
#flow .top .title {position: absolute; top: -90px; left: 0; right: 0; text-align: center;}
#flow .top .title h3 {font-size: 48px; font-weight: bold;}
#flow .container { padding: 90px 0 0 0;}
#flow .container .box { width: 256px; float: left; height: 145px; text-align: center; background: #b7b7b7; display: table; }
#flow .container p {font-size: 24px; color: #fff; display: table-cell; vertical-align: middle;}
#flow .container span {font-size: 18px;}
#flow .container .img {float: left; padding: 72px 5px 0; }
/* ------------------------------------------------------------ example*/
#example { padding: 220px 0 0 0; }
#example .top { background: url(../images/bg4.jpg) no-repeat center top #fafafa; background-size: contain;  padding: 0 0 120px 0;}
#example .top .posi {position: relative;}
#example .top .posi .out {padding: 60px 0 0 0;}
#example .title {position: absolute; top: -90px; left: 0; right: 0; text-align: center;}
#example h3 {font-size: 48px; font-weight: bold;}
#example li {font-size: 38px; width: 50%; float: left; box-sizing: border-box; padding: 0 0 0 35px;}
#example li:before { content: ""; background-color: #414141; width: 17px; height: 17px; display: inline-block; margin: 0 25px 8px 0;}
#example li span {box-sizing: border-box; padding: 0 0 0 190px; font-size: 26px;}
#example h4  {font-size: 28px; color: #091e49; text-align: center; background: url(../images/bar.gif) repeat-x center center; padding: 50px 0;}
#example h4 span {background: #fff; padding: 0 65px;}
#example p {font-size: 24px; text-align: center; }
#example .wrapper { padding: 50px 30px 60px; box-sizing: border-box; background: #fff;}
/* ------------------------------------------------------------question*/
#question {padding: 240px 0 0 0;}
#question .top { background: url(../images/bg5.jpg) no-repeat center top #fafafa; background-size: contain; padding: 0 0 80px 0;}
#question .top .posi {position: relative;}
#question .top .outer {background: url(../images/bar2.gif) repeat; width: 1000px; margin: 0 auto 35px;}
#question .top .box {background: #fff; margin: 0 auto; width: 1000px; padding: 35px 0 20px 0; position: relative; bottom: 10px; right: 10px;}
#question .top .box h4 {background: url(../images/q.png) no-repeat 40px top; padding: 0 0 20px 105px;}
#question .top .box p {background: url(../images/a.png) no-repeat 40px 5px; padding: 0 0 0 105px;}
#question .title {text-align: center; position: absolute; top: -90px; left: 0; right: 0; }
#question .title h3 {font-size: 48px; font-weight: bold; background: url(../images/q%26a.png) no-repeat 780px center;}
#question .wrapper {font-size: 20px; padding: 120px 0 0 0;}
/* ------------------------------------------------------------company*/
#company { padding: 180px 0 0 0;}
#company .top { background: url(../images/bg6.jpg) no-repeat center top #fafafa; background-size: contain; padding: 0 0 120px 0;}
#company .top .posi {position: relative;}
#company .title {text-align: center;  position: absolute; top: -90px; left: 0; right: 0;}
#company .title h3 {font-size: 48px; font-weight: bold; }
#company .top .posi .out {padding: 100px 0 0 0;}
#company .wrapper {padding: 18px 17px; background: #fff;}
#company .wrapper li {padding: 0 0 0 20px;}
#company .wrapper li:before {position: relative; top: -2px; left: -18px; display: inline-block; width: 9px; height: 9px; content: ''; border-radius: 100%; background: #000;}
#company .wrapper dl {font-size: 16px; width: 515px;}
#company .wrapper dl .color {background: #fafafa;}
#company .wrapper dl dt {width: 70px; float: left; padding: 20px 0 20px 20px;}
#company .wrapper dl dd {width: 375px; float: left; padding: 20px 0 20px 50px;}
#company .wrapper .left {width: 520px; float: left; }
#company .wrapper .right {width: 530px; float: left; padding: 0 0 0 16px;}
#company .wrapper .box {width: 1066px; margin: 0 auto; }
#company .map {text-align: right; padding: 18px 0 0 0;}
#company .map a {font-size: 14px; text-decoration: underline; display: block;  background: url(../images/map.png) no-repeat 960px center;}
/* ------------------------------------------------------------form*/
#form {padding: 190px 0 0 0;}
#form .top {background: url(../images/bg7.jpg) no-repeat center top #fafafa; background-size: contain; padding: 0 0 120px 0;}
#form .top .posi {position: relative;}
#form .title {text-align: center; position: absolute; top: -90px; left: 0; right: 0;}
#form .top .posi .out {padding: 65px 0 0 0;}
#form h3 {padding: 0 0 35px 0; font-size: 48px; font-weight: bold;}
#form .container .contact {padding: 20px 0; border-bottom: 1px solid #dadada;}
#form .container {background: #fff; width: 850px; margin: 0 auto;}
#form .container .contact dt {font-size: 18px; font-weight: bold;}
#form .container .contact dd {font-size: 38px; font-weight: bold;}
#form .container .contact dd a {font-size: 38px; font-weight: bold;}
#form .container .contact dd span {padding: 10px 10px 15px 0; font-size: 24px; font-weight: bold;}
#form .container .contact .when {font-size: 14px; font-weight: bold;}
#form .container .contact .left {width: 424px; float: left; text-align: center; padding: 20px 0; border-right: 1px solid #dadada; }
#form .container .contact .right {width: 424px; float: left; text-align: center; padding: 20px 0;}
#form .container .introduction {width: 690px; margin: 35px auto 70px; background: #f7f7f7;}
#form .container .introduction p {text-align: center; font-size: 14px; padding: 30px 0; }
#form .container .introduction p span {color: #f0000f;}
#form .container form table {width: 690px; margin: 0 auto;}
#form .container form table th {font-size: 14px; text-align: left; vertical-align: text-top; width: 200px; padding: 10px 0; box-sizing: border-box; margin: 0 0 20px 0; }
#form .container form table td input {font-family: sans-serif; width: 490px; background: #f7f7f7; border: none; padding: 10px 10px; box-sizing: border-box; font-size: 14px; margin: 0 0 20px 0; border-radius: 5px; }
#form .container form table td textarea {width: 490px; background: #f7f7f7;  border: none; border-radius: 5px; padding: 10px; box-sizing: border-box; font-size: 14px;}
#form .container form .btn {padding: 40px 0 80px 0; margin: 0 0 0 280px; text-align: left;}
#form .container form .btn input { width: 260px; background: #ec6da3; color: #fff; padding: 12px 0; border-radius: 5px; font-size: 14px;} 
/* ------------------------------------------------------------btn*/
#button { text-align: center; padding: 200px 0 100px 0;}
#button p a {display: block; width: 400px; color: #fff; background: url(../images/arrow2.png) no-repeat 350px center #414141; padding: 17px 0; margin: 0 auto; font-size: 16px; border-radius: 4px;}
/* ------------------------------------------------------------footer*/
#footer {text-align: center; padding: 70px 0 25px 0;}
#footer h3 {font-size: 34px; font-weight: bold; padding: 0 0 40px 0;}
#footer h3 span {font-size: 26px; font-weight: bold;}
#footer p {font-size: 14px; line-height: 200%;}
#footer address {font-size: 12px; padding: 60px 0 0 0;}
/* ------------------------------------------------------------確認画面エラー*/
#form-box  {text-align: center; }
#form-box  h3 {font-size: 16px; padding: 30px 0 40px 0;}
#form-box  h3 span {font-size: 36px; font-weight: bold; display: block; padding: 0 0 5px 0;}
#form-box  h4 {font-size: 22px; color: #00a8e7; padding: 30px 0 0 0;}
#form-box .caution {background: #f3f3f3; width: 610px; margin: 30px auto; padding: 20px 0; font-size: 15px;}
#form-box .error .alert {color: #f0000e; font-size: 15px; padding: 20px 0;}
#form-box .error .alert span {display: block;}
#form-box .btn a {display: block; width: 240px; margin: 0 auto 100px; background: #ababab; padding: 10px 0; font-size: 15px; color: #fff; border-radius: 3px;}
/* ------------------------------------------------------------確認画面OK*/
#form-box .accept {padding: 0 0 100px 0;}
#form-box .accept .comfirm {background: #fff; width: 80%; margin: 0 auto; padding: 0 0 100px 0;}
#form-box .accept .comfirm table {width: 70%; margin: 0 auto; font-size: 16px;}
#form-box .accept .comfirm table tr th {width: 30%; text-align: left; padding: 5px 0; font-weight: bold;}
#form-box .accept .comfirm table tr td {width: 70%; text-align: left; padding: 5px 0;}
#form-box .accept .comfirm .btn a {margin: 20px auto 0;}
#form-box .accept .comfirm .btn input {display: block; width: 240px; margin: 20px auto 0; background: #dd0016; padding: 10px 0; font-size: 15px; color: #fff; border-radius: 3px; }
/* ------------------------------------------------------------thanks*/
#thanks .inner { padding: 50px 0; text-align: center;}
#thanks .inner .top {border-top: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; padding: 30px 0; margin: 0 0 30px }
#thanks .inner h3 {font-size: 25px; text-align: center; padding: 0 0 50px 0; font-weight: bold;}
#thanks .inner p {font-size: 20px; width: 800px; margin: 0 auto; line-height: 200%; }
#thanks .inner .btn {text-align: center; padding: 50px 0 0 0;}
#thanks .inner .btn a {color: #fff; width: 260px; margin: 0 auto; display: block; background: #000; padding: 15px 0; border-radius: 3px; }
#thanks .bottom p {font-size: 14px;}

@media only screen and (max-width:640px){
.inner {width: 90%;}
.SP {display: block;}
.PC {display: none;}
body { min-width: 100%;}

/* ------------------------------------------------------------ head */
#head .inner {padding: 5px 0; position: fixed; top: 0; width: 100%; background: #fff; z-index: 1000;}
#head .left { float: none; padding: 0 0 0 10px;}
#head .left img { float: left; width: auto; height: 60px;}
#head .left div { float: left; padding: 3px 0 0 5px;}
#head .left h1 {font-size: 16px;  }
#head .left h1 span {font-size: 12px;  }
#head .left small {font-size: 12px; line-height: 140%;}
/* ------------------------------------------------------------ fv*/
#fv {padding: 70px 0 0 0;}
#fv .fv-inner {background: url(../images/fv_res.jpg) no-repeat center center; background-size: cover;}
#fv .fv-inner h2 {padding: 70px 0; }
#fv .fv-inner h2 img {width: auto; height: 110px;}
/* ------------------------------------------------------------ about*/
#about {background: url(../images/bg1.jpg) no-repeat center center; background-size: cover;}
#about .inner {text-align: center; color: #fff; padding: 25px 0;}
#about .inner img {width: 100%; height: auto;}
#about .inner h3 {font-size: 18px; padding: 0 0 10px 0;}
#about .inner p {font-size: 13px; line-height: 170%; text-align: left;}
/* ------------------------------------------------------------ specialty*/
#specialty {padding: 90px 0 0 0; }
#specialty .wrapper { background: url(../images/bg2_sp.jpg) no-repeat center top #fafafa; background-size: 130% auto; padding: 0 0 40px 0;}
#specialty .title { padding: 0 0 45px 0; position: absolute; top: -65px; left: 0; right: 0;}
#specialty .title img {width: 100%; height: auto;}
#specialty .title h3 {font-size: 18px; }
#specialty .title h4 {font-size: 15px;}
#specialty .title p {font-size: 15px; padding: 5px 0 0 0;}
#specialty .container1 {margin: 0; padding: 135px 0 0 0;}
#specialty .container1 h3 {font-size: 16px; color: #053675;}
#specialty .container1 h4 {font-size: 14px; padding: 0 3%;}
#specialty .container1 li {font-size: 12px; padding: 0; line-height: 170%;}
#specialty .container1 li:before { content: "• "; color: #1db0ea; font-size: 20px;}
#specialty .container1 .yellow:before { content: "• "; color: #f8bd2c;}
#specialty .container1 .pink:before { content: "• "; color: #e970a5;}
#specialty .container1 .image {width: 70%; float: none; margin: 0 auto;}
#specialty .container1 .image img {width: 93%; height: auto; padding: 0;}
#specialty .container1 .text {width: 100%; float: none; padding: 0 0 0 30px;}
#specialty .container1 .text h3 {padding: 15px 0; width: 100%;}
#specialty .container1 .left {padding: 0 0 20px 0;}
#specialty .container1 .right {padding: 0 0 20px 0;}
#specialty .container1 .box {width: 100%; float: none; background: #fff; box-sizing: border-box; padding: 20px 0; margin: 0 0 13px 0; height: auto;}
#specialty .bottom {padding: 40px 0; }
#specialty .bottom h3 {font-size: 18px; font-weight: bold; width: 100%; margin: 0 auto; border-top: double 3px #000; border-bottom: double 3px #000;}
#specialty .bottom .container2 { margin: 0; padding: 40px 0 0 0; border-bottom: 1px solid #9a9a9a;}
#specialty .bottom .container2 h4 {color: #fff; font-size: 18px; text-align: center; padding: 10px 0;}
#specialty .bottom .container2 .box .bg {background: #fff; height: auto; padding: 15px 0 20px 0;}
#specialty .bottom .container2 .left h4 {background: #1db0ea;}
#specialty .bottom .container2 .center h4 {background: #f8bd2c;}
#specialty .bottom .container2 .right h4 {background: #e4348b;}
#specialty .bottom .container2 .box {width: 100%; text-align: center; float: none; margin: 0 0 50px 0;}
#specialty .bottom .container2 .right {padding: 0; margin: 0 0 20px 0;}
#specialty .bottom .container2 .box img {padding: 0 0 15px 0; width: 100%; height: auto;}
#specialty .bottom .container2 .left img {padding: 0;}
#specialty .bottom .container2 .left .img { width: 90%; height: auto;}
#specialty .bottom .container2 .box p {text-align: left; font-size: 16px; padding: 10px 10px 0;}
#specialty .bottom p {font-size: 16px; padding: 20px 0 0 0;}
/* ------------------------------------------------------------ business*/
#business {padding: 100px 0 0 0;}
#business .wrapper { background: url(../images/bg12_sp.jpg) no-repeat center top #fafafa; background-size: contain;}
#business .wrapper .posi {position: relative; padding: 0; border-bottom: 1px solid#9a9a9a;}
#business .title {text-align: center; position: absolute; top: -70px; left: 0; right: 0;}
#business .title img { width: 100%; height: auto; }
#business .title h3 {font-size: 18px; font-weight: bold;}
#business .title p {font-size: 15px;}
#business .container {padding: 70px 0 0 0;}
#business .container .box {background: #fff; margin: 0 0 40px 0;}
#business .container .box .outer {border:  #67b6ee 2% solid;}
#business .container .box h4 {font-size: 18px;  padding: 6px 0;}
#business .container .box .float .left {width: 30%; float: left; text-align: center; padding: 20px 0 0 0;}
#business .container .box .float .left img {width: 60%; height: auto; margin: 0 auto;}
#business .container .box .float .right {width: 70%; float: left;}
#business .container .box .float .right img {width: 100%; height: auto;}
#business .container .box .text {font-size: 15px; padding: 15px 8px 0 8px; line-height: 150%;}
#business .container .box .float2 {padding: 0 0 20px 0;}
#business .container .box .float2 .right {width: 100%; float: none; padding: 20px 0 0 0;}
#business .container .box .float2 .left {width: 100%; float: none; padding: 45px 0 0 0; text-align: center;}
#business .container .box .float2 .left img {width: 94%; height: auto;}
#business .container .box .float2 .right h5 {font-size: 16px; font-weight: bold; padding: 0 0 10px 0; text-align: center;}
#business .container .box .float2 .right h5 span {font-size: 14px; font-weight: bold; padding: 0 0 0 5px;}
#business .container .box .float2 .right p {font-size: 15px; line-height: 130%; padding: 0 8px;}
#business .container .box .float2 .right .border { width: 94%; padding: 10px 0;  margin: 0 auto;}
#business .container .two h4 {background: #fabd41;}
#business .container .two .outer {border: #fabd41 2px solid;}
#business .container .two .float2 .right .border {border: #fabd41 1px solid;}
#business .container .three h4 {background: #e72c89;}
#business .container .three .outer {border: #e72c89 2px solid;}
#business .container .three .float2 .right .border {border: #e72c89 1px solid;}
#business .bottom {font-size: 14px; text-align: center; padding: 20px 0;}
/* ------------------------------------------------------------ flow*/
#flow {padding: 90px 0 0 0;}
#flow .top {background: url(../images/bg3_sp.jpg) no-repeat center top #fafafa; background-size: 120% auto; padding: 0 0 40px 0;}
#flow .top .title {position: absolute; top: -65px; left: 0; right: 0; text-align: center;}
#flow .top .title img {width: 100%; height: auto;}
#flow .top .title h3 {font-size: 18px; font-weight: bold;}
#flow .container { padding: 50px 0 0 0;}
#flow .container .box { width: 100%; float: none; height: 100px; text-align: center; background: #b7b7b7; display: table; }
#flow .container p {font-size: 16px; color: #fff; display: table-cell; vertical-align: middle;}
#flow .container span {font-size: 18px;}
#flow .container .img {float: none; padding: 20px 0;}
#flow .container .img img {margin: 0 auto;}
#flow .bottom {margin: 40px 0 0 0; background: #fff; padding: 20px 0 0 0;}
#flow .bottom h4 {font-size: 18px; padding: 0 0 10px 0; text-align: center;}
#flow .bottom dl {padding: 0 3%;}
#flow .bottom dt {font-size: 15px; width: 100%; float: none; }
#flow .bottom dd {font-size: 12px;  width: 100%; float: none;  padding: 0 0 20px 0;}

/* ------------------------------------------------------------ example*/
#example { padding: 40px 0 0 0; }
#example .top { background: url(../images/bg4_sp.jpg) no-repeat center 65px; background-size: 130% auto; padding: 0;}
#question .top .posi {position: relative;}
#example .title {text-align: center; position: absolute; top: 0; left: 0; right: 0;}
#example .title img {width: 100%; height: auto;}
#example h3 {font-size: 18px; font-weight: bold;}
#example li {font-size: 14px; width: 50%; float: left; box-sizing: border-box; padding: 0 0 0 10px;}
#example li:before { content: ""; background-color: #414141; width: 8px; height: 8px; display: inline-block; margin: 0 5px 2px 0;}
#example li span {box-sizing: border-box; padding: 0 0 0 10px; font-size: 12px;}
#example h4  {font-size: 18px; color: #091e49; text-align: center; background: url(../images/bar.gif) repeat-x center center; padding: 30px 0;}
#example h4 span {background: #fff; padding: 0 20px;}
#example p {font-size: 13px; text-align: center; padding: 0 3%;}
#example .wrapper { padding: 20px 0; box-sizing: border-box; background: #fff; margin: 40px 0 0 0;}
/* ------------------------------------------------------------question*/
#question {background: url(../images/bg9.gif) center bottom repeat-x; padding: 40px 0 20px 0;}
#question .top .posi {position: relative;}
#question .title {text-align: center; padding: 0 0 10px 0; position: absolute; top: 0; left: 0; right: 0;}
#question .title img {width: 100%; height: auto;}
#question .title h3 {font-size: 18px; font-weight: bold; background: url(../images/q%26a.png) no-repeat 780px center;}
#question .top { background: url(../images/bg5_sp.jpg) no-repeat center 65px; background-size: 130% auto; padding: 0;}
#question .top .outer {background: url(../images/bar2.gif) repeat; width: 100%;; margin: 0 auto 35px;}
#question .top .box {background: #fff; margin: 0 auto; width: 100%; padding: 25px 0; position: relative; bottom: 10px; right: 10px;}
#question .top .box h4 {background: url(../images/q.png) no-repeat 20px top; background-size: auto 25px; padding: 0 5px 40px 60px;}
#question .top .box p {background: url(../images/a.png) no-repeat 20px top; background-size: auto 25px; padding: 0 5px 0 60px;}
#question .wrapper {font-size: 15px; margin: 40px 0 0 0;}
/* ------------------------------------------------------------company*/
#company {background: url(../images/bg10.gif) center bottom repeat-x; padding: 40px 0;}
#company .top { background: url(../images/bg6_sp.jpg) no-repeat center 65px; background-size: 130% auto; padding: 0;}
#company .top .posi {position: relative;}
#company .title {text-align: center; padding: 0 0 50px 0; position: absolute; top: 0; left: 0; right: 0;}
#company .title img {width: 100%; height: auto;}
#company .title h3 {font-size: 18px; font-weight: bold; }
#company .wrapper {padding: 0; background: #fff;}
#company .wrapper li {padding: 0 0 0 20px;}
#company .wrapper li:before {position: relative; top: -2px; left: -8px; display: inline-block; width: 5px; height: 5px; content: ''; border-radius: 100%; background: #000;}
#company .wrapper dl {font-size: 16px; width: 100%;}
#company .wrapper dl .color {background: none;}
#company .wrapper dl .hue {background: #fafafa;}
#company .wrapper dl dt {width: 100%; float: none; padding: 10px 0 10px 5px;}
#company .wrapper dl dd {width: 100%; float: none; padding: 10px 0 10px 5px;}
#company .wrapper .left {width: 100%; float: none; padding: 0 0 30px 0;}
#company .wrapper .right {width: 100%; float: none; padding: 0;}
#company .wrapper .box {width: 100%; margin: 0 auto; }
#company .wrapper iframe {width: 100%; height: 300px;}
#company .map a {font-size: 12px; text-decoration: underline; display: block;  background: url(../images/map.png) no-repeat left center; width: 115px; margin: 0 0 0 auto;}
/* ------------------------------------------------------------form*/
#form { padding: 40px 0;}
#form .top {background: url(../images/bg7_sp.jpg) no-repeat center 65px; background-size: 130% auto; padding: 0;}
#form .top .posi {position: relative;}
#form .top .posi .out {padding: 115px 0 0 0;}
#form .title {position: absolute; top: 0; left: 0; right: 0;}
#form .title img {width: 100%; height: auto;}
#form .title h3 { padding: 0 0 30px 0; font-size: 18px;}
#form .container .contact {padding: 20px 0;}
#form .container { width: 94%; }
#form .container .contact dt {font-size: 15px; }
#form .container .contact dd {font-size: 22px;}
#form .container .contact dd a {font-size: 22px;}
#form .container .contact .left {width: 100%; float: none; padding: 10px 0; border-right: none; border-bottom: 1px solid #dadada;}
#form .container .contact .right {width: 100%; float: none; padding: 10px 0;}
#form .container .introduction {width: 94%; margin: 30px auto; }
#form .container .introduction p {text-align: left; font-size: 11px; padding: 5px;}
#form .container form table {width: 94%;}
#form .container form table th {font-size: 14px; width: 100%; padding: 5px; box-sizing: border-box; margin: 0; display: block;}
#form .container form table td {display: block;}
#form .container form table td input {width: 100%;  box-sizing: border-box;  margin: 0 0 15px 0; }
#form .container form table td textarea {width: 100%; padding: 10px; box-sizing: border-box; }
#form .container form .btn {padding: 40px 0; margin: 0; text-align: center;}
/* ------------------------------------------------------------footer*/
#footer {text-align: center; padding: 20px 0 0 0;}
#footer h3 {font-size: 18px; font-weight: bold; padding: 0 0 30px 0;}
#footer h3 span {font-size: 13px; font-weight: bold;}
#footer p {font-size: 13px; line-height: 170%;}
#footer address {font-size: 12px; padding: 10px 0 0 0;}
/* ------------------------------------------------------------確認画面エラー*/
#form-box {margin: 80px 0 0 0;}
#form-box  h4 {font-size: 22px; color: #00a8e7; padding: 30px 0 0 0;}
#form-box .caution { width: 80%; padding: 20px 10px; font-size: 12px; text-align: left;}
#form-box .error .alert { font-size: 13px;}
html {background: #fafafa;}
/* ------------------------------------------------------------確認画面OK*/
#form-box .accept {  padding: 50px 0 70px 0;}
#form-box .accept .comfirm {padding: 0 0 50px 0; width: 94%;}
#form-box .accept .comfirm table {width: 80%; font-size: 14px;}
#form-box .accept .comfirm table tr th {width: 100%; display: block;}
#form-box .accept .comfirm table tr td {width: 100%;  display: block; margin: 0 0 20px 0;}
/* ------------------------------------------------------------thanks*/
#thanks .inner { padding: 90px 0 30px 0; }
#thanks .inner .top p {text-align: center;}
#thanks .inner h3 {font-size: 22px; text-align: center; padding: 0 0 30px 0; }
#thanks .inner p {font-size: 16px; width: 100%; margin: 0 auto; text-align: left; }
#thanks .inner .btn {text-align: center; padding: 30px 0 0 0;}
#thanks .inner .btn a {color: #fff; width: 260px; margin: 0 auto; display: block; background: #000; padding: 15px 0; border-radius: 3px; }
#thanks .bottom p {font-size: 12px;}

/* ------------------------------------------------------------ groval nav */

#mask { background: #000; height: 100%; width: 100%; min-height: 100%; position: fixed; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.70; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; 
display: none; }
.fixed { position: fixed; }
#open_modal { cursor: pointer; display: block;}

#menu-btn { z-index: 999; position: absolute; top: 35px; right: 3%; width: 30px; height: 30px; }
#menu-btn img { display: inline !important; width: 100%; height: auto; }

#navigation { position: fixed; text-align: center; margin: 0; top: 0;  right: 0; left: 0; z-index: 9999; display: none; height: 428px; }
#menu-header { background: #fff; padding: 15px 3%; position: fixed; z-index: 999; width: 94%; }
#menu-header .close_modal { float: right; padding: 5px 0 0;}
#menu-header div { float: left; padding: 3px 0 0 5px; font-weight: bold; text-align: left;}
#menu-header h1 {font-size: 16px; font-weight: bold;}
#menu-header h1 span {font-size: 12px; font-weight: bold;}
#menu-header small {font-size: 12px; line-height: 140%;}
#navigation #menu-header a img { float: left; width: 30px; height: auto; padding: 1px 0 0; }
#navigation ul { font-size: 14px; z-index: 999; width: 100%; background: #fff; padding: 93px 0 0; }
#navigation ul li { background: #004ea4; text-align: left; border-top: #fff solid 1px; padding: 15px 20px; }
#navigation ul li a { font-size: 14px; color: #fff; display: block;}

}