/*

TemplateMo 561 Purple Buzz

https://templatemo.com/tm-561-purple-buzz

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. Main Nav
3. Home
4. About
5. Work
6. Single Work
7. Pricing
8. Contact
--------------------------------------------- */







html {font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Open Sans', sans-serif;}

/* Icons */

.icon-red {	  color: tomato;	}
.fc-tomato{	  color: tomato;	}
.fc-yellow{	  color: yellow;	}

.fc-bluegreen{	  color: cadetblue;	}

.bg-bluegreen{	background: cadetblue;	}
.bg-tomato{	background: tomato;	}




/* Typography */


p, a {font-weight: 400;}
.h2 {font-size: 40px;}
.h3 {font-size: 28px;}
.light-300 {
  font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Open Sans', sans-serif !important;
  font-weight: 300;
}
.regular-400 {
  font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Open Sans', sans-serif !important;
  font-weight: 400;
}
.semi-bold-600 {
  font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Open Sans', sans-serif !important;
  font-weight: 600;
}
.typo-space-line::after,
.typo-space-line-center::after {
  content: "";
  width: 150px;
  display:block;
  position: absolute;
  border-bottom:  5px solid #00A38B;
  padding-top: .5em;
}
.typo-space-line-center::after {
  left: 50%;
  margin-left: -75px;
}
/* Main Nav */
.navbar-toggler-icon {
    width: 3em;
    height: 3em;
}
.navbar-toggler {
    padding: 0.25rem 0.75rem 4rem;
  }


#main_nav .nav-item .nav-link:hover {color: orange;}
/* Home */
#index_banner {
  background-image: url('images/banner-bg-01.jpg');
  background-position: center right; background-size: cover;
  height: 100%;
  min-height: 45vh;
  width: 100%;
}
@media screen and (max-width: 991px) {/* スクリーンサイズが767px以下の場合に適用 */
  #index_banner {
    background-image: url('images/banner-bg-01-sp.png');
  }
}

#index_banner .carousel-item {
  min-height: 45vh;
}
#index_banner .carousel-control-prev i,
#index_banner .carousel-control-next i {
  color: #00A38B !important;
  text-decoration: none;
  font-size: 4em;
}
#index_banner .carousel-inner {
  height: 45vh;
}
#index_banner .carousel-indicators li,
#index_banner .carousel-indicators.active {
  background-color: #00A38B !important;
}
.service-wrapper .service-footer {
  max-width: 720px;
}

.wrapper720 {
  max-width: 720px;
}


.service-work.card {
  border-radius: 10px !important;
  cursor: pointer;
}
.service-work .service-work-vertical {
	background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 33.33%, rgba(255,255,255,1) 66.66%, rgba(255,255,255,0) 99.99%);
  background-size: 300% 300%;
  background-position: 0% 100%;
  transition: .5s;
}
.service-work .service-work-vertical:hover {
  background-position: 0% 0%;
  transition: .5s;
}
.service-work .service-work-vertical:hover * {
  color: #000;
  border-color: #000;
  transition: .5s;
}
.recent-work.card{
  border-radius: 10px !important;
}
.recent-work .recent-work-vertical {
	background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,1) 66.666%, rgba(255,255,255,0) 99.999%);
  background-size: 300% 300%;
  background-position: 0% 100%;
  transition: .5s;
  cursor: pointer;
}
.recent-work .recent-work-vertical:hover {
  background-position: 0% 0%;
  transition: .5s;
}
.recent-work .recent-work-vertical:hover div.recent-work-content {
  top: 50%;
  margin-top: -2.5em;
  position: absolute;
}
.recent-work .recent-work-vertical:hover * {
  color: white;
  transition: .5s;
}
/* About */
#work_banner {
  background-image: url('images/banner-bg-02.jpg');
  background-position: center center; background-size: cover;
  height: 100%;
  width: 100%;
}
.progress {
  height: 8px;
}
.objective-icon {
  border-radius: 13px;
  width: 8rem;
}
.partner-wap {
  background-color: #7276ec;
  transition: 1s;
  cursor: pointer;
}
.partner-wap:hover {
  background-color: #b1b3f5;
}
.why-us {
  background: rgb(239,239,253);
  background: -moz-linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  background: -webkit-linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  background: linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efeffd",endColorstr="#ffffff",GradientType=1);
}
.team-member-img {
  transition-duration: 0.15s;
}
.team-member:hover .team-member-img {
  padding: 10px !important;
}

/* Work */
/* Singel Work */
#work_single_banner {
  background-image: url('images/banner-bg-02.jpg');
  background-position: center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.related-content {
  border-radius: 20px;
  cursor: pointer;
}
/* Pricing */
.pricing-list {
  margin-bottom: 1px;
}
.pricing-table {
  max-width: 350px;
  margin: auto;
}
.pricing-table,
.pricing-horizontal {
  border-radius: 15px !important;
}
/* Contact */
#floatingtextarea {
  height: 150px
}
/* Footer */
footer a.text-light:hover {
  color: #bfbfbf !important;
  transition-duration: 0.15s;
}










/*	stepper	*/


.c-stepper {

}

.c-stepper li{
list-style: square;

}


.c-stepper h3{
	color: tomato;
	font-size: 2.4em;

}

.c-stepper p{
	font-size: 1.1em;

}



















@charset "utf-8";

h1,h2,h3,h4,h5,h6,div,input,p,a{
    font-family: "Open Sans";
    margin:0px;
}

.container-fluid,.container {
//    margin:auto;
//  padding:0px 15px;
//  max-width:1200px;
}

label{
//  font-weight:500;
}

.form-group{
//  margin-bottom:5px;
}


input,textarea,select,button{
    margin: 5px 0px ;
    font-size:13px !important;
    border-radius:0px;
}
input[type=text],input[type=password],textarea,input[type=email],select,textarea{
    width: 100%;
    border:1px solid #DADADA;
    padding: 5px 10px;
    height:45px;
}
input[type=submit],input[type=button],input[type=reset],button{
    border:none;
    font-size: 11px;
  border-radius:3px;
  height:45px;
  color:#FFF;
}

.btn:hover,.btn:focus{
    cursor:pointer;
    color:#FFF;
}
input[type=radio]{
    margin:0px;
    padding:0px;
    height:auto;
}
.form-control{
    box-shadow:none !important;
  border-radius:0px;
}
.form-control:focus{
    border:1px solid #CCC;
}
.btn:focus{
  box-shadow:none !important;
}

textarea{
    width: 100%;
}
input[type=reset]{
    margin-left: 10px;
}
textarea{
  min-height:100px;
}
a{
    color: inherit;
}
a:hover,a:focus{
    text-decoration: none !important;
    color: inherit !important;
}
ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.fixed{
    position: fixed;
}

.pricing-table-container{
  padding:50px 0px;
}
.description{
  padding:15px 0px;
}
.description a{
  padding:10px;
  font-size:13px;
  display:block;
  font-weight:bold;
  border-bottom:1px solid #DDD;
}
.description a.active{
  background-color:#FFF;
  padding-left:25px;
}
@charset "utf-8";
/* DEMO 01 */
.pricing-table-3{
  background-color:#FFF;
  margin:15px auto;
  box-shadow:0px 0px 25px rgba(0,0,0,0.1);
  max-width:300px;
  border-radius:0px 10px 0px 10px;
  overflow:hidden;
  position:relative;
  min-height:250px;
  transition:all ease-in-out 0.25s;
}
.pricing-table-3:hover{
  transform:scale(1.1,1.1);
  cursor:pointer;
}

.pricing-table-3.basic .price{
  background-color:#28b6f6;
  color:#FFF;
}
.pricing-table-3.premium .price{
  background-color:#ff9f00;
  color:#FFF;
}
.pricing-table-3.business .price{
  background-color:#c3185c;
  color:#FFF;
}

.pricing-table-3 .pricing-table-header{
  background-color:#212121;
  color:#FFF;
  padding:20px 0px 0px 20px;
  position:absolute;
  z-index:5;
}
.pricing-table-3 .pricing-table-header p{
  font-size:12px;
  opacity:0.7;
}
.pricing-table-3 .pricing-table-header::before{
  content:"";
  position:absolute;
  left:-50px;
  right:-180px;
  height:125px;
  top:-50px;
  background-color:#212121;
  z-index:-1;
  transform:rotate(-20deg)
}

.pricing-table-3 .price{
  position:absolute;
  top:0px;
  text-align:right;
  padding:110px 20px 0px 0px;
  right:0px;
  left:0px;
  font-size:20px;
  z-index:4;
}
.pricing-table-3 .price::before{
  content:"";
  position:absolute;
  left:0px;
  right:0px;
  height:100px;
  bottom:-25px;
  background-color:inherit;
  transform:skewY(10deg);
  z-index:-1;
  box-shadow:0px 5px 0px 5px rgba(0,0,0,0.05);
}


.pricing-table-3 .pricing-body{
  padding:20px;
  padding-top:200px;
}
.pricing-table-3 .pricing-table-ul li{
  color:rgba(0,0,0,0.7);
  font-size:13px;
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,0.1);
}
.pricing-table-3 .pricing-table-ul .fa{
  margin-right:10px;
}
.pricing-table-3.basic .pricing-table-ul .fa{
  color:#28b6f6;
}
.pricing-table-3.premium .pricing-table-ul .fa{
  color:#ff9f00;
}
.pricing-table-3.business .pricing-table-ul .fa{
  color:#c3185c;
}
.pricing-table-3 .view-more{
  margin:10px 20px;
  display:block;
  text-align:center;
  background-color:#212121;
  padding:10px 0px;
  color:#FFF;
}




















.usage-n{

}