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

body{
padding:0;
margin: 0;
color:#000;
text-align:center;
font-size:15px;
line-height:1.5em;
font-family: 'Noto Sans JP', sans-serif;
}

a img{border:none;}
img{ max-width: 100%; height: auto!important;}
a img:hover,
.btn a:hover,
.contact .submit div input:hover{     
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
	opacity: 0.4;  
	filter: alpha(opacity=60);  
}

*:focus {
  outline: none;
}

.pc_elm{ display: none!important;}
.sp_elm{ display: block!important;}

@media screen and (max-width: 728px) {
.pc_elm{ display: block!important;}
.sp_elm{ display: none!important;}
}

header .inner{ display: flex; padding: 30px 5vw;}

.main_visu{ line-height: 0; position: relative;}
.main_visu div.tx_area {
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
    padding-left: 10vw;
    text-align: left;
}
.main_visu div img{ width: 50%; height: auto;}
.main_visu div.tx_area div{ padding-top: 15px;}

@media screen and (max-width: 728px) {
  .main_visu div.tx_area {
      position: relative;
      top: auto;
      transform: translate(0%,0%);
      padding-left: 0;
      text-align: center;
      background: #9BCEDF;
      padding: 30px 5%;
  }
  .main_visu div img{ width: 90%; height: auto;}
}

.btn a,
.btn a:hover,
.btn a:active,
.btn a:visited{ display: inline-block; background: #fff; color: #007695;  padding:25px 30px 25px 20px; border-radius: 25px; font-size: 15px; text-decoration: none; position: relative;line-height: 0;}

.btn a::after{ content: ""; height: 0.8em; width: 0.8em; background: url(../images/common/arrow.svg) center center no-repeat; position: absolute; right: 10px; transform: translate(0%,-50%); display: block;}

.title_area{ font-size: 18px; font-weight: 700; line-height: 1.5em;}
.title_area::after{ content: ""; width: 30px; height: 5px; display: block; background:#007695 ; margin: 40px auto; }

.message{ background: url(../images/top/bg_1.png) center center no-repeat; background-size: 100% auto;}
.message .inner{ padding: 100px 5vw;}

.message .box{ width: 60%; margin: 0 auto; text-align: left;}
.message .box p{margin-bottom: 30px;}

.example .inner{ padding: 100px 5vw;}
.example .inner ul{ display: flex; flex-wrap: wrap; list-style: none; justify-content: center; }
.example .inner ul li{ width: 33%; margin-bottom: 60px;}
.example .inner ul li dl{ text-align: center; padding: 0 15%;}
.example .inner ul li dl dt{ margin-bottom: 15px; line-height: 0;}
.example .inner ul li dl dd{ text-align: left;}

@media screen and (max-width: 728px) {
  .message .inner {
      padding: 50px 5vw 20px 5vw;
  }
  .title_area {
      font-size: 100%;
      font-weight: 700;
      line-height: 1.7em;
  }
  .message .box {
      width: auto;
      margin: 0 auto;
      text-align: left;
  }
  .message {
      background-size: cover;
  }
  
  .example .inner {
      padding: 50px 5vw;
  }
  
  .example .inner ul li {
      width: 50%;
      margin-bottom: 30px;
  }
  
  .example .inner ul li dl {
      text-align: center;
      padding: 0 5%;
  }
  
  .example .inner ul li dl dd {
      text-align: left;
      font-size: 11px;
      line-height: 1.5em;
  }
  
}

footer .row_1{ 
  background:url(../images/common/bg.png)top center no-repeat #007695;
  background-size: 100% auto;
  padding-top: 10vw;
  padding-bottom: 5vw;
}
footer .row_1 img{ width: 290px; margin-bottom: 30px;}
footer .row_1 p{ font-size: 18px; font-weight: 700; line-height: 1.5em; color: #fff; margin-bottom: 30px;}

footer .row_2{ background:#EFEEEE; padding: 30px 0;}
footer .row_2 img{ width: 100px; margin-bottom: 15px;}
footer .row_2 ul{ list-style: none; display: flex; justify-content: center; font-size: 12px; line-height: 1em; margin-bottom: 30px;}
footer .row_2 ul li{ padding: 0 8px; border-right: 1px #007695 solid;}
footer .row_2 ul li:last-child{ border-right: none;}
footer .row_2 ul a,
footer .row_2 ul a:hover,
footer .row_2 ul a:active,
footer .row_2 ul a:visited{ color: #007695; text-decoration: none;}
footer .row_2 p{color: #007695; font-size: 10px; line-height: 1em;}


@media screen and (max-width: 728px) {
  footer .row_1 img {
      width: 190px;
      margin-bottom: 30px;
  }
  footer .row_1 {
      padding: 16vw 5% 8vw 5%;
  }
  footer .row_2 ul{ flex-wrap: wrap;}
  footer .row_2 ul li{ width: 50%;padding: 0;border-right: none; line-height: 3em; margin-bottom: 8px;}
  footer .row_2 ul li a{ display: block; line-height: 2em; font-size: 10px;}
  footer .row_2 ul li:nth-child(odd) a{ border-right: 1px #007695 solid;}

}


.menu{ display: block;}
.menu { height: 8px; position: absolute; right: 3%; top:35px; width: 30px; z-index: 99999999; }
body.fixed .menu, body.active .menu {z-index: 99999999999;}

.menu_box ul{ display: block;}
.menu__line{ background: #34406A; display: block; height: 3px; position: absolute; transition:transform .3s; width: 100%; }
.menu__line--bottom{ bottom: -2px; width: 100%; }
.menu__line--bottom.active{ width: 100%; }
.menu__line--top.active{ top: 0; transform: rotate(25deg); background: #fff; }
.menu__line--bottom.active{ bottom: 5px; transform: rotate(155deg); background: #fff;}

.sp_menu {
    position: fixed;
    right: 5vw;
    top: 10px;
    z-index: 99999999;
}

/*gnav*/
.gnav{ background: #007695; display: none; height: 100%; position: fixed; width: 100%; z-index:999999; top:0;  }
.gnav__wrap{ align-items:center; display: flex; height: 100%; justify-content: center; position: absolute; width: 100%; }

.gnav h1{ position: absolute; left: 5vw; top:30px; }

.gnav a,
.gnav a:hover,
.gnav a:active,
.gnav a:visited{ color: #FFF; text-decoration: none;}

.gnav ul{ list-style: none; line-height: 2.5em;}

.gnav ul.sns li{ width: 30px;}
.gnav .label{ width: 50px; margin: 0 auto;}

.gnav__wrap .inner .menu_box {
    display: flex;
    align-items: center;
    border-left: 5px #fff solid;
    padding: 30px;
  }

.gnav__wrap .inner .menu_box .box{align-items: baseline;}
.gnav__wrap .inner .menu_box .box li{ font-size: 30px; line-height: 2em;  text-align: left; font-weight: 700;}
.gnav__wrap .inner .menu_box .box li span{ margin-left: 15px;font-size: 15px;  font-weight: 300; font-family: 'Oswald', sans-serif;
}

.gnav__wrap .inner .menu_box .box ul li a:hover{
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
	opacity: 0.4;  
	filter: alpha(opacity=60);  
}

@media screen and (max-width: 728px) {
  .gnav__wrap .inner .menu_box {
      border-left: none;
      padding: 0px;
  }
  .gnav__wrap .inner .menu_box .box li{ font-size: 15px; line-height: 2em; }
  .gnav__wrap .inner .menu_box .box li span { font-size: 11px; }
}

.under_title{ padding: 80px 0;}
.under_title h2{ color:#007695; font-size: 30px; line-height: 1.5em; font-weight: 700; }


@media screen and (max-width: 728px) {
  .under_title h2 {
      font-size: 20px;
      line-height: 1.5em;
  }
}

.reason{ max-width: 1280px; margin: 0 auto; padding-bottom: 100px;}
.reason ul{ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-around;}
.reason ul li{ background:#F5F5F5; border-left: 10px solid #007695; width: 47%;margin-bottom: 30px; border-top-right-radius: 80px; position: relative;}
.reason ul li.fifth{ background:#F5F5F5; border-left: 10px solid #007695; width: 80%;margin-bottom: 30px; border-top-right-radius: 80px; position: relative;}
.reason ul li .inner{ padding:30px 15px; text-align: left;}
.reason ul li .inner img{ position: absolute; right: 15px; bottom: -15px; height: 100px!important}
.reason ul li .inner div{ color:#007695; font-size: 18px; line-height: 1.5em; font-weight: 700; width: 70%; margin-bottom: 30px; }
.reason ul li .inner p{ width: 70%;}

@media screen and (max-width: 1280px) {
  .reason{ margin: 0 5%; padding-bottom: 50px;}
}

@media screen and (max-width: 728px) {
  .reason ul li,
  .reason ul li.fifth{ width: 100%;}
}

.link_area {
    background: url(../images/top/bg_1.png) center center no-repeat;
    background-size: 100% auto;
}

.link_area .inner { padding: 75px 0;}
.link_area h2{ color:#007695; font-size: 18px; line-height: 1.5em; font-weight: 700;margin-bottom: 30px; }
.link_area ul{ list-style: none; display: flex; justify-content: center;}
.link_area ul li{ padding: 0 15px;}
.link_area ul p{ color:#007695; font-size: 15px; line-height: 1.5em; font-weight: 700;margin-bottom: 15px; }
.link_area ul .btn a{ background:#007695; color: white; width: 300px; padding: 35px; border-radius: 35px; position: relative; }
.link_area ul .btn a::after{ content: ""; height: 0.8em; width: 0.8em; background: url(../images/common/arrow_w.svg) center center no-repeat!important; position: absolute; right: 25px; transform: translate(0%,-50%); display: block;}

@media screen and (max-width: 728px) {
  .link_area { background-size: cover; }
  .link_area h2 { font-size: 13px; line-height: 1.5em; }
  .link_area ul{ flex-wrap: wrap;}
  .link_area ul li:first-child{ margin-bottom: 30px;}
  .link_area ul .btn a{ width: 70vw;  }

}


.bpo,
.effect,
.content,
.ceo,
.profile,
.about
{ max-width: 1280px; margin: 0 auto; text-align: left; padding-bottom: 100px;}

.contact
{ max-width: 980px; margin: 0 auto; text-align: left; padding-bottom: 100px;}

@media screen and (max-width: 1280px) {
  .bpo,
  .effect,
  .content,
  .ceo,
  .profile,
  .about,
  .contact
  { margin: 0 5%; }
}

.bpo h3{ font-weight: 700;font-size: 25px; line-height: 1.5em;margin-bottom: 30px;  color:#fff; background:#007695; padding: 8px 15px;  }
.bpo h4{  color:#007695; font-weight: 700;font-size: 20px; line-height: 1.5em;margin-bottom: 30px; }
.bpo .box{ display: flex; justify-content: space-between;}
.bpo .box .r{ width:50%;}
.bpo .box .l{ width: 45%;}
.bpo .box p{ font-size: 13px; line-height: 1.5em;margin-bottom: 15px;}
.bpo .box div{ margin-bottom: 60px;}

@media screen and (max-width: 728px) {
  .bpo .box .r{ display: none;}
  .bpo .box .l{ width: auto; margin-bottom: 0;}
  .bpo .img_mb{ margin-bottom: 50px;}
  .bpo h4 { font-size: 17px; line-height: 1.5em; }
}

.effect h2{ color:#007695; font-size: 30px; line-height: 1.5em; font-weight: 700; margin-bottom: 50px; text-align: center; }
.effect h3{ color:#007695; font-weight: 700;font-size: 18px; line-height: 1.5em;margin-bottom: 15px; }
.effect .box{ display: flex; justify-content: space-between; align-items: center;}
.effect .box .tx_box{ width:50%;}
.effect .box .tx_box  p{ font-size: 13px; line-height: 1.5em; margin-bottom: 15px;}
.effect .box .tx_box span{color:#007695;}
.effect .box .img_box{ width: 45%;}

@media screen and (max-width: 728px) {
  .effect .box .img_box{ display: none;}
  .effect .box .tx_box{ width:auto; margin-bottom: 30px;}
}

.content h2{ color:#007695; font-size: 30px; line-height: 1.5em; font-weight: 700; margin-bottom: 50px; text-align: center; }
.content h3{ color:#007695; font-size: 18px; line-height: 1.5em; font-weight: 700;  text-align: left; }
.content h4{ color:#007695; font-size: 15px; line-height: 1.5em; font-weight: 700; margin-bottom: 8px;  text-align: left; }
.content .wrap{ display: flex; flex-wrap: wrap; justify-content: center;}
.content .wrap .box{ width: 30%; margin: 0 1.5%; padding-bottom: 50px;}
.content .wrap .box.ver2{ width: 42%; margin: 0 2.5%; padding-bottom: 50px;}
.content .wrap figure{ display: block; text-align: center;}
.content .wrap figure img{ height: 100px!important; width: auto!important;}
.content .wrap ul{ list-style: none; margin-bottom: 15px;}
.content .wrap ul li{ margin-bottom: 10px; padding-left: 20px; position: relative;}
.content .wrap ul li.nopad{padding-left: 0px; }
.content .wrap ul li span{ color:#007695; margin-right: 8px;font-weight: 700;  position: absolute; left: 0; top: 0;}
.content .wrap p{ font-size: 10px; line-height: 1.2em; padding-bottom: 5px;}

@media screen and (max-width: 728px) {
  .content .wrap .box,
  .content .wrap .box.ver2 {width: 100%; margin: 0; }
}

.price{ max-width: 980px; margin: 0 auto; text-align: left; padding-bottom: 100px;}
.price dl { margin-bottom: 50px; text-align: center;}
.price dl.mb_1 { margin-bottom: 25px; text-align: center;}
.price dt {background:#007695; color: #fff; font-size: 18px; line-height: 1.5em; font-weight: 700; padding: 15px;}
.price dd { border:solid 5px #007695; padding: 30px;}
.price dd div{color: #007695; font-size: 36px; line-height: 1.5em; font-weight: 700; margin-bottom: 30px;}
.price .ex{ font-size: 10px;}

@media screen and (max-width: 728px) {
  .price{ margin: 0 5%; padding-bottom: 100px;}
}

.ceo { text-align: left;}
.ceo h3{ font-weight: 700;font-size: 18px; line-height: 1.5em;margin-bottom: 30px; }
.ceo div{ line-height: 2.5em;}

.profile{ display: flex; }
.profile .l{ width:33%;}
.profile .r{ width:62%; margin-left: 5%;}
.profile .r .name{ display: flex; align-items: baseline; margin-bottom: 30px;}

.profile .r .name div{ margin-right: 8px; font-size: 18px;  font-weight: 700; font-family: 'Oswald', sans-serif; background: #007695; color: #fff; padding:1px 8px;}
.profile .r .name p{ margin-right: 8px;color: #007695;  font-size: 25px; }
.profile .r .name span{ font-size: 15px; color: #007695; font-family: 'Oswald', sans-serif; }

.profile .r h3{font-family: 'Oswald', sans-serif; font-weight: 300; color: #007695; font-size: 25px; position: relative; height: 25px;margin-bottom: 15px;}
.profile .r h3 div{ background: #fff; display: inline-block; z-index: 999;  position: absolute; padding-right: 15px;}
.profile .r h3::after{ content:""; height: 1px; width:100%; display: block; position: absolute; background: #007695; bottom:50%;}
.profile .history{ display: flex; margin-bottom: 15px;}
.profile .history .history_l,
.profile .history .history_r{ width: 50%;}
.profile .history dl{ display: flex; margin-bottom: 8px;}
.profile .history dl dt{ margin-right: 8px; font-weight: 700;}

.profile .under{ display: flex; justify-content: space-between;}
.profile .under h4{color:#007695; font-size: 18px; line-height: 1.5em; font-weight: 700; margin-bottom: 8px;}
.profile .under .under_l,
.profile .under .under_r{ width: 49%;}

@media screen and (max-width: 728px) {
  .profile .l{ width:auto; display: none;}
  .profile .r{ width:auto; margin-left: 0;}
  .profile .img_mb{ margin-bottom: 30px;}
  .profile .history{ display: block;}
  .profile .history .history_l, .profile .history .history_r { width: 100%; }
  .profile .under{ display: block;}
  .profile .under .under_l{margin-bottom: 30px;}
  .profile .under .under_l,
  .profile .under .under_r{ width: auto;}
}

.about h3{ font-weight: 700;font-size: 18px; line-height: 1.5em;margin-bottom: 30px; }
.about .wrap{ display: flex;}
.about .wrap .l{ width: 33%; text-align: center;}
.about .wrap .l img{ width: 65%!important; height: auto!important;}
.about .wrap .r{ width: 66%;}
.about .wrap .r dl { display: flex; margin-bottom: 8px;}
.about .wrap .r dl dt{color:#007695;  line-height: 1.5em; font-weight: 700; width:10%;}

@media screen and (max-width: 728px) {
  .about .wrap { display: block;}
  .about .wrap .l,
  .about .wrap .r{ width: auto;}
  .about .wrap .l img{ width: 40%!important; height: auto!important; margin-bottom: 30px;}
  .about .wrap .r dl { display: block; margin-bottom:15px; }
  .about .wrap .r dl dt{width:auto;}
}

.contact .wrap{ display: flex; justify-content: space-between;}
.contact .submit{ display: flex; justify-content: center;}
.contact .wrap{ margin-bottom: 30px;}
.contact .wrap .l,
.contact .wrap .r{ width: 49%;}
.contact .wrap dl { margin-bottom: 15px;}
.contact .wrap dl dt{ border-left:3px solid #007695; padding-left: 8px; line-height: 1.2em; font-size: 13px; margin-bottom: 8px;}
.contact .wrap dl dt span{ color: #ccc; margin-left: 8px; font-size: 80%;}
.contact .wrap dl dt span.required{ color: #007695;}
.contact .wrap dl dd input,
.contact .wrap dl dd textarea,
.contact .wrap .r dd.pp_wrap
{ border: 1px solid #D9D9D9; padding: 8px;}
.contact .wrap dl dd.reply input{ border:none;}
.contact .wrap dl dd input,
.contact .wrap dl dd textarea,
.contact .wrap .r dd.pp_wrap
{width: 100%; box-sizing:border-box}
.contact .wrap dl div,
.contact .wrap dl p{ font-size: 10px;}
.contact .wrap dl div.pp{ overflow-y: scroll; height: 100px;}
.contact .submit div{ width: 30%; margin: 0 1%;}
.contact .submit div input{ width: 100%; border: none; padding: 15px; border-radius: 8px;}
.contact .submit div input:hover{ cursor: pointer;}
.contact .submit div.cancel input{ background: #D9D9D9; color: #fff;}
.contact .submit div.send input{ background: #219AAD; color: #fff;}

@media screen and (max-width: 728px) {
  .contact .wrap { display: block; }
  .contact .wrap .l,
  .contact .wrap .r{ width: auto;}
  .contact .submit { display: block; }
  .contact .submit div{ width: 100%; margin: 0;}
  .contact .submit div.cancel input{ margin-bottom: 15px;}
}

.contact .wrap dl dd label{ display: flex; align-items: center; }
.contact .wrap dl dd label span{ display:block; width:80px;text-align:left;}