@charset "UTF-8";
/*
Theme Name: kanban-vnavi
Theme URI:
Author:  
Author URI:
Description:
License:
License URI:
Tags:
*/
/* CSS Document */
/*=================================================
 *  リセット
 * ================================================= */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
  font-size: 100%;
  padding-bottom: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-left: 0;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
img {
  border: 0;
  vertical-align: bottom;
}
ul, ol {
  list-style: none;
}
table {
  border-spacing: 0;
  empty-cells: show;
}
p {
  margin: auto;
}
.wp-caption {
  width: 100% !important;
  height: auto;
}
/*=================================================
 * ロールオーバー
 * ================================================= */
a {
  -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;
  color: #000;
}
a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
*:focus {
  outline: none;
}
/*=================================================
 * サイト全体
 * ================================================= */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.2vw;
  color: #000;
  line-height: 2;
  background: #fff;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.mainWrap {
  width: 80vw;
  margin: 0 auto;
  position: relative;
}
.fullWrap {
  width: 100%;
}
.sp {
  display: none !important;
}
.flex {
  display: flex;
}
.flex-sb {
  display: flex;
  justify-content: space-between;
}
img {
  width: 100%;
  height: auto;
}
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
a {
  text-decoration: none;
}
.shadow {
  box-shadow: 0 0.3vw 1vw 0 rgb(0 0 0 / 20%);
}
.t-shadow {
  text-shadow: 1px 2px 3px #0000004d;
}
.dotstyle {
  list-style: disc;
  margin-left: 1.5vw;
}
/*=================================================
 * ボタン右矢印
 * ================================================= */
.btn.btn-angle {
  width: 17vw;
  position: relative;
  text-align: center;
  padding: 0.5vw 0;
}
.btn.btn-angle::after {
  position: absolute;
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  top: 50%;
  right: 20px;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*=================================================
 * 背景色
 * ================================================= */
.bg-tc {
  background-color: #633434;
}
.bg-gr {
  background-color: #18BEC8;
}
.bg-bl {
  background-color: #38B5FF;
}
.bg-mizu {
  background-color: #EFF9FF;
}
.bg-y-g {
  background: linear-gradient(to top, #ffce00, #f7eaa3);
}
.bg-b-g {
  background: linear-gradient(to bottom, #38b5ff, #bee6ff);
}
.bg-w {
  background-color: #fff;
}
/*=================================================
 * 色
 * ================================================= */
.tc {
  color: #005CC3;
}
.white {
  color: #fff;
}
.red {
  color: #A30000
}
.blue {
  color: #38B5FF;
}
/*=================================================
 * ボーダー
 * ================================================= */
.bd-a {
  border: 2px solid #38B5FF;
}
.bd-t {
  border-top: 1px solid #000;
}
.bd-b {
  border-bottom: 2px solid #38B5FF;
}
.bd-t-w {
  border-top: 1px solid #fff;
}
.bd-b-w {
  border-bottom: 1px solid #fff;
}
/*=================================================
 * パンくず
 * ================================================= */
.pankuzu {
  margin: 1vw 0 9vw;
  padding: 1vw;
}
.pankuzu ul {
  justify-content: right;
  margin-right: 3vw;
}
.pankuzu ul li:after {
  content: ">";
  margin: 0 1vw;
}
.pankuzu ul li:last-child:after {
  content: none;
}
.pankuzu li {
  font-size: 1vw;
  padding: 0 !important;
  display: flex;
}
/*=================================================
 * font
 * ================================================= */
.jose {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.zen {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}
.bold {
  font-weight: bold;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.f12 {
  font-size: 1vw;
}
.f14 {
  font-size: 1.1vw;
}
.f16 {
  font-size: 1.2vw;
}
.f18 {
  font-size: 1.3vw;
}
.f20 {
  font-size: 1.4vw;
}
.f21 {
  font-size: 1.5vw;
}
.f22 {
  font-size: 1.6vw;
}
.f24 {
  font-size: 1.8vw;
}
.f26 {
  font-size: 1.8vw;
}
.f30 {
  font-size: 2.2vw;
}
.f32 {
  font-size: 2.3vw;
}
.f34 {
  font-size: 2.5vw;
}
.f36 {
  font-size: 2.6vw;
}
.f46 {
  font-size: 2.8vw;
  line-height: 1.3;
}
.f48 {
  font-size: 3.4vw;
  line-height: 1.3;
}
.f50 {
  font-size: 3.8vw;
  line-height: 1;
}
.f60 {
  font-size: 4.4vw;
  line-height: 1;
}
.f80 {
  font-size: 6vw;
  line-height: 1;
}
.f120 {
  font-size: 8.2vw;
  line-height: 1;
}
/*=================================================
 * header
 * ================================================= */
header .hlogo {
  width: 13vw;
  position: absolute;
  top: 1.5vw;
  left: 2vw;
}
header .catch {
  position: absolute;
  right: 3vw;
  top: 0.5vw;
}
header .topimg {
  position: absolute;
  right: 3vw;
  width: 61vw;
  top: 3vw;
}
header .mainttl {
  position: absolute;
  left: 5vw;
  top: 20vw;
}
header .linebox {
  position: absolute;
  top: 39vw;
}
header .linebox .line01 {
  padding: 0.8vw 3vw;
  margin-bottom: 1.5vw;
  width: fit-content;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
}
header .linebox .line02 {
  padding: 0.8vw 5vw;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
}
.fixbt {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
/*=================================================
 * top
 * ================================================= */
#top {
  padding-top: 60vw;
}
#top .block01 {
  margin: 3vw 0;
}
#top .block01 .cbox {
  width: 63vw;
  margin: 0 auto;
  padding: 3vw 0;
}
#top .block01 .cbox .cell {
  width: 25vw;
  padding: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
}
#top .block01 .cbox .cell2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#top .block02 {
  padding: 7vw 0;
}
#top .block02 .box {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin: 5vw 0;
}
#top .block02 .box .abox {
  padding: 2vw;
}
#top .block02 .box .cell {
  width: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 3vw;
}
#top .block02 .box:after {
  content: "";
  display: block;
  width: 25vw;
}
#top .block02 .box .cell .tag {
  width: fit-content;
  padding: 0.5vw 3vw;
  border-radius: 5vw;
  margin: 0 auto;
}
#top .block02 .box .cell .ttl {
  padding: 1vw 0;
  line-height: 1.6;
  height: 6vw;
}
#top .block02 .box .cell .stxt {
  line-height: 1.5;
  padding: 1vw 0;
  height: 6vw;
}
#top .block02 .box .cell img {
  height: 14vw;
  object-fit: cover;
}
#top .block02 .box .cell .more {
  width: fit-content;
  padding: 0.5vw 4vw;
  border-radius: 5vw;
  margin: 0 auto;
  margin-top: 2vw;
}
.bbtBox {
  width: fit-content;
  padding: 1vw 8vw;
  margin: 0 auto;
  border-radius: 5vw;
}
.joinbox {
  padding: 5vw 0;
}
.joinbox .btbox {
  margin-top: 3vw;
}
.joinbox .btbox .bt {
  padding: 1.5vw;
}
.joinbox .btbox .bt:before {
  content: '';
  display: inline-block;
  width: 2vw;
  height: 2.7vw;
  background-image: url(img/human-b.svg);
  background-size: contain;
  vertical-align: middle;
  margin-right: 2vw;
}
#top .block03 {
  padding: 7vw 0;
}
#top .block03 .box {
  padding: 5vw 0 0;
  width: 80vw;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#top .block03 .box .cell {
  width: 35vw;
  padding-bottom: 12vw;
}
#top .block03 .box .cell img {
  height: 20vw;
  object-fit: cover;
  width: 30vw;
}
#top .block03 .box .cell .txtbox {
  width: 25vw;
  padding: 2vw;
  top: 14vw;
  right: 0;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 20%);
}
#top .block03 .box .cell .cat {
  width: fit-content;
  padding: 0.5vw 3vw;
  border-radius: 5vw;
}
#top .block03 .box .cell .ttl {
  line-height: 1.5;
  margin-top: 1vw;
  height: 6vw;
}
#top .block04 {
  padding: 7vw 0;
}
#top .block04 .wbox {
  margin-top: 7vw;
  padding: 3vw 4vw;
}
#top .block04 .wbox .ttl {
  margin-bottom: 2vw;
  display: flex;
  align-items: center;
}
#top .block04 .wbox .ttl .cell01 {
  width: fit-content;
  padding: 0.5vw 2vw;
  border-radius: 5vw;
  height: fit-content;
}
#top .block04 .wbox .ttl .cell02 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#top .block04 .wbox .ttl .cell02 span {
  margin-left: 2vw;
}
#top .block04 .wbox .box .img {
  width: 28vw;
  margin-right: 4vw;
}
#top .block04 .wbox .box .txtbox {
  width: 75vw;
}
#top .block04 .wbox .box .txtbox .blue {
  margin-top: 1vw;
}
#top .block05 {
  padding: 7vw 0 0;
}
#top .block05 .snsbox {
  padding: 4vw;
  border-radius: 2vw;
}
#top .block05 .snsbox .btbox {
  width: 46vw;
}
#top .block05 .snsbox .btbox .cell {
  display: flex;
  align-items: center;
}
#top .block05 .snsbox .btbox .cell .name {
  margin-left: 1vw;
}
/*=================================================
 * footer
 * ================================================= */
footer .fbox {
  padding: 5vw 0;
}
footer .snsbox {
  width: 16vw;
  margin: 0 auto;
}
footer .combox {
  width: 28vw;
  margin: 0 auto;
  padding: 5vw 0 2vw;
}
footer .combox .ttl {
  width: fit-content;
  height: fit-content;
  padding: 0.5vw 4vw;
  border-radius: 5vw;
}
footer .combox .namebox {
  display: flex;
  align-items: center;
}
footer .combox .logo {
  width: 3vw;
}
footer .combox .comname {
  margin-left: 1vw;
}
footer .linkwrap {
  margin: 0 auto;
  width: 12vw;
  padding: 3vw 0;
}
footer .linkwrap a {
  color: #fff;
}
footer .linkbox {
  border-bottom: solid 3px #fff;
  padding-bottom: 0.5vw;
}
footer .linkbox .icon {
  width: 2vw;
}
/*=================================================
 * page共通
 * ================================================= */
/*=================================================
 * news
 * ================================================= */
#news a {
  text-decoration: none;
}
#news .mainWrap {
  margin: 0 auto 10vw;
}
#news .postWrap .post {
  width: 55vw;
}
#news .mainWrap .post .box {
  padding: 1.5vw 0;
  width: 100%;
}
#news .mainWrap .post .box .date {
  width: 7vw;
}
#news .mainWrap .post .box .title {
  width: 48vw;
}
#news .mainWrap .post .box .arrow {
  width: 2vw;
  line-height: 1;
  margin: auto 0 auto 2vw;
}
#news .postWrap {
  justify-content: space-between;
}
#news .sidebar .block {
  margin-bottom: 4vw;
}
.sidebar {
  width: 18vw;
}
.sidebar .blue {
  padding-bottom: 1vw;
  display: inline-block;
  text-align: left;
  width: 100%;
}
.sidebar .bold {
  font-size: 1.6vw;
  margin-right: 1vw;
}
.sidebar ul {
  padding: 1vw 0;
}
.sidebar .block2 select {
  padding: 1vw;
  width: 100%;
}
.pager {
  justify-content: center;
  margin: 3vw auto;
  width: fit-content;
}
#news .single .left {
  padding-bottom: 1vw;
  margin-bottom: 1vw;
}
#news .content img {
  margin: 2vw 0;
  width: auto;
  height: auto;
}
#news .entry {
  margin: 2vw 0 4vw;
}
#news .entry a {
  border-bottom: 1px solid #333;
}
#news .single_pager {
  display: flex;
  justify-content: space-between;
  margin-top: 2vw;
}
/*=================================================
 * お問い合わせ
 * ================================================= */
.mw_wp_form_complete {
  margin: 5vw auto 10vw !important;
  width: 55vw !important;
}
#contact .fieldwrap {
  width: 50vw;
  margin: 5vw auto 10vw;
}
#contact .fieldwrap .message {
  font-weight: bold;
  margin-bottom: 3vw;
}
#contact .fieldwrap .field {
  margin-bottom: 2vw;
}
#contact input[type="text"], #contact input[type="email"] {
  width: 100%;
  padding: 1vw;
}
#contact .tel input[type="text"] {
  padding: 1vw;
  width: 15.7vw;
}
#contact select {
  padding: 1vw;
  width: 100%;
}
#contact textarea {
  width: 100%;
  height: 20vw;
  padding: 1vw;
}
#contact .check {
  margin-right: 3vw;
}
#contact .fieldwrap .bd-b {
  padding-bottom: 3vw;
}
#contact .fieldwrap .title2 {
  margin: 0 2vw 2vw 0;
  width: 12vw;
}
#contact .fieldwrap .title3 {
  margin: 3vw 0 1vw;
}
#contact .btbox {
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
}
#contact input[type="submit"] {
  width: 300px;
  padding: 1vw;
  border: 1px solid #707070;
  background-color: unset;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
}
#contact input[type="submit"]:hover {
  background-color: #F0F0F0 !important;
}
.mw_wp_form_complete {
  margin: 0 auto 15vw;
  width: 40vw;
  line-height: 2;
}
/*=================================================
 * レスポンシブ
 * ================================================= */
@media screen and (max-width: 768px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  body {
    font-size: 3.6vw;
    line-height: 2;
  }
  a:hover {
    opacity: none;
    filter: none;
  }
  .mainWrap {
    width: 90%;
    margin: 0 auto;
    position: relative;
    display: block;
  }
  /*   iphone対策（送信ボタン・セレクトボックス）   */
  input[type="submit"] {
    -webkit-appearance: none;
    color: #333;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 3.6vw;
    background-color: #fff;
    color: #000;
  }
  header nav {
    display: none;
  }
  header .hlogo {
    padding: 3vw 2vw;
    width: 28vw;
    position: unset;
  }
  header .mainttl {
    position: unset;
    text-align: right;
    margin-right: 5vw;
    margin-top: 5vw;
    line-height: 1.4;
  }
  header .topimg {
    position: absolute;
    right: 0;
    width: 90%;
    top: 22vw;
    margin: 0 auto;
    left: 0;
    z-index: -9999;
  }
  header .topimg img {
    height: 103vw;
    object-fit: cover;
  }
  header .linebox {
    position: absolute;
    top: 100vw;
  }
  header .linebox .line02 {
    margin-top: 3vw;
  }
  header .catch {
    position: absolute;
    right: 0;
    top: 130vw;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    left: 0;
  }
  #top {
    padding-top: 120vw;
  }
  #top .block01 {
    margin: 3vw 0 15vw;
  }
  #top .block01 .cbox {
    width: 100%;
    margin: 0 auto;
    padding: 10vw 0;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #top .block01 .cbox .cell {
    width: 100%;
  }
  #top .block01 .cbox .cell2 {
    width: 10vw;
    margin: 0 auto;
    padding: 5vw 0;
  }
  #top .block02 {
    padding: 15vw 0;
  }
  #top .block02 .sub {
    text-align: left;
    margin: 5vw 0;
    line-height: 1.6;
  }
  #top .block02 .box {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #top .block02 .box .cell {
    width: 100%;
    margin-bottom: 10vw;
  }
  #top .block02 .box .abox {
    padding: 5vw;
  }
  #top .block02 .box .cell .tag {
    padding: 1vw 10vw;
    border-radius: 10vw;
  }
  #top .block02 .box .cell .ttl {
    padding: 2vw 0;
    height: unset;
  }
  #top .block02 .box .cell .stxt {
    line-height: 1.5;
    padding: 4vw 0;
    height: unset;
  }
  #top .block02 .box .cell img {
    height: 40vw;
    object-fit: cover;
  }
  #top .block02 .box .cell .more {
    width: fit-content;
    padding: 2vw 12vw;
    border-radius: 10vw;
    margin: 0 auto;
    margin-top: 7vw;
  }
  .bbtBox {
    padding: 3vw 20vw;
    border-radius: 10vw;
  }
  .joinbox {
    padding: 15vw 0;
  }
  .joinbox .btbox .bt {
    padding: 5vw;
  }
  .joinbox .btbox .bt:before {
    width: 5vw;
    height: 6.9vw;
  }
  #top .block03 {
    padding: 5vw 0 15vw;
  }
  #top .block03 .box {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #top .block03 .box .cell {
    width: 100%;
    padding-bottom: 30vw;
  }
  #top .block03 .box .cell img {
      width: 80vw;
    height: 50vw;
    object-fit: cover;
  }
  #top .block03 .box .cell .txtbox {
    width: 70vw;
    padding: 4vw;
    top: 37vw;
    right: -5vw;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 20%);
  }
  #top .block03 .box .cell .cat {
    width: fit-content;
    padding: 0.5vw 5vw;
    border-radius: 8vw;
  }
  #top .block03 .box .cell .ttl {
    line-height: 1.5;
    margin-top: 2vw;
    height: unset;
  }
  #top .block04 {
    padding: 15vw 0;
  }
  #top .block04 .wbox {
    padding: 6vw;
  }
  #top .block04 .wbox .ttl {
    align-items: center;
    flex-direction: column;
  }
  #top .block04 .wbox .ttl .cell01 {
    width: fit-content;
    padding: 2vw 8vw;
    border-radius: 10vw;
    height: fit-content;
  }
  #top .block04 .wbox .box {
    flex-direction: column;
  }
  #top .block04 .wbox .box .img {
    width: 42vw;
    margin-right: unset;
    margin: 0 auto;
    padding: 5vw 0;
  }
  #top .block04 .wbox .box .txtbox .blue {
    margin-top: 5vw;
  }
  #top .block05 .snsbox {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #top .block05 .snsbox {
    padding: 10vw;
    border-radius: 2vw;
    text-align: center;
  }
  #top .block05 .snsbox .btbox {
    width: 40vw;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 5vw;
  }
  #top .block05 .snsbox .btbox .cell {
    justify-content: flex-start;
    margin-top: 5vw;
  }
  #top .block05 .snsbox .btbox .cell .img {
    width: 12vw;
  }
  footer .fbox {
    padding: 12vw 0 30vw;
  }
  footer .snsbox {
    width: 54vw;
    margin: 0 auto;
  }
  footer .combox {
    width: fit-content;
    padding: 7vw 0 6vw;
  }
  footer .combox .ttl {
    padding: 0.5vw 8vw;
    margin-right: 5vw;
  }
  footer .combox .logo {
    width: 6vw;
  }
  footer .combox .comname {
    margin-left: 4vw;
  }
  footer .linkwrap {
    width: fit-content;
    padding: 5vw 0;
  }
  footer .linkbox {
    padding-bottom: 2vw;
    align-items: center;
    align-content: center;
  }
  footer .linkbox .icon {
    width: 6vw;
    margin-left: 2vw;
  }
  /*その他*/
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 3.6vw;
    background-color: #fff;
    color: #000;
  }
  /*404エラーページ*/
  #p404 h2 {
    font-size: 5.5vw;
    margin-bottom: 7vw;
  }
  #p404 .mainWrap {
    margin: 0 auto 20vw;
  }
  /*フォントサイズ*/
  .f12 {
    font-size: 3vw;
  }
  .f14 {
    font-size: 3.5vw;
  }
  .f16 {
    font-size: 3.6vw;
  }
  .f18 {
    font-size: 3.7vw;
  }
  .f20 {
    font-size: 4vw;
  }
  .f22 {
    font-size: 5vw;
  }
  .f24 {
    font-size: 4.2vw;
  }
  .f26 {
    font-size: 4.5vw;
  }
  .f30 {
    font-size: 4.5vw;
  }
  .f32 {
    font-size: 4.5vw;
  }
  .f34 {
    font-size: 4.5vw;
  }
  .f46 {
    font-size: 5.5vw;
    line-height: 1.3;
  }
  .f48 {
    font-size: 6vw;
    line-height: 1.3;
  }
  .f50 {
    font-size: 9vw;
    line-height: 1.2;
  }
  .f70 {
    font-size: 10vw;
  }
  .f80 {
    font-size: 11vw;
  }
  .f120 {
    font-size: 11vw;
    line-height: 0.8;
  }
}