@charset "utf-8";

html{
  /*font-size: 10px;*/
  font-size: 62.5%;
}

body {
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  color: #333333;
  overflow-x: hidden;
}

.clearFix:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  _zoom: 1;
}

*:first-child+html .clearFix:after{ zoom: 1; } /* IE7 */

a,a img,input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"]{
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
}

a:hover img,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="image"]:hover{
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

img{
  max-width: 100%;
  height: auto;
}

.alignleft{
  margin: 0 30px 30px 0;
  float: left;
}

.alignright{
  margin: 0 0 30px 30px;
  float: right;
}

.aligncenter{
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignnone{ vertical-align: top;}

.alignleft,.alignright,.aligncenter,.alignnone{
  max-width: 100%;
  height: auto;
}

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

.btn{
  margin: 0;
  padding: 30px 0;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
}

.btn a{
  display: inline-block;
  padding: 1em 2em 1em 3.5em;
  background: #C2145A;
  border-radius: 3em;
  color: #FFFFFF;
  background-image: url("../img/contact_icon.png");
  background-repeat: no-repeat;
  background-position: left 1.5em center;
  background-size: 1.5em;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.web_btn {
  display: inline-block;
  padding: 1em 2em 1em 3.5em;
  background: #F27EB1;
  border-radius: 3em;
  color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: left 1.5em center;
  background-size: 1.5em;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 1em 0 .5em;
  background-image: url('../img/pc-icon.png');
  text-align: center;
}

.tel_btn {
  display: inline-block;
  padding: 1em 2em 1em 3.5em;
  background: #7C7C7C;
  border-radius: 3em;
  color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: left 1.5em center;
  background-size: 1.5em;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: .5em 0 1em;
  background-image: url('../img/tel_icon.png');
  text-align: center;
}

.btn a:hover{
  text-decoration: none;
  background-color: #FB6E70;
}

.web_btn:hover {
  text-decoration: none;
  opacity: 0.7;
}

.tel_btn:hover {
  text-decoration: none;
  opacity: 0.7;
}

.inner{
  max-width: 1100px;
  margin: auto;
  padding: 0 15px;
}


/**************************************************
 header
**************************************************/
header{
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: center;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: center;/*--- IE10 ---*/
  -webkit-align-items: center;/*--- safari（PC）用 ---*/
  align-items: center;
  flex-wrap: wrap;
}

header h1{
  width: 20%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.hd_info{ text-align: center;}

.hd_info p{
  padding: 0 0 10px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}

.hd_info .btn{ padding: 0;}

.hd_info .btn a{
  padding-top: 5px;
  padding-bottom: 5px;
  background-size: 15px;
}


/**************************************************
 text
**************************************************/
h2{
  position: relative;
  margin: 40px 0 20px;
  padding: 30px 0;
  font-size: 30px;
  font-size: 3.0rem;
  line-height: 1.2;
  text-align: center;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
  font-style: normal;
}
h2::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 40%;
  display: inline-block;
  width: 20%;
  height: 5px;
  margin: 0;
  background: linear-gradient(90deg, #E4B6CB, #5B9ED2);
}

section h2{
  padding: 40px 0 50px;
  color: #FFFFFF;
  line-height: 1.3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
section h2 eng{
  font-size: 60px;
  font-size: 6.0rem;
  font-family: acumin-pro, sans-serif;
  font-weight: 100;
  font-style: normal;
}
section h2::after{ display: none;}

section h2 span{
  position: relative;
  z-index: 10;
}

section h2::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  z-index: 1;
}

h3{
  padding: 30px 0 10px;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
}

h4{
  padding: 30px 0 10px;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.4;
}

.pu{
  margin: 30px 0;
  padding: 20px;
  border: 3px solid #C2145A;
  color: #C2145A;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}

p,ul,ol,table,dl{
  padding: 15px 0;
  font-size: 16px;
  font-size: 1.6rem;
}


/**************************************************
 user voice
**************************************************/
.user_voice{ margin: 30px 0;}
.user_voice dl{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: stretch;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: stretch;/*--- IE10 ---*/
  -webkit-align-items: stretch;/*--- safari（PC）用 ---*/
  align-items: stretch;
  flex-wrap: wrap;
}

.user_voice dl dt{ width: 18%;}

.user_voice dl dd{
  width: 80%;
  padding: 30px 40px;
  background: #EAF2F5;
  border-radius: 10px;
}

.user_voice dl dd .tit{
  position: relative;
  padding: 0 0 0 35px;
  background-size: contain;
  color: #C47AA8;
  font-size: 22px;
  font-size: 2.2rem;
  font-family: acumin-pro, sans-serif;
  font-weight: 100;
  font-style: normal;
}
.user_voice dl dd .tit::before{
  position: absolute;
  left: 0;
  content: '';
  width: 30px;
  height: 35px;
  background: url("../img/voice_icon.png") no-repeat 0 0;
  background-size: 100%;
}

.user_voice dl dd h3{
  padding: 10px 0;
  color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: inherit;
}
.user_voice dl dd p{ padding: 0;}


/**************************************************
 visual
**************************************************/
#main_visual{
  position: relative;
}

.visual_image {
  position: relative;
}

.visual_image::before {
  background-color: rgba(95, 48, 70, .3);
  bottom: 0;
  content: ' ';
  left: 0;
/* background-color: rgba(0,0,0,0.4); */
  position: absolute;
  right: 0;
  top: 0;
}

.visual_text {
  left: 50%;
  margin-top: 100px;

/* animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0.5s 1 normal; */
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  -webkit-transition: all 2s .3s ease;
  transition: all 2s .3s ease;
  width: 100%;
}

.visual_text.showUp {
  margin-top: 0;
  opacity: .9;
}

.visual_text img {
  vertical-align: bottom;
  width: 60vw;
}

.test.up {
  margin-top: 0;
  opacity: .9;
}

/**
 * .visual_textを上下中央に配置するため、
 * transformの追加により動作が安定しないためコメントアウト
 */
/* @keyframes fadeIn {
  0% {opacity: 0;	transform: translateX(50px);}
  100% {opacity: 0.9; transform: translateX(0);}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;	transform: translateX(50px);}
  100% {opacity: 0.9; transform: translateX(0);}
} */

.visual_image img {
  vertical-align: bottom;
  width: 100%;
}

.visual_image img.no_pc {
  display: none;
  vertical-align: bottom;
}


/**************************************************
 reason
**************************************************/
.reason ul{
  max-width: 980px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: stretch;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: stretch;/*--- IE10 ---*/
  -webkit-align-items: stretch;/*--- safari（PC）用 ---*/
  align-items: stretch;
  flex-wrap: wrap;
}

.reason ul li{
  width: 23%;
  height: 200px;
  color: #333333;
  background: linear-gradient(135deg, rgba(194,20,90,0.25), 90%, #9198e5);
  background:-moz-linear-gradient(135deg, rgba(194,20,90,0.25), 90%, #9198e5); /* Firefox */
  background:-webkit-linear-gradient(135deg, rgba(194,20,90,0.25), 90%, #9198e5);/* safari Chrome */
  background:-ms-linear-gradient(135deg, rgba(194,20,90,0.25), #9198e5); /* IE */
  box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
  border-radius: 20px;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  display: flex; /* 子要素をflexboxで揃える */
  flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
  justify-content: center; /* 子要素をflexboxにより中央に配置する */
  align-items: center;  /* 子要素をflexboxにより中央に配置する */
}

.reason ul li small{
  display: block;
  padding: 0 0 10px 0;
}


/**************************************************
 machine
**************************************************/
.machine .inner{
  margin: 30px auto;
  padding: 0 60px;
}
.machine h2{ background-image: url("../img/h2_bg1.jpg");}
.machine h2::before{ background-color: rgba(21,49,149,0.60);}

.machine_pickup dl{ padding: 10px;}
.machine_pickup dl dd{ padding: 15px;}
.machine_pickup dl dd strong{
  font-size: 20px;
  font-size: 2.0rem;
}


/**************************************************
 howto
**************************************************/
.howto{
  padding-bottom: 50px;
  background: url("../img/howto_bg.png") no-repeat bottom 50px center;
  background-size: 100% auto;
}
.howto .inner{
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: stretch;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: stretch;/*--- IE10 ---*/
  -webkit-align-items: stretch;/*--- safari（PC）用 ---*/
  align-items: stretch;
  flex-wrap: wrap;
}

.howto dl{
  width: 22%;
  margin: 0;
  padding: 0;
}
.howto dl:nth-child(odd){ margin: 50px 0 0 0;}

.howto dl dt{
  margin: 0;
  padding: 0;
  color: #5B9ED2;
  font-size: 60px;
  font-size: 6.0rem;
  line-height: 1.2;
  text-align: center;
  font-family: acumin-pro, sans-serif;
  font-weight: 100;
  font-style: normal;
}

.howto dl dd{
  margin: 10px 0 0 0;
  padding: 0 20px 20px 20px;
  background: #EAF2F5;
  box-shadow: 3px 3px 2px rgba(0,0,0,0.3);
}
.howto dl dd h3{
  position: relative;
  top: -15px;
  margin: 0 -10px;
  padding: 5px 10px;
  background: #5B9ED2;
  color: #FFFFFF;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  border-radius: 2em;
}
.howto dl dd p{
  padding: 0;
  font-size: 15px;
  font-size: 1.5rem;
}

.machine_list{
  max-width: 1100px;
  margin: 30px auto 70px;
  padding: 30px;
  border: 1px solid #BDBDBD;
}
.machine_list dl{
  margin: auto;
  padding: 5px 0;
}
.machine_list dl dt{
  padding: 0 0 5px 0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
}
.machine_list dl dd{ padding: 0;}
.machine_list dl dd p{
  padding: 5px 0 0 10px;
  font-size: 14px;
  font-size: 1.4rem;
}

.machine_list ul{
  margin: 0;
  padding: 0;
}
.machine_list ul li{
  display: inline-block;
  margin: 0.5%;
  padding: 5px;
  background: #EAF2F5;
  border-radius: 10px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1;
}



/**************************************************
 ladys
**************************************************/
.ladys h2{
  background-image: url("../img/h2_bg2.jpg");
  background-size: 50%;
  background-position: right top 0;
}
.ladys h2::before{ background-color: rgba(194,20,90,0.40);}

.ladys h3{
  color: #C2145A;
}


/**************************************************
 family
**************************************************/
.family h2{
  background-image: url("../img/h2_bg3.jpg");
  background-size: 50%;
  background-position: left top 0;
}
.family h2::before{ background-color: rgba(255,102,0,0.60);}

.family .pu{
  border-color: #FF9466;
  color: #FF9466;
}

.stepup{
  margin: 20px 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: stretch;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: stretch;/*--- IE10 ---*/
  -webkit-align-items: stretch;/*--- safari（PC）用 ---*/
  align-items: stretch;
  flex-wrap: wrap;
}

.stepup dl{
  position: relative;
  width: 24%;
  padding: 20px;
  background-color: #FF9466;
  color: #FFFFFF;
}
.stepup dl::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #FF9466;
}
.stepup dl:last-child::after{ display: none;}

.service_about{
  display: table;
  width: 100%;
  margin: 30px 0;
  border: 3px solid #FF9466;
}

.service_about h4{
  display: table-cell;
  width: 30%;
  padding: 0;
  background-color: #FF9466;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
}

.service_about p{
  display: table-cell;
  width: 70%;
  padding: 20px;
  vertical-align: middle;
}


/**************************************************
 access
**************************************************/
.map{
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
  -webkit-box-align: center;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: center;/*--- IE10 ---*/
  -webkit-align-items: center;/*--- safari（PC）用 ---*/
  align-items: center;
  flex-wrap: wrap;
}

.map dl{ padding: 20px;}
.map dl dt{
  padding: 0 0 15px 0;
  font-weight: bold;
}


/**************************************************
 fee
**************************************************/
.fee{
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
  -webkit-box-align: center;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: center;/*--- IE10 ---*/
  -webkit-align-items: center;/*--- safari（PC）用 ---*/
  align-items: center;
  flex-wrap: wrap;
}

.fee dl{
  width: 49%;
  margin: 0.5%;
  padding: 15px;
  background: #EAF2F5;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;/*--- IE10 ---*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  -webkit-box-align: center;/*--- Androidブラウザ用 ---*/
  -ms-flex-align: center;/*--- IE10 ---*/
  -webkit-align-items: center;/*--- safari（PC）用 ---*/
  align-items: center;
  flex-wrap: wrap;
}

.campaign{
  padding: 30px 15px;
  background: #EFEFEF;
  text-align: center;
}


/**************************************************
 page_top
**************************************************/
#page_top{
  position: fixed;
  width: 120px;
  margin: 0;
  z-index: 100;
  right: 10px;
  bottom: -40px;
  cursor: pointer;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
}

#page_top:hover{
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
}


/**************************************************
 footer
**************************************************/
footer{
  padding: 15px;
  background: linear-gradient(90deg, #E4B6CB, #5B9ED2);
}

footer p{
  text-align: center;
  color: #FFFFFF;
  font-family: Verdana, "Droid Sans", "FP-ヒラギノUD角ゴ StdN W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



/**************************************************
 Responsive
**************************************************/

@media screen and (max-width: 640px){

  .btn{ padding: 15px 0;}

  .btn a{
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: 15px;
  }

  .web_btn {
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: 15px;
    padding-right: 20px;
  }

  .tel_btn {
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: 15px;
    padding-right: 20px;
  }

  .user_voice dl{ margin: 15px;}
  .user_voice dl dd{
    width: 100%;
    padding: 20px;
  }

  /* <br>タグを非表示にする */
  .br {
    display: none;
  }


  /** title ********************/
  h2{
    margin: 10px 0;
    padding: 20px 0;
    font-size: 20px;
    font-size: 2.0rem;
  }
  h2::after{
    width: 40%;
    left: 30%;
  }

  section h2{ padding: 20px 0;}

  section h2 eng{
    font-size: 40px;
    font-size: 4.0rem;
  }

  h3{
    padding: 20px 0 10px;
    font-size: 18px;
    font-size: 1.8rem;
  }

  h4{
    padding: 30px 0 10px;
    font-size: 17px;
    font-size: 1.7rem;
    line-height: 1.4;
  }

  .pu{
    margin: 15px 0;
    font-size: 17px;
    font-size: 1.7rem;
  }

  p,ul,ol,table,dl{
    padding: 10px 0;
    font-size: 15px;
    font-size: 1.5rem;
  }

  .alignleft, .alignright, .aligncenter, .alignnone{
    margin: 10px 0;
  }

  /** header ********************/
  header h1{ width: 52%;}
  .hd_info{
    width: 40%;
  }
  .hd_info p{
    padding: 0;
    font-size: 13px;
    font-size: 1.3rem;
  }
  .hd_info .btn{
    font-size: 13px;
    font-size: 1.3rem;
  }
  .hd_info .btn a{
    width: 100%;
    padding: 5px 5px 5px 20px;
    background-position: left 12px center;
  }

  /** visual ********************/
  /* #main_visual{
   background: linear-gradient(90deg, #E4B6CB, #5B9ED2);
  } */
  .visual_image img{ display: none;}
  .visual_image img.no_pc{ display: block;}

  .visual_text{
    position: inherit;
    margin: -50px 0 0 0;
    -webkit-transform: inherit;
    transform: inherit;
    left: inherit;
  }

  .visual_text.showUp {
    opacity: 1;
  }

  .visual_text img {
    width: 100%;
  }

  /** reason ********************/
  .reason ul li{
    width: 100%;
    height: auto;
    margin: 5px 15px;
    padding: 10px;
    border-radius: 10px;
  }

  /** machine ********************/
  .machine .inner{
    margin: 0;
    padding: 15px;
  }
  .machine_pickup { margin: 0 30px;}

  /** howto ********************/
  .howto{ padding-bottom: 0;}
  .howto dl{ width: 100%;}
  .howto dl:nth-child(odd){ margin: 0;}

  .machine_list{
    margin: 15px;
    padding: 10px;
  }

  /** stepup ********************/
  .stepup dl{
    width: 100%;
    margin: 0 0 20px 0;
  }
  .stepup dl::after{
    top: 100%;
    left: 50%;
    margin-top: 0;
    margin-left: -15px;
    border-left: 0;
    border: 15px solid transparent;
    border-top: 15px solid #FF9466;
  }

  .service_about h4,
  .service_about p{
    display: block;
    width: 100%;
    padding: 10px;
  }

  /** fee ********************/
  .fee dl{ width: 100%;}

  /** page_top ********************/
  #page_top{ width: 80px;}

  footer p{
    font-size: 10px;
    font-size: 1.0rem;
  }

}