/* ==========================================================================
Mystyle
========================================================================== */

#logo-size {
    width: 40px;
    height: auto;
}

.svg1 {
    width: 80px;
    height: auto;
    position: relative;
    top: 180px;
    /*left: 48%;*/
}

@media screen and (max-width:787px){
.svg1 {
    position: relative;
    top: 150px;
    /*left: 38%;*/
}
}

.svg-font {
    width: 480px;
    height: auto;
    position: relative;
    /*left: 30%;*/
}

@media screen and (max-width:787px){
.svg-font {
    width: 240px;
    height: auto;
    position: relative;
    top: 50px;
    /*left: 20%;*/
}
}

.svg-font-Footer {
    width: 250px;
    height: auto;
}

@keyframes STROKE {
0% {
    stroke-dashoffset: 2000;
}
100% {
    stroke-dashoffset: 0;
}
}
.st0{
fill: none;
stroke: #FFF;
stroke-width: 1px;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: STROKE 7s;
animation-fill-mode: forwards;
}
.lt-o01 {
  animation-delay: 0.8s;
}
.lt-n {
  animation-delay: 1.3s;
}
.lt-o02 {
  animation-delay: 2s;
}
.lt-m02 {
  animation-delay: 2.7s;
}
.lt-o03 {
  animation-delay: 3.5s;
}
.lt-d {
  animation-delay: 4.2s;
}
.lt-e {
  animation-delay: 3s;
}

/* common */
.main-sub-ttl {
    font-size: 160%;
    position: relative;
    margin-top: -10px;
    color: white;
    text-align: center;
}

@media screen and (max-width:787px){
.main-sub-ttl {
    font-size: 140%;
    position: relative;
    top: 20px;
    /*left: 0;*/
    margin-top: -10px;
    color: white;
    /*text-align: left;*/
}
}

.sans-serif{
     font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

@media screen and (min-width:787px){
.dsp-none {
    display: none;
}
}


.img-responsive {
    width: 100%;
    height: auto;
}

.center {
    text-align: center;
    margin: 0 auto;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

@media screen and (max-width:787px){
.spleft {
    text-align: left;
}
}

.nopadding {
    padding: 0;
}

.arrow {
    height: 50px;
    width: auto;
}

.ft14b {
    font-size: 14px;
    font-weight: 600;
}

.ft30b {
    font-size: 150%;
    font-weight: 600;
    line-height: 30px;
}

.ft50b {
    font-size: 170%;
    font-weight: 800;
    line-height: 30px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt100 {
    margin-top: 100px;
}

.mb10 {
    margin-bottom: 10px;
}

.box-btn {
    background-color: #808080;
    padding: 20px 20px;
}

.box-btn a:link {
    color: white;
}

.wd350 {
    width: 350px;
}

.sub-ttl00 {
    font-size: 220%;
    font-weight: 600;
    color: #111;
    border-bottom: solid 2px #000;
    display: inline-block;
     font-family:"Helvetica","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    letter-spacing: 1px;
}

.screenshots-intro h1.inner {
    margin-bottom: 50px;
    color: #24374b;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
}

.features-slider {
    position: relative;
    padding: 2% 40px 10% 330px;
    height: 400px;
    background-color: #000;
}/* 変更 */

@media screen and (max-width:787px){
.features-slider {
    position: relative;
    padding: 2% 10px 5% 10px;
    height: 300px;
    background-color: #000;
}/* 変更 */
}

.features-slider h1 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 220%;
    font-weight: 600;
    border-bottom: solid 2px #FFF;
    display: inline-block;
     font-family:"Helvetica","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    letter-spacing: 1px;
}

.features-slider h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
     font-family:"Helvetica","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    letter-spacing: 1px;
}
.features-slider p {
    color: #fff;
    font-size: 12px;
    display: inline-block;
     font-family:"Helvetica","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    letter-spacing: 1px;
    margin: 0;
}

.features-slider p.add {
    color: #fff;
    font-size: 12px;
    display: inline-block;
     font-family:"Helvetica","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    letter-spacing: 1px;
    margin-top: 15px;
    line-height: 1.5;
}

.glyphicon {
    width: 40px;
    height: auto;
}
/* common end */







/****************************************
contents
*****************************************/

.sec{
    margin-bottom: 120px;
}

.page-title{
    text-align: center;
}

.page-title__title{
    color: #333;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
}

.img-container{
    overflow: hidden;
    position: relative;
}

.img-container__img{
    display: block;
    opacity: 0;
    position: relative;
    transition:all .5s .3s ease;
    z-index: 0;
}

.img-container:before{
    background: #000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-100%);
    transition:all .8s 0s ease;
    width: 100%;
    z-index: 1;
}

.text-container{
    opacity: 0;
    padding:0 60px;
    transition:all .8s 0.8s ease;
}

.text-container__title{
    color: #333;
    display: inline-block;
    font-size: 60px;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/*アニメーションするプロパティを設定します*/
.img-container.active img{
    opacity: 1;
}

.img-container.active:before{
    transform: translateX(100%);
}

.text-container.active{
    opacity: 1;
}


.features-bg-w {
    position: relative;
    min-height: 300px;
    background-color: white;
    background-size: cover;
}

/* ==========================================================================
Hero inner
========================================================================== */
.hero-inner {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 0;
    background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
}
.hero-inner h1 {
    margin: 50px 0 45px 0;
    font-weight: 300;
    font-size: 45px;
}
.hero-innero h1 span {
    display: inline-block;
    color: #a1a9b0;
}
#home {
    width: 100%;
    height: 100%;
}
.hero-inner {
    width: 100%;
    height: 100%;
}
header i {
    margin-left: 5px
}

hero-content

/* ==========================================================================
Company profile
========================================================================== */

.white-box {
    border-top: solid 3px #c3aa7a;
    padding: 30px;
    color: #808080;
    box-shadow:0px 0px 9px -5px #cacaca;
    width: 90%;
    margin: 0 auto;
}

.white-box02 {
    border-top: solid 3px #c3aa7a;
    padding: 30px;
    color: #808080;
    box-shadow:0px 0px 9px -5px #cacaca;
    width: 90%;
    margin: 0 auto;
}

table {
    width: 100%;
    font-size: 16px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

table tbody{
    padding: 20px;
}

/*table tr {
    text-align: left;
    padding: 15px;
    font-weight: normal;
    padding: 15px;
}

table th {
    text-align: left;
    font-weight: normal;
    padding: 15px;
    width: 30%;
}

table td {
    width: 70%;
}*/

table {
  margin: 10px auto;
}

.tbl-r02 th {
  padding: 10px;
    background-color: #f9f9f9;
    font-weight: normal;
}
.tbl-r02 td {
  padding: 10px;
    text-align: left;
    background-color: white;
}

@media screen and (max-width: 787px) {
.white-box02 {
    padding: 10px;
}
  .last td:last-child {
    width: 100%;
  }
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
    display: block;
    width: 100%;
  }
}



table .bottombox {
    border-bottom: solid 1px #ddd;
}

/* ==========================================================================
Inquiry
========================================================================== */

.white-box-inq {
    border-top: solid 3px #c3aa7a;
    color: #808080;
    box-shadow:0px 0px 9px -5px #cacaca;
    width: 65%;
    margin: 0 auto;
}

.white-box-inq-thsnks {
    border-top: solid 3px #c3aa7a;
    padding: 20px;
    color: #808080;
    box-shadow:0px 0px 9px -5px #cacaca;
    width: 65%;
    margin: 0 auto;
}

.white-box-inq-thsnks hr {
    border-top: solid 1px #cacaca;
    width: 200px;
}

.white-box-inq-thsnks h1 {
    background-color: black;
    padding: 10px 10px 0 10px;
    width: 320px;
    margin: 0 auto;
}

@media screen and (max-width:787px){
.white-box-inq {
    width: 90%;
}

.white-box-inq-thsnks {
    width: 90%;
}
}


/* ==========================================================================
Privacy Policy
========================================================================== */
.privacy ul {
    list-style-type: none;
    padding-left: 1em;
}

.privacy hr {
    width: 300px;
    border-bottom: solid 1px #ededed;
}