@charset "utf-8";
/* CSS Document */


/* =================================================================================

   3つのこだわり共通
 
=================================================================================== */
#future .futureIcon {
	width: 9%;
	position: relative;
	display:block;
	margin:auto;
	}

#future h2 {
	position: relative;
	font-size:1.750em;
	font-weight: 700;
	text-align:center;
	line-height: 1.3;
	margin: 0;
	}

#future h2 span {
	font-size: 60%;
	font-weight:normal;
	}

#future .deco1, #future .deco2, #future .deco3 {
	position:relative;
	}

#future .deco1:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/deco_wellness.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 15%;
    height: 40%;
    top: 15%;
	left:0;
    right: 0;
	margin:auto;
	}

#future .deco2:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/deco_safety.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 15%;
    height: 40%;
    top: 15%;
	left:0;
    right: 0;
	margin:auto;
	}

#future .deco3:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/deco_unique.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 15%;
    height: 40%;
    top: 15%;
	left:0;
    right: 0;
	margin:auto;
	}

/* ----------------- future ------------------*/
.future {
	width:100%;
	}

.futureInner {
	max-width:1000px;
	width:100%;
	padding: 4.5% 0;
	margin:0 auto;
	}

/* 背景 */
.wellnessBg {
	background: url(/contract/images/wellness_catch-bg-pc.jpg) no-repeat;
	background-size:100%;
	}
.safetyBg {
	background: url(/contract/images/safety_catch-bg-pc.jpg) no-repeat;
	background-size:100%;
	}
.uniqueBg {
	background: url(/contract/images/unique_catch-bg-pc.jpg) no-repeat;
	background-size:100%;
	}

.future .futureInner h3 {
	position:relative;
	font-size:1.625em;
	text-align:center;
	color:#009844;
	}

.future .futureInner h3:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30%;
    width: 40px;
    height: 1px;
    margin: 0 auto;
    background-color: #009844;
    vertical-align: middle;
	}

.future .futureInner .wellnessPoint {
	font-size:1.375em;
	font-weight:bold;
	text-align:center;
	padding: 2.5% 0;
	}

.future .futureInner ul {
	width: 90%;
	display: block;
	text-align: center;
    margin: auto;
	}

.future .futureInner ul li {
	width:25%;
	display: inline-block;
	padding: 0 3.5%;
	}
	
.future .futureInner .futureTxt {
	text-align:center;
	padding: 2.5% 0 0;
	}


/* ----------------- futureh3 ------------------*/
.futureh3 .deco {
	width:8%;
	display:block;
	margin:0 auto 1.5%;
	}
	
.futureh3 h3 {
	font-size:1.625em;
	text-align:center;
	color:#009844;
	}

.futureh3 p {
	text-align:center;
	}
	
/* ----------------- futureBtn ------------------*/
.futureBtn ul {
	width:100%;
	display:block;
	overflow:hidden;
	}

.futureBtn ul li {
	width:33.3%;
	float:left;
	text-align:center;
	overflow:hidden;
	}

.futureBtn ul li a {
	display: block;
    background: url(/contract/images/arrow_white-big.png) no-repeat;
    background-size: 3%;
    background-position: 50% 80%;
    color: #fff;
    padding: 10% 0 15%;
	}

.futureBtn ul li a:hover {
	color:#fff;
	background-color:rgba(255,255,255,0.3);
	}



/* ボタン背景 */
.futureBtn .wellnessBtn {
	background: url(/contract/images/future_btn-bg1.jpg) no-repeat;
	background-size:100%;
	background-position: center;
	-webkit-transition: .4s;
	transition:.4s;
	}
.futureBtn .wellnessBtn:hover {
	background-size:108%;
  	@include transform(rotate(10deg));
	}
	
.futureBtn .safetyBtn {
	background: url(/contract/images/future_btn-bg2.jpg) no-repeat;
	background-size:100%;
	background-position: center;
	-webkit-transition: .4s;
	transition:.4s;
	}
.futureBtn .safetyBtn:hover {
	background-size:108%;
  	@include transform(rotate(10deg));
	}
		
.futureBtn .uniqueBtn {
	background: url(/contract/images/future_btn-bg3.jpg) no-repeat;
	background-size:100%;
	background-position: center;
	-webkit-transition: .4s;
	transition:.4s;
	}
.futureBtn .uniqueBtn:hover {
	background-size:108%;
  	@include transform(rotate(10deg));
	}


.futureBtn ul li .futureBtnIcon {
	width:20%;
	display: block;
    margin: 0 auto 1%;
	}

.futureBtn ul li .futureBtnTit {
	font-size:1.688em;
	font-weight:bold;
	}


@media only screen and (max-width: 768px) {
/* ボタン背景 */
.futureBtn .wellnessBtn:hover {
	background-size:100%;
  	@include transform(rotate(10deg));
	}
.futureBtn .safetyBtn:hover {
	background-size:100%;
  	@include transform(rotate(10deg));
	}
.futureBtn .uniqueBtn:hover {
	background-size:100%;
  	@include transform(rotate(10deg));
	}
}


@media only screen and (max-width: 480px) {
#future .futureIcon {
    width: 21%;
	}
	
#future .deco1:before {
    width: 33%;
    height: 50%;
    top: 15%;
	}

#future .deco2:before {
    width: 33%;
    height: 50%;
    top: 15%;
	}

#future .deco3:before {
    width: 33%;
    height: 50%;
    top: 15%;
	}

/* ----------------- future ------------------*/
.futureInner {
	width:90%;
	padding: 8% 0;
	}

/* 背景 */
.wellnessBg {
	background: url(/contract/images/wellness_catch-bg-sp.jpg) no-repeat center;
	background-size: cover;
	}
.safetyBg {
	background: url(/contract/images/safety_catch-bg-sp.jpg) no-repeat center;
	background-size: cover;
	}
.uniqueBg {
	background: url(/contract/images/unique_catch-bg-sp.jpg) no-repeat center;
	background-size: cover;
	}

.future .futureInner h3 {
    font-size: 1.43em;
	}

.future .futureInner .wellnessPoint {
	font-size:1.250em;
    line-height: 1.6em;
	padding: 10% 0 2.5%;
}

.future .futureInner ul {
    width: 100%;
	}

.future .futureInner ul li {
    width: 32%;
    padding: 0 1% 0 0;
	}

.future .futureInner ul li:last-child {
    padding: 0;
	}

.future .futureInner .futureTxt {
	text-align:left;
	padding: 10% 0 0;
	}


/* ----------------- futureh3 ------------------*/
.futureh3 .deco {
    width: 20%;
	margin: 0 auto 2%;
	}

.futureh3 h3 {
	font-size:1.43em;
    margin: 0 0 2.5%;
	}

.futureh3 p {
    text-align: left;
	}
	

/* ----------------- futureBtn ------------------*/
.futureBtn ul li {
	width:100%;
	float: none;
	}

.futureBtn ul li a {
	display: block;
    background: url(/contract/images/arrow_white-big.png) no-repeat;
    background-size: 3%;
    background-position: 50% 80%;
    color: #fff;
    padding: 10% 0 15%;
	}

.futureBtn ul li a:hover {
	color:#fff;
	background-color:rgba(255,255,255,1);
	}

}


@media only screen and (max-width: 375px) {
.future .futureInner h3 {
	letter-spacing:.01em;
	}
}


@media only screen and (max-width: 320px) {
.future .futureInner h3:after {
    bottom: -20%;
	}

.future .futureInner .wellnessPoint {
    font-size: 1.3em;
	}
	
.future .futureInner ul li {
	width: 31%;
    padding: 0 .6%;
	}
}



/* =================================================================================

  wellness
 
=================================================================================== */
/* ----------------- wellness ------------------*/
.wellnessTxt {
	text-align:center;
	font-size:1.063em;
	}
	
/* .wellness ul li */
.wellness ul {
	position:relative;
	display:block;
	text-align:center;
	margin: 8% auto 0;
	}

/*.wellness ul:before {
	content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10%;
    width: 40px;
    height: 1px;
    margin: 0 auto;
    background-color: #009844;
    vertical-align: middle;
	}*/

.wellness ul li {
	width:23.5%;
	display: inline-block;
	vertical-align: top;
	padding: 0 1%;
	}

.wellness ul li .wellnessElement {
	border: 1px solid #fce6cc;
	padding:6%;
	}

.wellness ul li .wellnessElement h4 {
	width: 100%;
	background:#EE8100;
	font-size:1.438em;
	color:#fff;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding:1.8% 0;
	margin: -17% auto 0;
	}

.wellness ul li .wellnessElement .equal {
	width: 8%;
    padding: 5% 0;
    display: block;
    margin: auto;
	}

.wellness ul li .wellnessElement .subTit {
    font-size: 1.438em;
    font-weight: bold;
	}

.wellness ul li .wellnessElement .subTit span {
	background:url(/contract/images/txtline.png) repeat-x;
	background-position:bottom;
	}
	
.wellness ul li .wellnessElement .illust {
	width: 60%;
    display: block;
    margin: 7% auto;
	}

.wellness ul li .wellnessElement .txt {
	text-align:left;
	}

.wellness ul li .development {
	position:relative;
    font-weight: bold;
	padding: 15% 0 7%;
	}

.wellness ul li .development:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/wellness_arrow.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 20%;
    height: 60%;
    top: 15%;
	left:0;
    right: 0;
	z-index: -1;
	margin:auto;
	}

.wellness ul li .menuName {
	font-size: 1.063em;
    line-height: 1.5em;
    padding: 5% 0 0;
	}

.wellness .icon1, .wellness .icon2 {
	position:relative
	}
	
.wellness .icon1:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/wellness_icon1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
	width: 32%;
    height: 15%;
    top: -7%;
    left: -3%;
	}

.wellness .icon2:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/wellness_icon2.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
	width: 32%;
    height: 15%;
    top: -7%;
    left: -3%;
	}


/* ----------------- efforts ------------------*/
.efforts h3 {
	background:url(/contract/images/wellness_deco2.png) no-repeat;
	background-position: center -5%;
	background-size:7% auto;
	font-size: 1.563em;
	text-align:center;
	padding: 1% 0 0;
	}

.efforts h4 {
	font-size:1.250em;
	text-align:center;
	color:#009844;
	margin: 0 auto 1%;
	}

.efforts .effortsTxt {
	text-align:center;
	}

/* graph */
.efforts .graph {
	display:block;
	text-align: center;
	padding:2% 0 0;
	margin:auto;
	}

/* team */
.teamElement {
	margin:2% auto 0;
	}
	
.teamElement .teamElementL {
	width:45%;
	float:left;
	}

.teamElement .teamElementR {
	width:45%;
	float: right;
	}

.teamElement h5 {
	background:url(/contract/images/future_serifl.png) no-repeat, url(/contract/images/future_serifr.png) no-repeat;
	background-position: 20% 50%, 80% 50%;
	background-size: auto 85%;
	font-size:1.125em;
	text-align:center;
	margin: 0 0 2.5%;
	}

.teamElement h5 span {
	background:url(/contract/images/txtline.png) repeat-x;
	background-position: bottom;
	}


.teamElement p {
	text-align:center;
	padding:2% 0 0;
	}


@media only screen and (max-width: 1024px) {
/* ----------------- wellness ------------------*/
.wellness ul li {
    padding:0;
	}
}


@media only screen and (max-width: 768px) {
.efforts .graph {
	width: 75%;
	}
}
	
	
@media only screen and (max-width: 480px) {
/* ----------------- wellness ------------------*/
.wellness ul {
    margin: 18% auto 0;
	}

.wellness ul:before {
    bottom: 0.5%;
}

.wellness ul li {
    width: 100%;
	}

.wellness ul li .wellnessElement h4 {
    font-size: 1.4em;
    padding: 1.6% 0;
    margin: -13% auto 0;
	}
.wellness ul li .wellnessElement .equal {
    width: 5%;
	}

.wellness ul li .wellnessElement .subTit {
    text-align: center;
	}

.wellness ul li .wellnessElement .illust {
    width: 50%;
}

.wellness ul li .development {
	font-size: 105%;
    text-align: center;
	padding: 10% 0 5%;
	}

.wellness ul li .development:before {
    width: 13%;
    height: 55%;
    top: 20%;
	}

.wellness ul li .menuName {
    text-align: center;
    padding: 4% 0 18%;
	}
	
.wellness ul li .menuName-p {
	padding: 4% 0 0;
	}

.wellness .icon1:before, .wellness .icon2:before {
    width: 22%;
    height: 15%;
    top: -7%;
    left: -2%;
}
	
/* ----------------- efforts ------------------*/
.efforts {
    margin: 0;
}
	
.efforts .graph {
	width:100%;
    padding: 4% 0 0;
	}

.efforts h3 {
    background-size: 17% auto;
    font-size: 1.438em;
    padding: 2% 0;
    margin: 0 0 2.5%;
}

.efforts h4 {
    margin: 0 auto 3%;
}

.efforts .effortsTxt {
	text-align: left;
	}


/* ----------------- team ------------------*/
.team h3 {
    background-position: center -4%;
    background-size: 18% auto;
    font-size: 1.43em;
    text-align: left;
    padding: 2% 0 0;
	}

.teamElement {
    margin: 5% auto 0;
}

.teamElement .teamElementL {
	width:100%;
	float:none;
	margin: 0 auto 8%;
	}

.teamElement .teamElementR {
	width:100%;
	float:none;
	}

.teamElement h5 {
    background-size: auto 75%;
	font-size: 1.375em;
	}

.teamElement p {
	text-align:left;
	}
}


@media only screen and (max-width: 480px) {
.wellness .icon1:before, .wellness .icon2:before {
    width: 22%;
    height: 15%;
    top: -6%;
    left: -2%;
	}
}


/* =================================================================================

  safety
 
=================================================================================== */
.safety ul {
	width:100%;
	position:relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 5% auto;
	}

.safety ul li {
	width: 49.5%;
    display: flex;/* 画像始まりの高さ合わせるため */
    flex-direction: column;/* 画像始まりの高さ合わせるため */
    padding: 0 3%;
	margin:0 auto 5%;
	}
	
.safety ul li .number {
	width:18%;
	display: block;
	margin: 0 auto 2.5%;
	}
	
.safety ul li h4 {
	font-size:1.688em;
	text-align:center;
	color:#46c9ff;
	margin: 0 0 2%;
	}

.safety ul li .txt {
	text-align:left;
	margin: 0 0 20px;
	flex-grow: 1;/* 画像始まりの高さ合わせるため */
	}

.safety .iso9001 {
	background:#dcf5ff;
	text-align:center;
	padding:4%;
	margin:4% 0 0;
	}

.safety .iso9001 p {
	padding:0 0 1.8%;
	}

@media only screen and (max-width: 480px) {
.safety ul li {
	width: 100%;
	display:block;
    padding: 0;
	margin:0 auto 15%;
	}

.safety ul li .txt {
	margin: 0 0 4%;
	}

.safety .iso9001 p {
    padding: 0 0 2.2%;
    text-align: center;
	}	
}



/*250804 横幅100%BOX　追加*/
.safety ul li.bigBox img{
    max-width: 100%;
    }

.safety ul li.bigBox {
	width: 100%;
	}

.safety ul li.bigBox .number {
    width: 8.4%;
	margin: 0 auto 1.5%;
    }

.safety ul li.bigBox .txt {
    text-align: center;
    }

.safety ul li.bigBox .imgBox {
	justify-content: space-between;
	align-items: stretch;
	}

.safety li.bigBox .iso9001 {
	height: auto;
    padding: 5% 3% 3%;
    }

.safety li.bigBox .iso9001 .contentsBox {
	
    }

.safety li.bigBox .iso9001 p {
	font-size: 0.8em;
    }

.safety li.bigBox .iso9001 img {
    max-width: 70%;
	height: auto;
    }


@media only screen and (max-width: 867px) {
.safety li.bigBox .iso9001 img {
    max-width: 60%
    }
}


@media only screen and (max-width: 768px) {
/*.safety li.bigBox .iso9001 p {
    padding: 0 0 1em;
    }

.safety li.bigBox .iso9001 img {
    max-width: 60%;
	height: auto;
    }
	
	
.safety li.bigBox .iso9001 img {
    max-width: 85%
    }
	
.safety li.bigBox .iso9001 {
    margin: 0 0 0 10px;
    }*/
}

@media only screen and (max-width: 600px) {
/*.safety li.bigBox .iso9001 img {
    max-width: 65%
    }
	
.safety li.bigBox .iso9001 {
    margin: 0 0 0 10px;
    }*/
}

@media only screen and (max-width: 480px) {
.safety ul li.bigBox img {
    max-width: 100%;
}
	
.safety ul li.bigBox .number {
    width: 18%;
    display: block;
    margin: 0 auto 2.5%;
}
	
.safety ul li.bigBox .txt {
    text-align: left;
}
	
.safety ul li.bigBox .imgBox {
	display: block;
    }	

/*.safety li.bigBox .iso9001 {
	margin:4% 0 0;
	padding: 4% 4% 7%;
	}
	
.safety li.bigBox .iso9001 p {
    padding: 0 0 2.2%;
    }
	
.safety li.bigBox .iso9001 img {
     max-width: 43%;
    }*/
	
}



/* =================================================================================

  unique
 
=================================================================================== */
.unique {
	margin: 0 auto 8%;
	}

.unique .uniqueNumber {
	background:url(/contract/images/unique_deco1.png) no-repeat;
	background-size:7.7% auto;
	background-position:center;
	font-family: 'Roboto Slab', serif;
    font-size: 2.250em;
    font-weight: normal;
	letter-spacing: .1em;
	text-align:center;
	color:#009844;
	padding: 0 0 1%;
	}

.unique h3 {
	font-size:1.750em;
	text-align:center;
	margin:0 auto 1.7%;
	}

.unique h3 span {
	background:url(/contract/images/txtline2.png) repeat-x;
	background-position: bottom;
	}

.unique .uniqueTxt {
	text-align:center;
	margin:0 auto 3%;
	}


/* ----------------- slider ------------------*/
.unique .slider {
	border: 1px solid #CBCBCB;
	margin:auto;
	}

.slider-container {
  position: relative;
  max-width:565px;
	width:100%;
	margin:0 auto;
}


@media only screen and (max-width: 480px) {
.unique {
	margin: 0 auto 20%;
	}
	
.unique .uniqueNumber {
	background-size:21% auto;
	padding: 0 0 2.5%;
	}

.unique h3 {
	font-size:1.563em;
	margin:0 auto 4%;
	}

.unique .uniqueTxt {
	text-align: left;
	margin:0 auto 3%;
	}
}



/* =================================================================================

  スクロールイベント
 
=================================================================================== */
.scrImg {
	bottom: -60px;
	margin: 0 auto;
	display: none;
	position: relative;
}