/* CSS Document */

body{
	overflow: hidden;
	width:100%;
}

p{
	margin:0
}

.red{
	color:#d73b4b;
}

.logo {
  transition: all ease-in 0.5s;
  opacity: 0; }

.logo.run {
  opacity: 1; }

.logo .anim {
  height: 183px;
  width: 826px;
  background-position: 0% 76.32%;
  background-size: 100%;
  margin: 0 auto;
  background-image: url(../img/logo_animation_var.png); }

.logo.run .anim {
  animation-name: logo_anim;
  animation-duration: 1.2s;
  animation-timing-function: step-end;
  animation-iteration-count: 1; }

@keyframes logo_anim {
  0% {
    background-position: 0% 0%;
    opacity: 1; }
  5% {
    background-position: 0% 4.77%;
    opacity: 1; }
  10% {
    background-position: 0% 9.54%;
    opacity: 1; }
  15% {
    background-position: 0% 14.31%;
    opacity: 1; }
  20% {
    background-position: 0% 19.08%;
    opacity: 1; }
  25% {
    background-position: 0% 23.85%;
    opacity: 1; }
  30% {
    background-position: 0% 28.62%;
    opacity: 1; }
  35% {
    background-position: 0% 33.39%;
    opacity: 1; }
  40% {
    background-position: 0% 38.16%;
    opacity: 1; }
  45% {
    background-position: 0% 42.93%;
    opacity: 1; }
  75% {
    background-position: 0% 47.7%;
    opacity: 1; }
  80% {
    background-position: 0% 52.47%;
    opacity: 1; }
  85% {
    background-position: 0% 57.24%;
    opacity: 1; }
  90% {
    background-position: 0% 62.01%;
    opacity: 1; }
  95% {
    background-position: 0% 66.78%;
    opacity: 1; }
  100% {
    background-position: 0% 71.55%;
    opacity: 1; }
  105% {
    background-position: 0% 76.32%;
    opacity: 1; } }
.fadein__01 {
  animation-name: fadein;
  animation-duration: 3.5s;
  animation-timing-function: ease-out; }
.fadein__02 {
  animation-name: fadein;
  animation-duration: 4.3s;
  animation-timing-function: ease-out; }
.fadein__03 {
  animation-name: fadein;
  animation-duration: 5.0s;
  animation-timing-function: ease-out; }

@keyframes fadein {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@media only screen and (max-width: 829px) {
  .logo .anim {
    height: 150px;
    width: 680px; } }
@media only screen and (max-width: 700px) {
  .logo .anim {
    height: 65px;
    width: 300px; } }
a {
  color: #0000DD; }

a:hover {
  color: #3333FF; }

.copy {
  text-align: center; }

.about {
  background: #F3F3F3;
  padding: 30px 0 100px; }

.btn {
  border: #cb0038 3px solid;
  outline: #F3F1DB 5px solid;
  color: #cb0038;
  background-color: #F3F1DB;
  -webkit-border-radius: 0;
  -ms-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  display: block;
  margin: 50px auto;
  width: 90%;
  max-width: 300px;
  padding: 20px;
  font-size: 14pt;
  letter-spacing: 3px;
  font-weight: bold; }
  .btn:hover {
    color: #cb0038;
    opacity: 0.8; }

.global-nav {
  text-align: center; }
  .global-nav__cell {
    margin: 10px 0;
    display: inline-block;
    padding: 0 20px;
    border-right: 2px #140202 solid;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 12pt; }
    .global-nav__cell:first-child {
      border-left: 2px #140202 solid; }
  .global-nav__link {
    color: #140202; }
    .global-nav__link:after {
      content: "";
      display: block;
      background-color: #140202;
      width: 0;
      height: 2px; }
    .global-nav__link:hover {
      text-decoration: none;
      color: #140202; }
      .global-nav__link:hover:after {
        width: 100%; }

.h2 {
  font-size: 24pt;
  letter-spacing: 2px;
  text-align: center;
  margin: 100px 0; }
  .h2:after {
    content: "";
    display: block;
    background-color: #140202;
    width: 50px;
    height: 3px;
    margin: 20px auto; }

.copy {
  font-weight: bold;
  font-size: 16pt;
  letter-spacing: 2px;
  padding-bottom: 50px;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  text-align: center; }

.text {
  max-width: 900px;
  line-height: 2em;
  letter-spacing: 2px;
  width: 90%;
  margin: 0 auto;
  text-align: left;
  font-size: 12pt;
  padding: 50px 0; }

.notice {
  font-size: 8pt;
  color: #7a7777;
  max-width: 900px;
  line-height: 2em;
  letter-spacing: 2px;
  width: 90%;
  text-align: left;
  margin: 0 auto; }

.header__wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; }
.header__bg {
  position: absolute;
  margin: 10px;
  top: 10px;
  right: 2%;
  width: 75%;
  z-index: 0; }
  .header__bg img {
    width: 100%;
    height: auto; }
.header__title {
  position: relative;
  width: 15%;
  padding-top: 5%;
  margin-left: 10%; }
  .header__title img {
    width: 100%;
    height: auto; }
.header__tel {
  position: relative;
  width: 15%;
  padding-top: 5%;
  margin-left: 10%;
  margin-bottom: 15%; }
  .header__tel img {
    width: 100%;
    height: auto; }
.header__copylight {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 8pt;
  transform-origin: 0% 50%;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl; }

.qa__question {
  width: 90%;
  margin: 30px auto;
  font-size: 12pt;
  line-height: 24pt;
  max-width:900px;
  }
  
  .qa__question:before {
    content: "Q";
    background: #c8c8b8;
    padding: 5px 10px;
    margin-right: 10px;
    color: #fff;
    font-size: 24pt;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; }
.qa__answer {
 display:block;
  width: 90%;
  max-width:900px;
  margin: 30px auto;
  font-size: 12pt;
  line-height: 24pt;
  color: #cb0038; }
  .qa__answer:before {
    content: "A";
    background: #cb0038;
    margin-right: 10px;
    padding: 5px 10px;
    color: #fff;
    font-size: 24pt;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; }

.image_photo {
  margin-top: 0;
	z-index: 0;
}

  .image_photo img {
    width: 100%;
    height: auto;
	z-index: 0;
}

.flow{
	padding-bottom:100px;
	line-height:2em;
}

.flow__list {
  max-width: 900px;
  width: 90%;
  margin: 50px auto; }
.flow__cell {
  list-style: none;
  background-color: #F3F3F3;
  margin: 15px 0; }
  .flow__cell__title {
    display: inline-block;
    font-size: 12pt;
    color: #cb0038;
    width: 250px;
    text-align: left;
    padding: 20px 20px;
    background: #fff;
    vertical-align: middle;
    border: 2px #cb0038 solid; }
  .flow__cell p {
    display: inline-block;
    vertical-align: middle;
    padding: 10px; }

.price {
  background: #F3F3F3;
  padding: 30px 0; }
  .price__menu {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    text-align: center; }
    .price__menu__cell {
      display: inline-block;
      background-color: #F3F1DB;
      width: 300px;
      height: 500px;
      vertical-align: top;
      margin: 20px; }
      .price__menu__cell__title {
        font-size: 12pt;
        font-weight: bold;
        margin: 30px 0 10px; }
      .price__menu__cell__price {
        font-size: 24pt;
        font-weight: bold;
        margin: 40px 0 30px;
        color: #cb0038;
        letter-spacing: 2px;
        line-height: 1em;
        height: 50px; }
        .price__menu__cell__price__sub {
          font-size: 8pt;
          line-height: 1em; }
      .price__menu__cell__text {
        font-size: 10pt;
        width: 90%;
        margin: 0 auto;
        line-height: 2em; }

.contact {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
  padding-bottom:50px;
  text-align: center; }
  .contact__tel {
    background-color: #F3F1DB;
    padding: 30px 0; }
    .contact__tel__title {
      font-size: 12pt;
      font-weight: bold;
      letter-spacing: 2px; }
    .contact__tel__number {
      color: #cb0038;
      font-size: 48pt;
      margin: 15px 0; }
      .contact__tel__number:hover {
        color: #cb0038; }

.person {
  text-align: center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#999999+0,c9c9c9+50,2989d8+51,2989d8+51,0075d6+100 */
  background: #fff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #fff 50%, #c8c8b8 51%, #c8c8b8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #c8c8b8 51%, #c8c8b8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fff 0%, #fff 50%, #c8c8b8 51%, #c8c8b8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='$co-footer',GradientType=0 );
  /* IE6-9 */ }
  .person__comment {
    max-width: 400px;
    margin: 30px auto; }
    .person__comment img {
      width: 100%;
      height: auto; }
  .person__list {
    font-size: 0px;
    letter-spacing: 0px;
    margin: 0; }
  .person__cell {
    width: 200px;
    font-size: 10pt;
    line-height: 2em;
    max-width: 40%;
    margin: 5%;
    display: inline-block;
    position: relative; }
    .person__cell__thumb img {
      width: 100%;
      height: auto; }
    .person__cell__logo {
      position: absolute;
      width: 50px;
      top: -20px;
      left: -20px; }
      .person__cell__logo img {
        width: 100%;
        height: auto; }

.contact .form {
  max-width: 600px;
  width: 100%;
  margin: 10px auto; }
.contact label {
  margin: 30px 10px 10px;
  display: block; }

.support{
	max-width:900px;
	width:90%;
	margin:0 auto;
}

.personal{
	display:flex;
	display: -webkit-flex;
	margin-bottom:20px;
	background:#fff;
	padding:20px;
}

.personal .photo{
	flex:none;
	-webkit-flex:none;/*--- safari（PC）用 ---*/
	width:200px;
	height:200px;
}

.personal .per_text{
  line-height: 2em;
  letter-spacing: 1px;
  text-align: left;
  padding:0 0 0 20px;
  }
  
  .personal p{
	  font-size:14px;
  }
  
  .personal  h5{
	  font-size:16px;
	  font-weight:bold;
	  margin-bottom:20px;
	  line-height:1.4em;
  }
  
  .personal .per_logo {
      position: absolute;
      width: 50px;
      top: 0;
      left: 0;
	  }

.footer {
  background-color: #c8c8b8;
  }
  
  .footer_in{
	    display:flex;
		max-width:900px;
		width:90%;
		margin:0 auto;
		padding:50px 0;
		justify-content: center;
		font-size:11px;
  }
  
    .footer_in div{
		margin-right:20px;
	}
  
    .footer_in img{
		margin-right:20px;
		
	}
  
  .footer__logos {
    text-align: center; }
    .footer__logos__cell {
      display: inline-block;
      width: 100px;
      vertical-align: middle;
      padding: 20px 10px; }
      .footer__logos__cell img {
        width: 100%;
        height: auto; }
  .footer__company__info {
    width: auto;
    text-align: center;
    color: #7a7777; }
  .footer__copylight {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 1em;
    padding: 15px 0;
    margin: 0; }

.float_button{
	position: fixed;
	bottom: 18px;
	right: 40px;
	z-index: 9999;
	animation: buttonAnime .8s linear;
}

@keyframes buttonAnime{
	0%{ bottom: -50px;} 
	50%{ bottom: -50px;} 
	100%{ bottom:18px;}
}

.float_button a, .float_button a:hover, .float_button a:active{
	color: #FFFFFF;
	padding: 20px;
	background: #cb0038;
	border-radius: 4px 4px 0 0;
	text-decoration: none;
	z-index: 9999;
}

.float_button a:hover{
	cursor: pointer;
}

@media only screen and (max-width: 879px) {
  .flow__cell__title {
    width: 100%; }

  .contact__tel__number {
    font-size: 16pt; } 
	
	.personal{
	display:flex;
	display: -webkit-flex;
	margin-bottom:20px;
	background:#fff;
	padding:20px;
	-webkit-flex-direction:column;
}

.personal .photo{
	margin:0 auto 30px;
	flex:none;
	-webkit-flex:none;/*--- safari（PC）用 ---*/
}

	}

/*# sourceMappingURL=style.css.map */