html,
body {
  height: 100%;
}


body {
  /* display: -ms-flexbox;
  display: -webkit-box;
  display: flex; */
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  /* padding-bottom: 40px; */
  /*background-color: #f5f5f5;*/
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.movie {
  width: 100%;
}

.ebina-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
#app{
	margin-bottom: 80px;
}

/*header
------------------------------------- */
.navbar {
	background-color: #D34C72;
}
.navbar img{
	width: 200px;
}

/*flow
------------------------------------- */
.flow {
	margin: 20px 0 40px;
}
	
.flow .col-md-4{
	background-color: #FFFCE2;
	border: 2px solid #DA7188;
	height: 350px;
	position: relative;
	margin-right: 55px;
	max-width: 30.3%;
	border-radius: 10px;
}
	.flow .col-md-4 h1{
		color: #D34C72;
		font-weight: bold;
		text-align: center;
		line-height: 1.1;
		font-size: 2em;
		margin-bottom: 26px;
	}
	.flow .col-md-4 h1 span{
		font-size: 1.2em;
	}
	.flow .col-md-4 h1 em{
		font-size: 0.4em;
		font-style: normal;
	}
	.flow .col-md-4 .flow-menu{
		font-size: 1.1em;
		color: #D34C72;
		line-height: 2;
		padding-left: 50px;
	}
.flow .col-md-4::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: url(../img/flow.png);
    background-size: 29px 69px;
    position: absolute;
	right: -42px;
	top: 45%;
	width: 29px;
	height: 69px;  
}
.flow .col-md-4:last-child{
    margin-right: 0;
}
.flow .col-md-4:last-child:after{
	display: none;
}

/*sidemenu
------------------------------------- */
.sidemenu{
	padding-right: 30px;
}
.sidemenu .nav-pills .nav-link {
    background-color: #F9E9EA;
    color: #D34C72;
	font-weight: bold;
    border-radius: 0;
   	border-color: #DA7188 !important;
	font-weight: bold;
}
.sidemenu .nav-pills .nav-link.active {
    background-color: #DA7188;
    color: #FFF;
}
.sidemenu .flex-column {
	margin-bottom: 30px;
}


/*tab-content
------------------------------------- */
.tab-content .bg-dark{
    background-color: #E8DCD9 !important;
	color: #8F3F67 !important;
}
.tab-content h2{
	color: #D34C72 !important;
}
.tab-content .bg-dark.border-bottom{
	border-color: #FFF !important;
}

/*thanks
------------------------------------- */
.thanks .display-6,.thanks .lead{
	color: #D34C72;
}
.jumbotron.thanks {
    padding: 2rem 2rem 4rem!important;;
}

/*button
------------------------------------- */
.ebina-container .col .btn-danger {
    background-color: #D34C72;
    border-color: #D34C72;
}
.ebina-container .col .btn-danger:hover {
    background-color: #BC0C3D;
}

.ebina-container .col .btn-lg{
	font-weight: bold;
}





/* ==========================================================================
                       min-width: 576px�ȉ�
   ========================================================================== */
@media (min-width: 320px) {
    .ebina-container {
        max-width: 540px;
    }
	.flow {
	    margin: 20px 0 0px;
	}
	.flow .col-md-4 {
	    max-width: 100%;
	    margin-right: 0;
		height: auto;
		margin-bottom: 20px;
	}
	.flow .col-md-4::after {
 		display: none;
	}
	.flow .col-md-4 h1 {
		font-size: 1.3em;
		text-align: left;
		margin: 16px 0 10px;
	}
	.flow .col-md-4 h1 br {
		display: none;
	}
	.flow .col-md-4 h1 em {
		font-size: 1em;
	    font-style: normal;
	}
	.flow .col-md-4 .flow-menu {
	    padding-left: 0px;
		margin-bottom: 20px;
	}
	.flow .col-md-4 .flow-menu{
		font-size: 1.1em;
	    padding-left: 0px;
	}
/*confim-03
------------------------------------- */
            .confim-03 .design-bg {
                max-width: 80%;
                max-height: 80%;
				text-align: center;
				margin: 0 auto;
            }

            .confim-03 .design-image {
                border: 1px solid #aaa;
                max-width: 100%;
            }

            .confim-03 .col-sm-6  a.btn.btn-info {
				text-align: center;
				margin: .25rem auto !important;
			}
/*------------------------------------- */
}
/* ==========================================================================
                       min-width: 576px
   ========================================================================== */
@media (min-width: 576px) {
    .ebina-container {
        max-width: 540px;
    }
	.flow {
	    margin: 20px 0 40px;
	}
	.flow .col-md-4 {
	    margin-right: 0.5%;
	    max-width: 33%;
		height: 350px;
		margin-bottom: 0px;
	}
	.flow .col-md-4::after {
 		display: none;
	}
	.flow .col-md-4 h1{
		text-align: center;
		font-size: 1.3em;
		margin: 0 0 26px;
	}
	.flow .col-md-4 h1 em{
		font-size: 0.4em;
		font-style: normal;
	}
	.flow .col-md-4 h1 br {
		display: block;
	}
	.flow .col-md-4 .flow-menu {
	    padding-left: 0px;
		margin-bottom: 0px;
		font-size: 0.8em;
	    padding-left: 0px;
	}
	.flow .col-md-4 h1 br {
		display: block;
	}
/*confim-03
------------------------------------- */
            .confim-03 .design-bg {
                max-width: 80%;
                max-height: 80%;
				text-align: center;
				margin: 0 auto;
            }

            .confim-03 .design-image {
                border: 1px solid #aaa;
                max-width: 100%;
            }

            .confim-03 .col-sm-6  a.btn.btn-info {
				text-align: left !important;
				margin: .25rem 0 !important;
			}
/*------------------------------------- */
}
/* ==========================================================================
                       min-width: 768px
   ========================================================================== */
@media (min-width: 768px) {
    .ebina-container {
        max-width: 720px;
    }
	.flow .col-md-4 {
		height: 280px;
	}
	.flow .col-md-4 .flow-menu{
		font-size: 0.9em;
	    padding-left: 0px;
	}
	.flow .col-md-4 h1{
		text-align: center;
		font-size: 1.5em;
		margin: 0 0 20px;
	}
/*------------------------------------- */
}
/* ==========================================================================
                       min-width: 992px
   ========================================================================== */
@media (min-width: 992px) {
    .ebina-container {
        max-width: 960px;
    }
	.flow .col-md-4 {
	    margin-right: 2%;
	    max-width: 32%;
		height: 350px;
	}
	.flow .col-md-4::after {
 		display: none;
	}
	.flow .col-md-4 .flow-menu {
	    padding-left: 10px;
		font-size: 1.1em;
	}
	.flow .col-md-4 h1{
		font-size: 2em;
		margin: 0 0 26px;
	}
/*------------------------------------- */
}

/* ==========================================================================
                        min-width: 1280px
   ========================================================================== */
@media (min-width: 1280px) {

    .ebina-container {
        max-width: 1280px;
    }
	.flow .col-md-4 {
		margin-right: 55px;
		max-width: 30.3%;
		height: 350px;
	}
	.flow .col-md-4::after {
	    display: block;
	}
	.flow .col-md-4 .flow-menu {
	    padding-left: 30px;
	}
/*------------------------------------- */
}






/*
@font-face {
  font-family: 'Gaiji-Sans';
  src: url("../font/Gaiji-Sans.ttf");
}

@font-face {
  font-family: 'SourceHanSans';
  src: url("../font/SourceHanSansJP-Normal.otf");
}

* {
  font-family: 'Gaiji-Sans', 'SourceHanSans';
}*/