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

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

   forte
 
=================================================================================== */
.forte {
	margin: 190px auto 0;
	}
	
.forte .forteInner {
	max-width:1250px;
	width:100%;
	position:relative;
	margin:0 auto;
	}

.forte .forteInner .forteInnerL {
	width:50%;
	float:left;
	position: relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
	}

.forte .forteInner .forteInnerR {
	width:50%;
	float: right;
	position: relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
	}

.forte .forteInner .forteElement {
	padding: 0 8%;
	}

.forte .forteElement .forteNumber {
	font-family: 'Josefin Slab', serif;
	font-size:1.313em;
	font-weight:bold;
	color:#EE8100;
	margin: 0 0 1%;
	}

.forte .forteElement .forteNumber span {
	font-family: 'Roboto Slab', serif;
	font-size:1.875em;
	font-weight:normal;
	}

.forte .forteElement h3 {
	font-size: 1.563em;
	color:#009844;
	margin: 0 0 2%;
	}

.forte .forteElement .flow {
	width:82%;
	margin:3% 0 0;
	}


/*------------- forteBnr -------------*/
.forteBnr {
	max-width:1000px;
	position: relative;
    top: -100px;
	margin:0 auto;
	}

.forteBnr ul li {
	width:100%;
	position:relative;
	margin: 0 0 6%;
	}

.forteBnr ul li:last-child {
	margin: 0;
	}

.forteBnr ul li a {
	display:block;
    padding: 6% 0 10%;
	}

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

.forteBnr .dnyBg {
	background: url(/contract/images/forte_btn-dny-pc.jpg) no-repeat;
	background-size:100%;
	background-position: center;
	-webkit-transition: .4s;
	transition:.4s;
	position:relative;
	}

.forteBnr .sevenBg {
	background: url(/contract/images/forte_btn-7ej-pc.jpg) no-repeat;
	background-size:100%;
	background-position: center;
	-webkit-transition: .4s;
	transition:.4s;
	position:relative;
	}

.forteBnr .dnyBg:hover, .forteBnr .sevenBg:hover {
	background-size:105%;
  	@include transform(rotate(8deg));
	}

.forteBnr .dnyBg:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/deco_dny.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 12%;
    height: 50%;
    top: -25px;
	left:0;
    right: 0;
	margin:auto;
	}

.forteBnr .sevenBg:before {
	content: "";
    position: absolute;
    display: block;
    background-image: url(/contract/images/deco_7ej.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 9.5%;
    height: 50%;
    top: -30px;
	left:0;
    right: 0;
	margin:auto;
	}

.forteBnr ul li .bnrTxt {
	font-size:1.813em;
	font-weight:bold;
	text-align:center;
	}

.forteBnr ul li .forteBnrLink {
	position:absolute;
	left:0;
	right:0;
	bottom:10%;
	margin:auto;
	}

.forteBnr ul li .forteBnrLink a {
	width:30%;
	display:block;
	background:url(/contract/images/arrow_green.png) no-repeat;
	background-color:rgba(255, 255, 255, 0.8);
	background-position:95% 50%;
	background-size:6px auto;
	border:1px solid #009844;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	text-align:center;
	color:#009844;
	padding: .7%;
	margin: auto;
	}

.forteBnr ul li .forteBnrLink a:hover {
	background:url(/contract/images/arrow_white.png) no-repeat;
	background-color: #009844;
	background-position:97% 50%;
	background-size:6px auto;
	border:1px solid #009844;
	color:#fff;
	}

.fotrem { margin: 16% auto 0;}

@media only screen and (max-width: 1024px) {
.forte {
	margin: 14% auto 0;
	}
	
.forteBnr {
	width:90%;
	}
}


@media only screen and (max-width: 768px) {
.forte {
    margin: 15% auto 0;
	}
	
.forteBnr {
    top: -80px;
}

.forteBnr ul li a:hover {
	background-color:rgba(255,255,255,0);
	}

.forteBnr .dnyBg:hover, .forteBnr .sevenBg:hover {
	background-size:100%;
  	@include transform(rotate(8deg));
	}

.fotrem { margin: 20% auto 0 !important;}

.forteBnr .dnyBg:before {
    width: 12%;
    height: 50%;
    top: -18px;
	}

.forteBnr .sevenBg:before {
    width: 9.5%;
    height: 50%;
    top: -24px;
	}
}


@media only screen and (max-width: 480px) {
.forte {
	margin:-5% auto 0;
	}
	
.forte .forteInner {
	width:90%;
	margin:0 auto 13%;
	}
	
.forte .forteInner .forteInnerL {
	width:100%;
	float: none;
	top: inherit;
	-webkit-transform: none;
	transform: none;
	}

.forte .forteInner .forteInnerR {
	width:100%;
	float: none;
	top: inherit;
	-webkit-transform: none;
	transform: none;
	z-index: 1;
	}

.forte .forteInner .forteElement {
	padding:0;
	}

.forte .forteElement .forteNumber {
	font-size:1.313em;
	text-align:center;
	margin: 0 0 1%;
	}

.forte .forteElement .forteNumber span {
	font-size:1.875em;
	}

.forte .forteElement h3 {
	font-size:1.375em;
	text-align:center;
	margin: 0 0 2%;
	}

.forte .forteElement .forteTxt {
	margin: 0 0 3%;
	}

.forte .forteElement .flow {
	width:100%;
	margin:3% 0 4%;
	}


/*------------- forteBnr -------------*/
	
.forteBnr {
	top: 0;
	margin: 0 auto 15%;
	}
	
.forteBnr ul li {
    width: 100%;
    position: relative;
    margin: 0 0 15%;
}

.forteBnr ul li .bnrTxt {
	font-size:1.438em;
	line-height: 1.5em;
	margin: 0 0 3%;
	}

.forteBnr ul li a {
    padding: 11% 0 17%;
	}
	
.forteBnr .dnyBg {
	background: url(/contract/images/forte_btn-dny-sp.jpg) no-repeat;
	background-size: cover;
	}

.forteBnr .sevenBg {
	background: url(/contract/images/forte_btn-7ej-sp.jpg) no-repeat;
	background-size: cover;
	}
	
.forteBnr ul li .forteBnrLink a {
    width: 80%;
    padding: 2%;
	}

.forteBnr ul li .forteBnrLink a:hover {
    background:url(/contract/images/arrow_white.png) no-repeat;
	background-color:rgba(255, 255, 255, 0.8);
	background-position:95% 50%;
	background-size:6px auto;
	border:1px solid #009844;
	color:#009844;
	}

.fotrem { margin: 20% auto 15% !important;}

.forteBnr .dnyBg:before {
    width: 27%;
    height: 50%;
    top: -18px;
	}

.forteBnr .sevenBg:before {
    width: 19%;
    height: 35%;
    top: -26px;
	}

}


@media only screen and (max-width: 320px) {
.forte .forteElement h3 {
    font-size: 1.438em;
	}

.forteBnr ul li a {
    padding: 12% 0 20%;
	}

.forteBnr ul li .bnrTxt {
	font-size:1.4em;
	line-height: 1.4em;
	}

/*.forteBnr ul li .sevenBnrLogo {
    margin: 0 auto -30px;
	}*/
}



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

   パララックス背景
 
=================================================================================== */
/*.parallax {
	max-width:1250px;
	width:100%;
	margin:auto;
	}
	
.bg1 {
	z-index: -1;
	position: fixed;
	top: 0;
	width: 100%;
	}
 
.bg1-1 {
	position: absolute;
	top: 600px;
	right: -100px;
	width:42%;
	}

.bg1-2 {
	position: absolute;
	top: 880px;
	left: -50px;
	width:20%;
	}

.bg1-3 {
	position: absolute;
	top: 1000px;
	left: 460px;
	width:16%;
	}

.bg1-4 {
	position: absolute;
	top: 1300px;
	right: -50px;
	width:35%;
	}*/


/*@media only screen and (max-width: 1024px) {
.bg1-1 {
	top: 550px;
	right: -100px;
	width:42%;
	}

.bg1-2 {
	top: 830px;
	left: -50px;
	width:20%;
	}

.bg1-3 {
	top: 970px;
	left: 410px;
	width:16%;
	}

.bg1-4 {
	top: 1100px;
	right: -50px;
	width:35%;
	}
}
*/



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

   フェイドイン背景
 
=================================================================================== */
.bg1-1 {
	width:42%;
	position: absolute;
	top: -300px;
	right: -100px;
	}

.bg1-2 {
	width:20%;
	position: absolute;
	top: -300px;
	left: -50px;
	}

.bg1-3 {
	width:16%;
	position: absolute;
	top: -20px;
	left: 460px;
	}

.bg1-4 {
	width:35%;
	position: absolute;
	top: -240px;
	right: -50px;
	}


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

   forteSub　下層（デニーズ、セブンイレブン）
 
=================================================================================== */
.dnyLogo {
	width:10%;
	display:block;
	text-align:center;
	margin: 0 auto 1.8%;
	}

.sevenLogo {
	width:8%;
	display:block;
	text-align:center;
	margin: 0 auto 1.8%;
	}

.forteh2 {
	font-size:1.625em;
	text-align:center;
	color:#009844;
	}

.forteCommon {
	text-align:center;
	margin:0 auto 4%;
	}


/*------------- forteSub -------------*/
.forteSub {
	max-width:1000px;
	width:100%;
	margin:0 auto 5%;
	}

.forteSub .forteSubL {
	width:44.3%;
	float:left;
	}

.forteSub .forteSubR {
	width:44.3%;
	float: right;
	}

.forteSub .forteIcon {
	width:18.7%;
	display:block;
	text-align:center;
	margin:0 auto 3%;
	}

.forteSub h3 {
	font-size:1.438em;
	text-align:center;
	margin:0 auto 3%;
	}

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

.forteSub .forteSubTxt {
	margin: 0 auto 4%;
	}

.forteSub .forteImg {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}

/*------------- forteSub .forteSub1column -------------*/
.forteSub .forteSub1column .forteIcon {
	width:8%;
	display:block;
	text-align:center;
	margin:0 auto 1%;
	}

.forteSub .forteSub1column h3 {
	font-size:1.438em;
	text-align:center;
	margin:0 auto 1.5%;
	}

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

.forteSub .forteSub1column .forteSubTxt {
	text-align:center;
	margin: 0 auto 2.5%;
	}

/* copier */
.forteSub .forteSub1column .copier {
	background:#F1EBE1;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding:3%;
	}

.forteSub .forteSub1column .copier .copierL {
	width:40%;
	float:left;
	}

.forteSub .forteSub1column .copier .copierR {
	width:56%;
	float: right;
	}
	
.forteSub .forteSub1column .copier dl{
	margin:0;
	}

.forteSub .forteSub1column .copier dl dt{
	background:url(/contract/images/7ej_exclamation.png) no-repeat;
	background-size:24px;
	background-position:left center;
	font-size:1em;
	font-weight:bold;
	padding: 0 0 0 34px;
	}

.forteSub .forteSub1column .copier dl dd{
	font-size:0.875em;
	border-bottom:1px solid #C6BCB6;
	padding: 1% 0 2%;
	margin: 0 0 2%;
	}

.forteSub .forteSub1column .copier dl dd:last-child{
	border-bottom: none;
	padding: 1% 0 0;
	margin: 0;
	}

/*------------- seven -------------*/
.seven {
	max-width:1000px;
	width:100%;
	border:1px solid #fce6cc;
	box-sizing: border-box;
	padding:4%;
	margin:6% auto 5%;
	}

.seven h3 {
	width: 85%;
	background:#EE8100;
	font-size:1.500em;
	text-align: center;
	color:#fff;
	border-radius: 28px;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	padding:1% 0;
	margin: -9.5% auto 3%;
	}

.seven .sevenTxt {
	text-align:center;
	margin:0 0 3%;
	}

/* sevenImg */
.sevenImg {
	margin:0 auto 5%;
	}
	
.sevenImg .sevenImgL {
	width:46%;
	float:left;
	}

.sevenImg .sevenImgR {
	width:46%;
	float: right;
	}

/* sevenArea */
.sevenArea {
	width:100%;
	padding:3%;
	box-sizing: border-box;
	}

.sevenArea .areaTit {
	font-size:1.438em;
	font-weight:bold;
	text-align:center;
	margin: 0 0 1%;
	}

.sevenArea .areaTit span {
	background:url(/contract/images/txtline3.png) repeat-x;
	background-position: bottom;
	}

.sevenArea .areaTxt {
	text-align:center;
	margin:0 0 3%;
	}


@media only screen and (max-width: 1024px) {
.forteSub, .seven {
	width:90%;
	}
}


@media only screen and (max-width: 768px) {
.forteSub .forteSub1column .copier dl dt {
    background-size: 15px;
    padding: 0 0 0 20px;
	}
}


@media only screen and (max-width: 480px) {
/*------------- forteSub -------------*/
.forteSub {
	margin:0 auto 8%;
	}
	
.forteSub .forteSubL {
	width:100%;
	float:none;
	margin:0 auto 8%;
	}

.forteSub .forteSubR {
	width:100%;
	float:none;
	}

.dnyLogo {
    width: 28%;
	}

.sevenLogo {
    width: 22%;
	}

.forteh2 {
	font-size:1.563em;
	margin:0 auto 3%;
	}

.forteCommon {
	text-align:left;
	}

/*------------- forteSub .forteSub1column -------------*/
.forteSub .forteSub1column .forteIcon {
	width:18.7%;
	display:block;
	text-align:center;
	margin:0 auto 3%;
	}

.forteSub .forteSub1column h3 {
	margin:0 auto 3%;
	}

.forteSub .forteSub1column .forteSubTxt {
	text-align: left;
	margin: 0 auto 4%;
	}

/* copier */
.forteSub .forteSub1column .copier {
	padding:6%;
	}

.forteSub .forteSub1column .copier .copierL {
	width:100%;
	float: none;
	margin:0 0 3%;
	}

.forteSub .forteSub1column .copier .copierR {
	width:100%;
	float: none;
	}

.forteSub .forteSub1column .copier dl dd {
    padding: 1% 0 4%;
    margin: 0 0 4%;
	}

/*------------- seven -------------*/
.seven {
	margin:0 auto 13%;
	}
	
.seven h3 {
    width: 100%;
	font-size: 1.250em;
    padding: 1.2% 0;
    margin: -9.5% auto 5%;
	}

.seven .sevenTxt, .sevenArea .areaTxt {
    text-align: left;
    margin: 0 0 5%;
	}

/* sevenImg */
.sevenImg {
	margin:0 auto 8%;
	}
	
.sevenImg .sevenImgL {
	width:100%;
	float:none;
	margin:0 0 1.5%;
	}

.sevenImg .sevenImgR {
	width:100%;
	float: none;
	}

/* sevenArea */
.sevenArea {
	padding:5%;
	}

.sevenArea .areaTit {
    font-size: 1.250em;
	margin: 0 0 2%;
	}

}


@media only screen and (max-width: 320px) {
.seven h3 {
    font-size: 1.2em;
    letter-spacing: 0;
	}
}