@import url("color.css");
@import url('https://fonts.googleapis.com/css?family=Corben:700');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 */

* {
    line-height: 1.0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #444;
}

html {
    font-size: 90px;
}
body {
    position: relative;
}
div,section {
    font-size: 0.14rem;
}


body,
h1,
h2,
h3,
h4,
h5,
h6,
label,
ul,
li,
p {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}


a {    
    text-decoration: none;
    color: #38A1DB;
}

/*body { background-color: #aaa; }*/

.top {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: 50% 0%;
    background-color: #ccc;
    background-image: url('../img/kvweb.jpg');

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;

    /* 左右中央寄せ */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    /* 上下中央寄せ */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    padding: 0.3rem;
    position: relative;

    animation-name: anim-up-30;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-fill-mode: both;

}

.top-txt {
    position: relative;
    max-width: 1080px;
    width: 100%;
    /*background-color: #dee;*/
}

@keyframes anim-scale-in{
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
            opacity:0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
}

@keyframes anim-up-30{
  0% {
    -webkit-transform: translateY(0.3rem);
            transform: translateY(0.3rem);
            opacity:0;
  }
  100% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
            opacity:1;
  }
}


@keyframes anim-right-30{
  0% {
    -webkit-transform: translateX(-0.3rem);
            transform: translateX(-0.3rem);
            opacity:0;
  }
  100% {
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
            opacity:1;
  }
}


.top .sub {
    font-size: 0.25rem;
    font-weight: bold;
    color:#ffffff;
    padding-bottom: 0.2rem;
    line-height: 1.2;
    animation-name: anim-right-30;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.top .motto {
    font-size: 0.65rem;
    font-weight: bold;
    color:#ffffff;
    letter-spacing: 0.15rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    animation-name: anim-right-30;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.7s;
    animation-fill-mode: both;
}

.top .cop {
    font-size: 0.14rem;
    animation-name: anim-right-30;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.9s;
    animation-fill-mode: both;
}
.top .cop p  {
    display: inline-block;
    background-color: #fff;
    color: #38A1DB;
    font-weight: bold;
    padding: 0.08rem;
    margin-bottom: 0.15rem;
}

.scroll {
    position: absolute;
    bottom: 0.3rem;
    right: auto;
    left: auto;
    height: auto;
    color: #ffffff;
    font-size: 0.14rem;
}


.header {
    position: fixed;
    z-index: 14;
    top: 0.4rem;
    left: 0.4rem;
}
.header img {
    width: 1rem;
}

.header_banner_1 {
    position: fixed;
    z-index: 12;
    top: 0.45rem;
    right: 2.7rem;
}

.header_banner_1 img {
    width: 1.9rem;
}


.header_banner_2 {
    position: fixed;
    z-index: 12;
    top: 0.45rem;
    right: 1.17rem;
}

.header_banner_2 img {
    width: 1.3rem;
}

.nav-btn {
    position: fixed;
    z-index: 9;
    top: 0.4rem;
    right: 0.4rem;
}
.nav-btn-a, .nav-btn-close-a {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    display: block;
    border-radius: 50%;
    background-color: #38A1DB;
}
.nav-btn-line {
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.3rem;
    height: 1px;
    display: block;
    overflow: hidden;
}
.nav-btn-line-1 {
    -webkit-transform: translateY(-0.1rem);
    transform: translateY(-0.1rem);
}
.nav-btn-line-2 {
    -webkit-transform: translateY(0rem);
    transform: translateY(0rem);
}
.nav-btn-line-3 {
    -webkit-transform: translateY(0.1rem);
    transform: translateY(0.1rem);
}

.nav-btn-line-4 {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}
.nav-btn-line-5 {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

#nav {
    position: fixed;
    z-index: 13;
    width: 100%;
    height: 100%;
    display: none;
}
#nav.nav-open {
    display: block;
}
#nav.nav-close {
    display: none;
}
.nav-wrap {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.nav-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 50%;
    padding: 0.4rem;
}
.nav-pic{
    height: 100%;
    flex: 1 0 50%;
    background-color: #ccc;
    overflow: hidden;
    display: none;
}
.nav-link {
    display: flex;
    flex-wrap: wrap;
    max-width: 4rem;
    justify-content: space-between;
}
.nav-link-item {
    font-size: 0.2rem;
    padding-bottom: 0.3rem;
    flex: 0 1 50%;
}
.nav-sns {
    max-width: 4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.4rem;
    padding-bottom: 0.6rem;
}
.nav-sns-item {
   padding-right: 0.2rem;
}
.nav-sns-item img {
    width: 0.4rem;
}
.nav-con {
    max-width: 4rem;
    width: 100%;
}
.nav-con-item {
    padding-bottom: 0.2rem;
    font-size: 0.14rem;
    line-height: 1.6;
}
.nav-pic-item {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    transform: scale(1.1);
}
.nav-open .nav-content { 
    animation-name: anim-up-30;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.1s;
    animation-fill-mode: both;
}

.nav-open .nav-pic-item { 
    animation-name: anim-scale-in;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.165,.84,.44,1);
    animation-delay: 0.1s;
    animation-fill-mode: both;
}


.ttl-1-L {
    font-size: 0.55rem;
    font-weight: bold;
    color: #F0E900;
    padding-top: 0.9rem;
    padding-bottom: 0.4rem;
    overflow: hidden;
    transform: translateX(-0.05rem);
}
.ttl-1-M {
    font-size: 0.6rem;
    font-weight: bold;
    color: #F0E900;
    padding-bottom: 0.2rem;
    transform: translateX(-0.05rem);
}
.ttl-1-S {
    font-size: 0.4rem;
    letter-spacing: 0.04rem;
    font-weight: bold;
    color: #F0E900;
    padding-bottom: 0.2rem;
    transform: translateX(-0.05rem);
}
.ttl-2 {
    font-size: 0.13rem;
    padding-bottom: 0.1rem;
}
.ttl-3 {
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 1.3;
}



.bus-top {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
    padding: 0.3rem 0rem 0rem 0rem;
    padding-bottom: 0.8rem;
}
.bus-top-p {
    width: 25%;
    padding-right: 0.2rem;
}
.bus-top-p img {
    width: 100%;
    -webkit-backface-visibility: hidden;
}
.bus-top-t-wrap {
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.bus-top-t {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.1rem;
}

.bus-top-t-1 {
    font-size: 0.13rem;
    width: 10%;
}
.bus-top-t-2 {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    align-items: center;
}
.bus-top-t-2-1 {
    font-size: 0.22rem;
    font-weight: bold;
    padding-right: 0.1rem;
    padding-bottom: 0.1rem;
    width: 100%;
}
.bus-top-t-2-2 {
    font-size: 0.13rem;
}



.bus-box {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.8rem;
    justify-content: space-between;
}
.bus-box-t {
    position: relative;
    width: 100%;
}
.bus-box-p {
    width: 100%;
    padding-top: 0.3rem;
    text-align: center;
}
.bus-box-p img {
    width: 90%;
    -webkit-backface-visibility: hidden;
}
.bus-box-t::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    background-position: 90% 0%;
    background-repeat: no-repeat;
    background-size: 1.4rem;
    z-index: -1;
} 
.bus-box-t-1 {
    display: flex; 
    align-items: center;
    padding-bottom: 0.2rem;
}
.bus-box-t-1-1 {
    font-size: 1rem;
    font-weight: bold;
    padding-right: 0.2rem;
    color: #ccc;
}
.bus-box-t-1-2 {
    font-size: 0.25rem;
    font-weight: bold;
}
.bus-box-t-2 {
    font-size: 0.14rem;
    line-height: 1.6;
}
.bus-box-p-1 {
    font-size: 0.13rem;
    text-align: center;
    padding-top: 0.1rem;
}

.bus-1::before {
    background-image: url('../img/2x/bus-1-2.png');
}
.bus-2::before {
    background-image: url('../img/2x/bus-3-2.png');
}
.bus-3::before {
    background-image: url('../img/2x/bus-4-2.png');
}
.bus-4::before {
    background-image: url('../img/2x/bus-2-2.png');
}

.news {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: stretch;
}
.news-ttl {
    width: 100%;
}
.news-list {
    width: 100%;
}
.news-list-row-1 {
    font-size: 0.14rem;
    line-height: 1.6;
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
    text-align: right;
}

div.whatsnew {
    margin: 0;
}

div.whatsnew h2,div.whatsnew hr {
    display: none;
}

div.whatsnew a {
  padding: 0;
  line-height: 1.6;
}

div.whatsnew a:hover {
  background:  none;
}

div.whatsnew dl {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    margin: 0;
    margin-bottom: 0.1rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    border-bottom: 1px dashed #ccc;
}

div.whatsnew dt {
    margin: 0;
    width: 100%;
    font-size: 0.14rem;
    line-height: 1.6;
    padding-bottom: 0.1rem
}

div.whatsnew span.cat {/*トップページ最新ニュース一覧で使用*/
    display: inline-block;
    margin: 0 0 0 0.1rem;
    padding: 0;
    width: 0.7rem;
    font-size: 0.13rem;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 1.6;
}
div.whatsnew dd {
    margin: 0;
    padding: 0;
    font-size: 0.14rem;
    line-height: 1.6;
}

.blog {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: stretch;
}
.blog-ttl {
    width: 100%;
}
.blog-list {
    width: 100%;
}
.blog-list-row {
    margin-bottom: 0.1rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    border-bottom: 1px dashed #ccc;
}
.blog-list-row-1 {
    font-size: 0.16rem;
    line-height: 1.4;
    font-weight: bold;
    padding-bottom: 0.15rem;
}
.blog-list-row-2 {
    font-size: 0.13rem;
    color: #ccc;
}
.blog-list-row-3 {
    font-size: 0.14rem;
    line-height: 1.6;
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
    text-align: right;
}


.com {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    align-items: stretch;
    justify-content: space-between;
}
.com-ttl {
    width: 100%;
}
.com-list {
    width: 100%;
    padding-top: 0.2rem;
}
.com-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-bottom: 0.2rem;
    justify-content: space-between;
}
.com-list-row-1 {
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0.1rem;
    flex: 1 0 30%;
}
.com-list-row-2 {
    font-size: 0.14rem;
    line-height: 1.6;
    flex: 1 0 70%;
}
.com-map {
    width: 100%;
    min-height: 3rem;
    padding-top: 0.2rem;

}
.com-map-inner {
    height: 100%;
    background-size: cover;
    background-position: 50% 0%;
    background-image: url('../img/map.png');
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.com-vision {
    width: 100%;
    /* text-align: center; */
    font-size: 0.16rem;
    line-height: 1.6;
    padding-top: 0.2rem;
}

.client {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
}
.client-ttl {
    width: 100%;
}
.client-list {
    width: 100%;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
}
.client-list-1 {
    font-size: 0.15rem;
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0.3rem;
}
.client-list-2 {
}
.client-list-2-item {
    font-size: 0.14rem;
    line-height: 1.6;
    padding-bottom: 0.1rem;
}


.book {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}
.book-ttl {
    width: 100%;
}
.book-list {
    width: 100%;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
}
.book-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-bottom: 0.2rem;
}
.book-list-p {
    padding-bottom: 0.1rem;
    flex: 1 0 45%;
}
.book-list-t {
    flex: 1 0 55%;
}
.book-list-t-1 {
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0.1rem;
}
.book-list-t-2 {
    font-size: 0.14rem;
    line-height: 1.6;
}
.book-list-p img {
    width: 90%; 
    /* -webkit-backface-visibility: hidden; */
}

/* AIアプリ開発・運用ブロック */
.app {
    display: flex;
    /*flex-wrap: wrap;*/
    padding-bottom: 2rem;
    align-items: stretch;
    justify-content: space-between;
}
.app-ttl {
    width: 65%;
}

.app-list-row-1 {
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0.1rem;
}
.app_img {
    width: 80%;
}

.app-list-row-2 {
    font-size: 0.14rem;
    line-height: 1.6;
}

.app_content_text {
    margin-top: 3%;
}



.contact {
    background-color: #38A1DB;
    text-align: center;
    padding: 1rem 0.3rem; 
}
.contact-txt,.contact-btn {
    color: #FFF;
    font-size: 0.14rem;
    line-height: 1.6;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.3rem 0rem;
    text-align: center;

}
.contact-txt {
    display: inline-block;
    text-align: left;
}

a.btn-blue {
    text-align: center;
    font-size: 0.2rem;
    line-height: 1;
    color: #fff;
    max-width: 4rem;
    padding: 0.15rem 0.3rem;
    background: #38A1DB;
    border-radius: 0.3rem;
    display:  inline-block;
}
a.btn-white {
    font-size: 0.2rem;
    line-height: 1;
    margin: 0 auto 0;
    color: #38A1DB;
    max-width: 4rem;
    padding: 0.15rem 0.3rem;
    background: #FFF;
    border-radius: 0.3rem;
    display: block;
}


.content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.4rem 0.4rem 0rem 0.4rem;
}
.content .cat {

}
.content ul.post-categories {
    padding: 0;

}
.content ul.post-categories li {/*ブログ記事で使用*//*アーカイブとカテゴリ一覧で使用*/
    display: inline-flex;
    align-items: center;
    border: 1px solid #bfbfbf;
    list-style: none;
    margin-right: 0.05rem;
    margin-bottom: 0.05rem;
    padding-left: 0.08rem;
    padding-right: 0.08rem;
    height: 0.24rem;
}
/*.tag {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.2rem;
}
.tag-item {
    font-size: 0.13rem;
    padding-right: 0.1rem;
}*/
.content-header {
    padding-bottom: 0.3rem;
    width: 100%;
}
.content-vision .content-header {
    padding-bottom: 0rem;
}
.content-header .cat {/*ニュース記事で使用*/
    display: inline-block;
    padding: 0;
    width: 0.7rem;
    font-size: 0.13rem;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 1.6;
    margin-top: 0.2rem;
}
.content-header ul.post-categories {
    margin-top: 0.2rem;
}
.content-page {
    padding-bottom: 0.8rem;
}
.content-page h2 {
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 1.3;
    padding-top: 0.5rem;
    padding-bottom: 0.2rem;
}
.content-vision .content-page h2 {
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 1.3;
    padding-top: 0rem;
    padding-bottom: 0.2rem;
}
.content-page h3 {
    font-size: 0.25rem;
    line-height: 1.3;
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
}
.content-page p {
    font-size: 0.14rem;
    line-height: 1.6;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
.content-page p.pre-title {
    margin-bottom: -0.18rem;
}

.content-page span.bg-color1 {
    background-color: #f4f432;
    padding: 0rem 0.02rem;
}
.content-page span.bg-color2 {
    background-color: #92f2c5;
    padding: 0rem 0.02rem;
}
.content-page span.bg-color3 {
    background-color: #eb385b;
    color: white;
    padding: 0rem 0.02rem;
}

.content-page ul {
    padding-inline-start: 40px;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
.content-page ul ul {
    padding-inline-start: 40px;
    padding-top: 0;
    padding-bottom: 0;
}
.content-page li {
    font-size: 0.14rem;
    line-height: 1.6;
}

.content-page pre {
    margin-bottom: 0.3rem;
}
.content-page a {
    color: #38A1DB;
}

.content-list {
    padding-bottom: 0.8rem;
}
.content-list-link {
    padding-bottom: 0.3rem;
    padding-top: 0.4rem;
}
.content-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-bottom: 0.3rem;
    padding-top: 0.4rem;
    border-bottom: 1px dashed #ccc;
    justify-content: space-between;
    font-size: 0.14rem;
}
.content-list-row-1 {
    font-size: 0.14rem;
    line-height: 1.6;
    padding-right: 0.2rem;
    padding-bottom: 0.1rem;
}
.content-list-row-2 {
    font-size: 0.14rem;
    line-height: 1.6;
    flex-grow: 1;
    padding-bottom: 0.1rem;
}
.content-list-row-3 {
    padding-bottom: 0.1rem;
    width: 100%;
}
.content-list .tag {
    padding-top: 0;
}
.content-list .tag-item {
    line-height: 1.6
}

nav.pagination {
    padding-top: 0.3rem;
}
nav.pagination .nav-links a,
nav.pagination .nav-links span{
    display: inline-block;
    padding: 0.1rem;
    font-size: 0.13rem;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 1.6;
}


.content-form {
    padding-bottom: 0.8rem;
}
.inner {
    margin: 0 auto;
    width: auto;
}
.content-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-bottom: 0.3rem;
    padding-top: 0.4rem;
    justify-content: space-between;
    font-size: 0.14rem;
}
.imp, .imp *, span.wpcf7-not-valid-tip, div.wpcf7-response-output{ color: #ff69b4 }

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    border: none;
}
div.wpcf7-response-output {
    margin: 0;
    padding: 0;
    border: none;
}
.content-form-row-0 {
    width: 100%;
    text-align: center;
    font-size: 0.14rem;
    line-height: 1.6;
    padding-bottom: 0.3rem;
}
.content-form-row-1 {
    font-size: 0.14rem;
    line-height: 1.6;
    width: 100%;
    padding-bottom: 0.1rem;
    font-weight: 700;
}
.content-form-row-2 {
    font-size: 0.14rem;
    line-height: 1.6;
    width: 100%;
}

.content-form span > input[type='text'],
.content-form span > input[type='email'] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 0.7rem;
    padding: 0.1rem;
    line-height: 1.5;
    margin: 0;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 0;
    vertical-align: middle;
}
.content-form span textarea {
    box-sizing: border-box;
    width: 100%;
    height: 2.4rem;
    padding: 0.1rem;
    line-height: 1.5;
    margin: 0;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 0;
}
input[type="submit"], input[type="button"]{
    border-radius: 0.1rem;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    height: 1rem;
    background: #38A1DB;
    color: #fff;
    font-size: 0.16rem;
    text-indent: 0.05rem;
    outline: none;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.3rem;
    padding-bottom: 0.2rem;
    align-items: center;
}
.footer-1 {
    flex-grow: 1;
    width: 100%;
    padding-right: 0.2rem;
    padding-bottom: 0.2rem;
}
.footer-1 img {
    width: 1rem;
}
.footer-2 {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.1rem;
}
.footer-2-item {
    font-size: 0.12rem;
    padding-right: 0.1rem;
    padding-bottom: 0.1rem;
}
.footer-2-item a {
    color: #444;
}
.footer-3 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.2rem;
}
.footer-3-item {
    padding-right: 0.2rem;
}
.footer-3-item img {
    width: 0.4rem;
}
.copyright{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.3rem;
    font-size: 0.11rem;
    text-align: right;
}

/* パンくずリンク */
.breadcrumbs-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.3rem 0.4rem 0rem 0.4rem;
    position: relative;
    z-index: 12;
}
.breadcrumbs {
    position: absolute;
    top: 1rem;
}



/*
 * -- code-prettify --
 */
.content-page pre {
    /*margin: 0.3rem auto;*/
}
.prettyprint ol.linenums > li {
    list-style-type: decimal; 
}
pre li { line-height: 1.5; font-size: 0.14rem; color:#aaa; padding-left: 0.2rem; }

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #555; padding: 0.2rem 0.2rem 0.2rem 0.1rem;}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #83F494 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb; display: initial;} /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #aaa; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #555; }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}





.hero {
    /*background-image: radial-gradient(50% 176%, #253854 80%, #061922 100%);*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    &__content {
        position: relative;
        align-self: center;
        padding: 3rem 0;
    }
}

.snow {
    position: fixed;
    z-index: -1;
    min-width: 100vw;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.snow .svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#snow-top-layer {
    will-change: transform;
    transform: translateY(0);
    animation: fall 35s infinite linear;
}

#snow-bottom-layer {
    will-change: transform;
    transform: translateY(0);
    animation: fall 55s infinite linear;
}

@keyframes fall {
    100% {
        transform: translateY(-768px)rotate(-10deg);
    }
    
}





/*@media screen and (min-width: 640px) {

}*/
/*@media screen and (min-width: 1200px) {

}*/

@media only screen and (max-width: 768px) { /*タブレット以下の画面*/
    .header_banner_1 {
        position: absolute;
        z-index: 12;
        top: 102vh;
        right: 1.2rem;
    }

    .app {
        padding-bottom: 2rem;
        display:block;
    }

    .app-ttl { 
        width: 100%;
        margin-bottom: 3%;
    }

    .app-list-row-1 {
        text-align: center;
    }

    .app_img { width: 40%;}


}



@media screen and (min-width: 768px) { /* 768以上の時 */

    html { font-size: 100px; }
    .reserve{ flex-direction: row-reverse; }
    .bus-top-p { width: 40%; }
    .bus-top-t-wrap { width: 60%; }
    .bus-top-t-1 { width: 5%; }
    .bus-top-t-2 { width: 95%; }
    .bus-top-t-2-1 { width: auto; }
    .top .motto { font-size: 1rem; }
    .bus-box-t { width: 45%; }
    .bus-box-p { width: 50%; }
    .bus-box-t-2 { padding: 0.1rem }
    .news-ttl { width: 30%; }
    .news-list { width: 70%; }
    .news-list-row-1 { width: auto; }
    div.whatsnew dt  { width: 35%; }
    div.whatsnew dd  { width: 65%; }
    .blog-ttl { width: 25%; }
    .blog-list { width: 75%; }
    .com-ttl { width:  25%; }
    .com-list { width: 40%; }
    .com-map { width: 35%; }
    .client-ttl { width:  35%; }
    .client-list { width: 65%; }
    .book-ttl { width:  23%; }
    .book-list { width: 77%;}
    .book-list-row { width: 50%; padding-right: 0.3rem}
    .inner { width: 700px; }
    .content-form-row-1 { width: 30%; }
    .content-form-row-2 { width: 70%; }
    .footer-1 { width: auto;}
    .footer-3 { width: auto;}
    .footer-2-item { width: auto; }
    .footer-3-item { padding-right: 0; padding-left: 0.2rem; }
    .nav-pic{ display: block; }
    .content-vision .ttl-1-L {font-size: 0.7rem; }
}