@charset "utf-8";
/* CSS Document */
@import "reset.css";
@import "base_min.css";
/*******************
 LP style
********************/
html {
  min-width: 1100px;
  margin: 0 auto;
  background-color: #fff;
}
.hover {
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
.hover:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
}
img {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
img.img-t {
  vertical-align: top;
}
/* ovf-** 横幅の大きい画像を設定した最小幅でトリミング */
.ovf-area{
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 1100px;
}
.ovf-box {
  display: block;
  margin: auto;
  text-align: center;
  width: 100%;
}
.ovf-item {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1700px;
  margin-left: -850px;
}
.ovf-box-s .ovf-item {
  width: 1400px;
  margin-left: -700px;
}
/*------------------------------------------*/
#fv {
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 1100px;
  height: 1090px;
}
#fv .fv-img {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1700px;
  margin-left: -850px;
  z-index: 5;
}

/*---------------------------------------*/
.cta {
  position: relative;
  z-index: 10;
  width: 100%;
	padding: 40px 0 70px;
	background-color: #fbfaf7;
	text-align: center;
}
.cta .cta-box {
  position: relative;
	width: 1100px;
	margin: 0 auto;
}
.cta .cta-box .cta-btn {
  position: absolute;
  bottom: 580px;
	left: 70px;
}
.cta .cta-cb {
	margin-top: 44px;
}
.button{
	position: absolute; 
	top: 515px;
	left: 67px;
}
.button:hover{
	opacity: 0.5;
	filter: alpha(opacity=50); 
}

.button2{
	position: relative; 
	width:100%;
	/*height:500px;*/
}

.button3{
	width:912px;
	height:251px; 
	margin-left:auto;
	margin-right:auto;
}
.button3:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);
}


#fv + .cta {
  margin-top: 0;
}

.condition {
	margin-top: -100px;
	position: relative;
	z-index: 5;
}
.busy .busy-bg {
	background-color: #d8e6eb;
}
.cause {
	background-color: #dcf4f7;
}
.dev {
	width: 100%;
	margin-bottom: 50px;
}
.dev .dev-bg {
	background: url(../img/develop_bg.png) top left repeat-x;
}
.only {
	margin-bottom: 90px;
}
.ingr {
	background-color: #ecf9ff;
	position: relative;
	width: 100%;
}
.ingr:after {
	content: "";
	width: 100%;
	height: 88px;
	background: #fff;
	display: block;
	position: absolute;
	bottom: 0;
	z-index: 4;
}
.ingr .ingr-wrapper {
	position: relative;
	z-index: 5;
}
.skin {
	margin-bottom: -40px;
}
.voice {
	margin: 100px 0 130px;
}
.reason {
	background: url(../img/reason_bg.png) top left repeat-x;
	width: 100%;
}
.reason-non {
	margin-bottom: 126px;
}
.short {
	margin-top: 44px;
}
.voice2 {
	margin-bottom: 80px;
}
.more {
	position: relative;
	top: 0;
	left: 0;
  height: 900px;
	width: 100%;
	min-width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}
.more .more-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 5;
}
.more:before {
	content: "";
	position: absolute;
	top: 0;
	left: -275px;
	height: 800px;
	margin-bottom: 100px;
	background: url(../img/more_bg.png) bottom center no-repeat;
	background-size: cover;
  width: -webkit-calc(550px + 100%);
  width: -o-calc(550px + 100%);
  width: calc(550px + 100%);
	border-radius: 0 0 100% 100%;
	z-index: 4;
}
.more-point {
	margin-bottom: 60px;
}
.faq {
  margin: 100px auto 0;
	background-color: #f7feff;
  position: relative;
  padding-bottom: 20px;
}
.faq-btn {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}
.faq-tel {
	position: absolute;
	bottom: 316px;
	left: 166px;
}
.faq-mail {
	position: absolute;
	bottom: 140px;
	left: 166px;
}
.faq-line {
	position: absolute;
	bottom: 140px;
	left: 570px;
}
.message {
	margin: 130px 0 140px;
}
.all {
	background-color: #fdfdfd;
}
/*---------------------------------------*/


/* ボタンがinput[type="submit"]タグの場合 */
/*
.cta-btn-img {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/btn.png) no-repeat top left;
  width: 962px;
  height: 132px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  text-indent: -9999px;
  display: block;
  cursor: pointer;
}
*/



/*-------------------------------------------
 footer
-----------------------------------------------*/
footer {
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  padding: 1px 0;
  margin:  110px auto 0;
}

footer .info {
	margin-top: 94px;
	width: 100%;
}
footer .info-ttl {
  width: 100%;
  border-top: 3px solid #392c23;
  border-bottom: 3px solid #392c23;
  padding: 22px 0;
  margin: 0 auto 60px;
}
footer .guide-ttl {
  width: 100%;
  border-top: 3px solid #392c23;
  border-bottom: 3px solid #392c23;
  padding: 22px 0;
  margin: 0 auto 60px;
}
footer .guide-box {
  width: 1100px;
  margin: 0 auto;
}
footer .guide-box .fl-r {
	width: 530px;
	float: right;
}
footer .guide-box .fl-l {
	width: 530px;
	float: left;
}
footer .guide-box dl {
  width: 530px;
  padding: 0 0 40px;
  box-sizing: border-box;
  float: left;
}
footer dl dd {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
}

footer dl dd.box-nopd {
  padding: 20px 0;
}

footer dl p {
  color: #392c23;
  font-size: 16px;
}
footer dl p + p {
  margin-top: 15px;
}
footer .ssttl {
  font-weight: bold;
  font-size: 18px;
  display: block;
}
footer .fs-s {
  font-size: 14px;
}
footer .guide-box  .guide-l {
  clear: both;
  width: 1100px;
  float: none;
  margin: 0 auto;
  padding: 0;
}
footer .guide-l a {
  display: block;
  margin: 20px auto;
  text-align: center;
  width: 920px;
  padding-left: 3px;
}
footer .guide-l a img {
  display: inline-block;
}
.footer-link {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 2em;
  width: 100%;
}
.footer-link li {
  display: inline-block;
  padding-left: .6em;
}
.footer-link li:before {
  content: "▶";
  display: inline-block;
  padding-left: .2em;
  padding-right: .2em;
  vertical-align: middle;
}
.footer-link li a {
  color: #4a392e;
}
#copy {
  text-align: center;
  width: 100%;
  background-color: #28a5b4;
  color: #fff;
  padding: .8em 0;
  font-size: .8rem;
}