@charset "utf-8";
html, body {
  font-size: 16px;
  height: 100%;
  width: 100%;
  font-family: "Cairo","Noto Sans JP", sans-serif;
  font-weight: 400;
}

body {
  color: #333333;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.8;
  vertical-align: baseline;
  background: transparent;
}

h1, h2, h3, h4, h5, h6{
  line-height: 1.4;
}

table th{
  font-weight:normal;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/*  image
--------------------------------------*/

img {
  margin: 0px;
  padding: 0px;
  border: none;
  vertical-align: bottom;
  max-width:100%;
  height:auto;
}

a img {
  border: 0px;
}

a {
  vertical-align: baseline;
  color: #333333;
  text-decoration: none;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

a:hover{
  color:#CC4131;
  text-decoration: none;
}

.manulink a,
.manulink a:visited{
  display:block;
  overflow:hidden;
  position:relative;
  transform:perspective(1px) translateZ(0);
  -webkit-transform:perspective(1px) translateZ(0);
  line-height:40px;
  background:none;
}

.manulink a:before {
  position:absolute;
  z-index:-1;
  right:51%;
  bottom:0;
  left:51%;
  height:4px;
  background:#CC4131;
  content:'';
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition-duration:0.4s;
  -webkit-transition-duration:0.4s;
  transition-property:left, right;
  -webkit-transition-property:left, right;
}

.manulink a:hover:before,
.manulink a:focus:before,
.manulink a:active:before {
  right:0;
  left:0;
}

/*  ロールオーバー時、透過で使用
-------------------------------------*/
.toimg a:hover img {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

.tozoom{
  overflow:hidden;
}

.tozoom img{
  transition:1s all;
}

.tozoom img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}

/*  list
--------------------------------------*/

ul {
  list-style-type: none;
}

/*	クリアフィックス - CLEAR FIX -
--------------------------------------*/
.cf:before,
.cf:after { content:""; display:table;}
.cf:after { clear:both;}
.cf { zoom:1;}

.centerpos {
  text-align: center;
}


.pagenation {
  position:fixed;
  top:40%;
  left:0;
  padding:20px;
}

.pagenation li {
  list-style-type:none;
  margin-bottom:15px;
}

.pagenation a {
  display:block;
  width:10px;
  height:10px;
  border:1px solid #040404;
  border-radius:5px;
}

.pagenation a.active {
  background:#040404;
}

.button:hover{
  color:#ffffff;
  background:#FFC700;
}

.fancybox-slide{
  padding: 44px 12px 44px 12px !important;
}

.fancybox-slide--video .fancybox-content {
	max-width  : 960px;
  max-height: 540px;
}

@media (max-width: 992px) {
  .fancybox-slide--video .fancybox-content {
    max-width  : 100%;
    max-height: 100%;
  }
}

.form-control {
  display: inline-block;
}

.form-control::placeholder {
  color: #bbb;
}

.form-control{
  background-color:#EDF7F2;
}

.form-w300 {
  width:300px;
}

.form-w120 {
  width:120px;
}

.form-w80{
  width:80px !important;
}


@media (max-width: 767px) {
  .form-w300 {
    width:100%;
  }
}

/* 入力画面 */
.mw_wp_form_input .phase_input{
  display: block;
}

.mw_wp_form_input .phase_confirm{
  display: none;
}

/* 確認画面 */
.mw_wp_form_confirm .phase_input{
  display: none;
}

.mw_wp_form_confirm .phase_confirm{
  display: block;
}

/* Rectangle Out */
.hvr-rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #CC4131;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
  color: white;
}

.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Rectangle Out */
.hvr-rectangle-out2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-rectangle-out2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333333;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-rectangle-out2:hover, .hvr-rectangle-out2:focus, .hvr-rectangle-out2:active {
  color: white;
}

.hvr-rectangle-out2:hover:before, .hvr-rectangle-out2:focus:before, .hvr-rectangle-out2:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.col-md-five-1{
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .col-md-five-1 {
    width: 20%;
    flex: 0 0 20%;
    -ms-flex: 0 0 18.8%;
    float: left;
  }
}