@charset "utf-8";

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg,rgba(0,181,226,1),rgba(0,94,184,1),rgba(11,48,142,1));
  background-size: cover;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

#top{
  height: 60vh!important;
  padding-top: 120px;
}
.carousel-item{
  width:100%!important;
}

.card:hover{
  color:#FFF!important;
  -webkit-box-shadow: 0 16px 24px 2px rgba(255, 255, 255, 0.3), 0 6px 30px 5px rgba(255, 255, 255, 0.3), 0 8px 10px -5px rgba(255, 255, 255, 0.4);
          box-shadow: 0 16px 24px 2px rgba(255, 255, 255, 0.3), 0 6px 30px 5px rgba(255, 255, 255, 0.3), 0 8px 10px -5px rgba(255, 255, 255, 0.4);
}

.card-title{
  font-size: 1.2rem!important;
  color:#FFF!important;
}

.card{
  background:rgb(11, 48, 142)!important;
  color:#FFF!important;
}
.card-content{
  padding:16px 24px 20px 24px!important;
}
.card-reveal{
  background:rgb(11, 48, 142)!important;
  color:#FFF!important;
}

.card .badge{
  color:#FFF!important;
  background:rgba(255, 171, 64,.8);
  transition:.4s;	
  margin:0;
  padding:3px 8px;
  font-size: small;
  display:inline;
}

.card img{
  width:100%;
  max-height: 195px;
  height: auto;
}


#me img{
  border: solid 1px #005eb8;
}

.bg{
  background: rgba(11, 48, 142, 0.7);
  width: 100%;
  padding: 30px;
  z-index:10!important;
}


.cp1 {
  background-color:#005eb8 !important;
}
.cp1-text {
  color: #005eb8 !important;
}

.cp2 {
  background-color:#0b308e !important;
}


.cpg {
background: linear-gradient(45deg,rgba(11,48,142,1),rgba(0,94,184,1));
}

.cp250 {
  background-color:rgba(11, 48, 142,.5) !important;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 0;
}


.bgL {
  background: rgba(255, 255, 255,.9);
  padding: 20px;
  width: 85vw;
  height : 22vw ;
  z-index:0;
  position: absolute;
}

.row{
  z-index:10!important;
  position: relative;
 }

.pad-LR-10{
  padding:0 10px!important;
}
.pad-LR-20{
  padding:0 20px!important;
}
.mar-T-20{
  margin-top:20px!important;
}
.page-footer{
  z-index:80!important;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 20px solid rgba(255, 255, 255,.8);
  border-bottom: 0;
  margin:50px 0;
  z-index:10!important;
  position: relative;
}


nav ul {
  z-index: 100!important;
  display:flex!important;
  justify-content: flex-end;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
  margin:0 0 50px 0;
  list-style: none;
}

.nav-wrapper{
  margin: 0 auto;
  max-width: 1280px;
}

.brand-logo {
  width:100%;
  padding-left:10px!important;
}

.brand-logo img{
  height:35px;
  vertical-align: middle;
  padding-right:15px;
}

@media only screen and (max-width: 992px) {
  .brand-logo {
    height: 44px!important;
    text-align: center;
    padding-left:0px!important;
  }
    .nav-wrapper, .nav-content {
    min-height:100px!important;
  }
  .nav-content {
  width:100%!important;
  top:56px;
  }  
  nav ul {
    top:56px;
    line-height: 44px!important;
    height: 44px!important;
    width:100%;
  }
  nav li {
    width:25%;
    text-align: center;
  }
}

@media only screen and (min-width: 993px) {
  nav ul {
    line-height: 64px!important;
    height: 64px!important;
  }
  nav ul li a{
    line-height: 64px!important;
    height: 64px!important;
  }
}

nav li a{
  display: block;
  padding:10px 30px;
  text-decoration: none;
  color: #333;
  position: relative;
  color:rgba(255, 255, 255,.8);
}

nav li{
  margin-bottom:20px;
}

nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 2px;
  background:rgba(255, 255, 255,.8);
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

nav li a.active::after,
nav li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}


/* ボタン全体 */
.flowbtn1{
  font-family:'Verdana',sans-serif;	
  display:inline-block;
  width:50px;
  height: 50px;
  line-height: 38px;
  font-size:24px;
  transition:.4s;	
  text-decoration:none;  
  color:#fff!important;
  border-radius: 100%;
  vertical-align: middle;
  padding-top:6px;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .5);
  }

.libe{
  line-height: 38px;
  font-size:14px;
  font-family: 'Meirio UI';
  font-weight: 900;
}

.flowbtn1 img{
  padding-top:6px;
  border:none!important;
  height: 28px;
}
  /* ボタン内テキストマウスホバー時 */
  .flowbtn1:hover{
  box-shadow: 0px 0px 16px -6px rgba(255, 255, 255, 0.8), 0px 0px 0px 1px rgba(255,255,255,1) inset;
  -webkit-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
  text-decoration:none;
  }

  /* Twitterマウスホバー時 */
  .flowbtn1.fl_tw2{
    background: rgba(27, 149, 224,.7);
  }
  /* Instagramマウスホバー時 */
  .flowbtn1.insta_btn2{
    background:rgba(198, 82, 154,.7);
  }

  /* リベシティマウスホバー時 */
  .flowbtn1.fl_fb2{
    background: rgba(102, 153, 255,.7) ;
  }

  /* メールアイコンマウスホバー時 */
  .flowbtn1.fl_ma2{
    background: rgba(243, 152, 29,.7);
  }

  /* ボタン全体の位置 */
  .snsbtniti1{
  padding:20px 0;
  }
  /* ボタン全体の位置 */
  .snsbtniti1 a{
    margin:10px;
  }
    
  
  .flowbtn1.square{
    font-family:'Verdana',sans-serif;	
    display:inline-block;
    width:100px;
    height: 100px;
    line-height: 38px;
    font-size:24px;
    transition:.4s;	
    text-decoration:none;  
    color:#fff!important;
    border-radius: 0;
    vertical-align: middle;
    padding-top:6px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .5);
    }



  .cmt{
    background: linear-gradient(90deg,rgba(0,181,226,.2),rgba(11,48,142,.2),rgba(11,48,142,.2));
   color:#FFF;
    padding:10px;
    margin-top:100px;
  }

  .cmt i{
    font-size:1.2rem;
    padding-right:10px;
  }



  .flowbtn12{
    font-family:'Verdana',sans-serif;	
    display:inline-block;
    width:100%;
    height: 48px;
    font-size:20px;
    transition:.4s;	
    text-decoration:none;  
    color:#fff!important;
    border-radius: 0;
    vertical-align: middle;
    padding-top:6px;
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .5);
    text-align: center;
    border-radius: 50px;
  }
  



  .flowbtn12:hover{
    box-shadow: 0px 0px 16px -6px rgba(255, 255, 255, 0.8), 0px 0px 0px 1px rgba(255,255,255,1) inset;
    -webkit-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    transform: rotateX(360deg);
    text-decoration:none;  
  }

  .flowbtn12 span{
    width: 100%;
    height: 100%;
    color: #fff;
    font-size:16px;
    line-height: 24px;
  }
  
  /* Twitter */
  .flowbtn12.fl_tw2{
    background: rgba(27, 149, 224,.7);
  }

  /* Instagramマウスホバー時 */
  .flowbtn12.insta_btn2{
    background:rgba(198, 82, 154,.7);
  }
  /* リベシティマウスホバー時 */
  .flowbtn12.fl_fb2{
    background: rgba(102, 153, 255,.7) ;
  }
  /* メールアイコンマウスホバー時 */
  .flowbtn12.fl_ma2{
    background: rgba(243, 152, 29,.7);
  }

.flowbtn12 img{
  padding:6px 10px 0 0;
  border:none!important;
  height: 25px;
}
.flowbtn12 span i{
  padding-right:10px;
  font-size:20px!important;
}

form {
  padding: 5px auto 10px;
  display: inline-block;
  text-align: center;
}

form p  {
  float: left;
  padding:0 20px;
}

form p  label{
  color:#fff;
}


/* アイコン周り全体 */
.flowbtn13{
  font-family:'Arial', sans-serif,"メイリオ";	
  display:inline-block;
  width:90%;
  font-size:30px;
  text-align:left;
  border-bottom:solid 0.5px #FFF;	
  text-decoration:none;
  }
  /* マウスホバー時に下線を消す */
  .flowbtn13:hover{
  text-decoration:none;
  }
  /* Twitter */
  .flowbtn13 .fa-twitter-square{
  color:#55acee;
  }
  /* Twitterマウスホバー時 */
  .fl_tw13 span:hover{
  color:#55acee;
  }
  /* メールアイコン */
  .flowbtn13 .fa-envelope-square{
  color:#f3981d;
  }
  /* メールアイコンマウスホバー時 */
  .fl_ma13 span:hover{
  color:#f3981d;	
  }
  /* プロフィールアイコン */
  .flowbtn13 .fa-user-edit{
  color: rgba(102, 153, 255,1) ;
  }
  /* プロフィールアイコンマウスホバー時 */
  .fl_pf13 span:hover{
    color: rgba(102, 153, 255,1) ;
  }  
  /* 3.05ホバー時 */
  .fl_305 span:hover{
    color:#55acee;
  }
  .f305{
  margin-top:10px;
}
  /* メールアイコン */
  .flowbtn13 i{
    padding:0 10px;
    }

  /* テキスト調整 */
  .flowbtn13 span{
  font-size:16px;	
  position:relative;
  left:8px;
  bottom:6px;	
  color:#eee;	
  }
  /* テキストマウスホバー時*/
  .flowbtn13 span:hover{
   transition: .5s;
  font-weight:bold;	
  margin-left:5px;	
  }
  /* ulタグの内側余白を０にする */
  ul.snsbtniti2{
  padding:0!important;
  }
  /* 全体の位置 */
  .snsbtniti2{
  display:flex;
  flex-flow:row wrap;
  }
  /* 要素同士の余白 */
  .snsbtniti2 li{
  flex:0 0 48%;
  text-align:center!important;
  }

  .bg2{
    background: rgba(11, 48, 142, 0.7);
    width: 100%;
    padding: 20px;
    margin:20px 0;
    z-index:10!important;
  }
  
  .no-mag-b{
    margin-bottom: 0!important;
  }