@charset "utf-8";
/* ------------------------------------------------------------ common */
#wrapper {
	padding: 100px 0 0;
}

/* ------------------------------------------------------------ firstview */
#firstview {
	position: relative;
	background: linear-gradient(to left, #d51103, #d50303);
	background-size: cover;
	height: 409px;
}

	#firstview .fv_icn {
		position: absolute;
		right: 50%;
		top: -30px;
		margin: 0 -640px 0 0;
	}

/* ------------------------------------------------------------ feature */

#feature {
	padding: 95px 0 115px;
}

	#feature h1 {
		font-size: 40px;
		color: #000;
	}

	#feature h1 span {
		font-size: 26px;
		color: #d50303;
	}

	#feature .intro {
		padding: 25px 0 15px;
		text-align: center;
	}

	#feature .intro span {
		line-height: 160%;
		font-size: 30px;
		color: #d50303;
		font-family: 'Noto-Sans-JP-Medium';
		display: inline-block;
		background: url(../images/salesystem/bdr_wave.png) repeat-x left bottom;
		padding: 0 0 3px;
	}

	#feature article {
		width: 240px;
		float: left;
		text-align: center;
		margin: 20px 40px 0 0;
		box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
		border-radius: 20px 20px;
		position: relative;
	}

	#feature article:before {
		content: "";
		width: 0;
		height: 0;
		border-top: 21px solid transparent;
		border-bottom: 21px solid transparent;
		border-left: 16px solid #000;
		position: absolute;
		right: -28px;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	#feature article:last-child {
		margin: 0;
		width: 260px;
	}

	#feature article:last-child:before {
		border: none;
		position: static;
	}

	#feature article h2 {
		font-size: 24px;
		color: #fff;
		line-height: 50px;
		border: 2px solid #d50303;
		background: #d50303;
		border-radius: 20px 20px 0 0;
		font-family: 'Noto-Sans-JP-Medium';
	}

	#feature article .detail {
		background: #fff;
		padding: 15px 0 30px;
		border-radius: 0 0 20px 20px;
	}

	#feature article .detail span {
		display: block;
		font-size: 14px;
		padding: 5px 0 0;
	}

	#feature article .detail .img {
		height: 171px;
		position: relative;
	}

	#feature article .detail .img img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	#feature article .detail p {
		font-size: 14px;
		padding: 19px 30px 0;
		text-align: left;
		line-height: 30px;
	}

	#feature article .detail p.padd {
		padding: 0 30px;
	}

	#feature article:last-child {
		
	}

	#feature article:last-child h2 {
		font-size: 42px;
		color: #ffef00;
		line-height: 68px;
	}

	#feature article:last-child .detail {
		background: #fff6f6;
		border: 3px solid #d50303;
		border-top: none;
	}

	#feature article:last-child .detail p {
		padding: 19px 18px 0 24px;
	}

/* ------------------------------------------------------------ howto */

#howto {
	padding: 95px 0 115px;
	background: #fff6f6;
	text-align: center;
}

	#howto .inner {
		width: 880px;
	}

	#howto h1 {
		font-size: 40px;
		color: #000;
	}

	#howto h1 span {
		font-size: 26px;
		color: #d50303;
	}

	#howto p {
		text-align: center;
		padding: 25px 0 60px;
	}

	#howto .cfx {
		padding: 0 0 90px;
		background: url(../images/salesystem/guide_00.png) no-repeat center bottom;
	}

	#howto article {
		width: 237px;
		float: left;
		background: #fff;
		border-radius: 10px;
		padding: 54px 15px 25px;
		margin: 0 0 0 39px;
		position: relative;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	}

	#howto article:before {
		content: "";
		width: 0;
		height: 0;
		border-left: 11px solid transparent;
		border-right: 11px solid transparent;
		border-top: 22px solid #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -20px;
		margin: auto;
	}

	#howto article.twin {
		padding: 40px 15px 25px;
	}

	#howto article:first-child {
		margin: 0;
	}

	#howto article b {
		font-size: 35px;
		color: #fff;
		font-family: mr-eaves-modern, sans-serif;
		font-weight: 700;
		width: 50px;
		line-height: 50px;
		border-radius: 25px;
		background: #d30303;
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: -25px;
		margin: 0 auto;
	}

	#howto article h2 {
		font-family: 'Noto-Sans-JP-Medium';
		font-size: 20px;
		color: #d50303;
		line-height: 27px;
		padding: 0 0 52px;
	}
	
	#howto article.twin h2 {
		padding: 0 0 10px;
	}

	#howto article span {
		font-size: 12px;
		padding: 0 0 16px;
		display: block;
	}

	#howto article.twin span {
		padding: 0 0 16px;
	}

	#howto h3 {
		text-align: center;
		line-height: 160%;
		font-size: 30px;
		color: #d50303;
		font-family: 'Noto-Sans-JP-Medium';
		display: inline-block;
		background: url(../images/salesystem/bdr_wave.png) repeat-x left bottom;
		padding: 0 0 3px;
	}

/* ------------------------------------------------------------ analysis */

#analysis {
	padding: 95px 0 60px;
}

	#analysis h1 {
		font-size: 40px;
		color: #000;
	}

	#analysis h1 span {
		font-size: 26px;
		color: #d50303;
	}

	#analysis h1 span.num {
		font-size: 70px;
		display: inline-block;
		line-height: 100%;
	}

	#analysis .intro {
		text-align: center;
		padding: 20px 0 50px;
	}

	#analysis article {
		border-radius: 20px;
		box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
		padding: 50px 60px;
		margin: 0 0 55px;
	}

	#analysis article p {
		font-size: 14px;
		text-align: center;
		padding: 20px 0 0;
	}

	#analysis article .img {
		text-align: center;
	}

	#analysis article.win_rate h3 {
		font-size: 20px;
		font-family: 'Noto-Sans-JP-Medium';
		padding: 0 0 0 9px;
		margin: 0 0 20px;
		border-left: 4px solid #d50303;
	}

	#analysis article.win_rate .left {
		float: left;
	}

	#analysis article.win_rate .right {
		float: left;
		width: 410px;
		padding: 30px 0 0 205px;
		background: url(../images/salesystem/guide_01.png) no-repeat -1px 75px;
	}

	#analysis article.win_rate .right .point {
		padding: 0 0 40px;
		text-align: left;
	}

	#analysis article.win_rate .right .point .title1 {
		color: #000;
		font-size: 24px;
		text-align: left;
	}

	#analysis article.win_rate .right .point .title1 span{
		color: #d50303;
		font-size: 18px;
		line-height: 100%;
		padding: 0 0 13px;
	}

	#analysis article.win_rate .right .point p {
		font-size: 14px;
		text-align: left;
		line-height: 28px;
		padding: 10px 0 0;
	}

	#analysis article h2.title1 {
		font-size: 24px;
		color: #000;
	}

	#analysis article h2.title1 span {
		font-size: 18px;
		color: #d50303;
	}

	#analysis article.graph p {
		padding: 20px 0 30px;
		margin: 0 0 55px;
		border-bottom: 1px solid #e7e7e7;
	}

	#analysis article.data p {
		padding: 20px 0 30px;
		margin: 0 0 35px;
		border-bottom: 1px solid #e7e7e7;
	}

	#analysis article.data ul {
		
	}

	#analysis article.data li {
		float: right;
	}

	#analysis article.data li:first-child {
		float: left;
	}

	#analysis article.data li h3 {
		font-size: 20px;
		font-family: 'Noto-Sans-JP-Medium';
		padding: 0 0 0 9px;
		margin: 0 0 25px;
		border-left: 4px solid #d50303;
	}

	#analysis article.data li .img {
		position: relative;	
	}

	#analysis article.data li .img img {
		border-radius: 10px;
		border: 2px solid #d2d2d2;	
	}

	#analysis article.data li .img span {
		font-size: 14px;
		color: #fff;
		display: block;
		width: 110px;
		line-height: 18px;
		padding: 37px 0;
		background: #d50303;
		border-radius: 55px;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
		position: absolute;
		right: 20px;
		top: -55px;
	}

	#analysis article.system {
		padding: 50px 60px 40px;
	}

	#analysis article.report p {
		padding: 20px 0 35px;
		margin: 0 0 35px;
		border-bottom: 1px solid #e7e7e7;
	}

	#analysis article.report .left {
		float: left;
		width: 210px;
		padding: 0 125px 0 0;
		position: relative;
	}

	#analysis article.report .left:before {
		content: "";
		width: 0;
		height: 0;
		border-top: 21px solid transparent;
		border-bottom: 21px solid transparent;
		border-left: 16px solid #000;
		position: absolute;
		right: 55px;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	#analysis article.report .left span {
		font-size: 14px;
		display: block;
		text-align: left;
		padding: 15px 5px 0;
		line-height: 28px;
	}

	#analysis article.report .right {
		float: left;
	}

	#analysis article.report .right .top {
		padding: 0 0 22px;
		margin: 0 0 20px;
		border-bottom: 1px solid #dfdfdf;
	}

/* ------------------------------------------------------------ example */
#example {
	padding: 95px 0;
	background: #fff6f6;
}

	#example h1 {
		font-size: 40px;
		color: #000;
	}

	#example h1 span {
		font-size: 26px;
		color: #d50303;
	}

	#example .intro {
		text-align: center;
		padding: 20px 0 130px;
	}

	#example article {
		background: #fff;
		padding: 55px 60px 40px;
		border-radius: 20px;
		margin: 0 0 125px;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
		position: relative;
	}

	#example article .example_title {
		position: absolute;
		top: -72px;
		left: 0;
		width: 100%;
	}

	#example article .example_title .icn {
		border: 3px solid #d50303;
		width: 104px;
		border-radius: 55px;
		background: #fff;
		text-align: center;
		padding: 17px 0;
		position: absolute;
		left: 0;
		top: -19px;
		z-index: 2;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	}
	
	#example article .example_title .icn.ex {
		padding: 0;
	}

	#example article .example_title .right {
		position: relative;
		background: #d50303;
		min-width: 445px;
		padding: 0 40px 0 96px;
		border-radius: 0 36px 0 0;
		background: #d50303;
		display: inline-block;
		margin: 0 0 0 26px;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
		box-sizing: border-box;
	}

	#example article .example_title .right h2 {
		font-family: 'Noto-Sans-JP-Medium';
		font-size: 20px;
		color: #fff;
		padding: 32px 0 20px 0;
	}

	#example article .example_title span {
		padding: 0 15px 0 105px;
		border: 2px solid #d50303;
		line-height: 25px;
		color: #d50303;
		font-family: 'Noto-Sans-JP-Medium';
		background: #fff;
		border-radius: 13px;
		position: absolute;
		left: 16px;
		top: -8px;
	}
	
	#example article .detail .pickup {
		background: #fff6f6;
		border-radius: 20px;
		padding: 25px;
	}

	#example article .detail .pickup span {
		float: left;
		font-size: 20px;
		font-family: 'Noto-Sans-JP-Medium';
		padding: 0 55px 0 9px;
		margin: 25px 0;
		border-left: 4px solid #d50303;
		background: url(../images/rent/arw_01.png) no-repeat calc(100% - 20px) center;
	}

	#example article .detail .pickup ul {
		float: left;
	}

	#example article .detail .pickup ul li {
		float: left;
		text-align: center;
		width: 196px;
		border: 2px solid #d50303;
		border-radius: 5px;
		background: #fff;
		font-size: 18px;
		color: #d50303;
		padding: 24px 0;
		font-family: 'Noto-Sans-JP-Medium';
		margin: 0 0 0 10px;
	}

	#example article .detail .pickup ul li:first-child {
		margin: 0;
	}

	#example article .detail .pickup ul li.twin {
		line-height: 24px;
		padding: 9px 0;
	}

	#example article .detail .left {
		width: 490px;
		float: left;
	}

	#example article .detail .left h3 {
		font-size: 29px;
		color: #d50303;
		line-height: 46px;
		padding: 45px 0 15px;
		font-family: 'Noto-Sans-JP-Medium';
	}

	#example article .detail .left p {
		font-size: 14px;
		line-height: 30px;
	}

	#example article .detail .right {
		float: right;
		padding: 40px 0 0;
	}

	



/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {


/* ------------------------------------------------------------ common */
#wrapper {
	padding: 60px 0 0;
}

/* ------------------------------------------------------------ firstview */
#firstview {
	height: 250px;
}

	#firstview .fv_icn {
		position: absolute;
		right: 0;
		left: 0;
		top: inherit;
		bottom: -160px;
		margin: 0 auto;
		width: 210px;
		height: auto;
	}

/* ------------------------------------------------------------ bread */
#bread {
	padding: 190px 5% 0;
}

/* ------------------------------------------------------------ feature */

#feature {
	padding: 45px 0 65px;
}

	#feature h1 {
		font-size: 30px;
	}

	#feature h1 span {
		font-size: 22px;
	}

	#feature .intro {
		padding: 20px 0;
	}

	#feature .intro span {
		font-size: 20px;
		background: url(../images/salesystem/bdr_wave.png) repeat-x left bottom;
		background-size: 10px auto;
	}

	#feature article {
		width: 100%;
		float: none;
		margin: 0 0 47px;
		border-radius: 10px;
	}

	#feature article:before {
		border-right: 11px solid transparent;
		border-left: 11px solid transparent;
		border-top: 8px solid #000;
		right: 0;
		left: 0;
		top: auto;
		bottom: -50px;
		margin: auto;
	}

	#feature article:last-child {
		margin: 0;
		width: 100%;
	}

	#feature article h2 {
		font-size: 17px;
		line-height: 35px;
		border: none;
		border-radius: 10px 10px 0 0;
	}

	#feature article .detail {
		padding: 3% 5%;
		border-radius: 0 0 10px 10px;
	}

	#feature article .detail .set {
		float: left;
		width: 50%;
	}

	#feature article .detail span {
		font-size: 12px;
		padding: 5px 0 0;
	}

	#feature article .detail .img {
		height: auto;
		float: left;
		width: 50%;
	}

	#feature article .detail .img img {
		position: static;
		width: 100%;
		height: auto;
	}

	#feature article .detail p {
		float: right;
		padding: 0 0 0 15px;
		line-height: 21px;
		width: calc(50% - 15px);
	}

	#feature article .detail p.padd {
		padding: 0 30px;
	}

	#feature article:last-child h2 {
		font-size: 30px;
		line-height: 52px;
	}

	#feature article:last-child .detail {
		border-top: none;
		padding: 3% 5% 4%;
	}

	#feature article:last-child .detail .img {
		padding: 15px 0 0;
	}

	#feature article:last-child .detail p {
		width: calc(50% - 15px);
		padding: 0 0 0 15px;
	}

	#feature article:nth-child(1) .detail p {
		padding: 15px 0 0;
	}

	#feature article:nth-child(2) .detail {
		padding: 5% 5% 3%;
	}

	#feature article:nth-child(2) .detail .set .img {
		width: 67%;
		margin: 0 auto;
		text-align: center;
		float: none;
		padding: 10px 0 0;
	}

	#feature article .detail p.padd {
		padding: 0 0 0 15px;
	}

	#feature article:nth-child(3) .detail {
		padding: 4% 5% 6%;
	}

/* ------------------------------------------------------------ howto */

#howto {
	padding: 50px 0;
}

	#howto .inner {
		width: 90%;
	}

	#howto h1 {
		font-size: 25px;
	}

	#howto h1 span {
		font-size: 18px;
	}

	#howto p {
		font-size: 12px;
		line-height: 21px;
		padding: 25px 0;
	}

	#howto h3 {
		display: none;
	}
	
	#howto .flow {
		width: 100%;
		height: auto;
	}

/* ------------------------------------------------------------ analysis */

#analysis {
	padding: 50px 0 10px;
}

	#analysis h1 {
		font-size: 25px;
	}

	#analysis h1 span {
		font-size: 18px;
	}

	#analysis h1 span.num {
		font-size: 40px;
	}

	#analysis .intro {
		line-height: 20px;
		padding: 20px 0 50px;
	}

	#analysis article {
		border-radius: 10px;
		padding: 40px 30px;
		margin: 0 0 55px;
	}

	#analysis article p {
		font-size: 14px;
		text-align: center;
		padding: 20px 0 0;
	}

	#analysis article .img {
		text-align: center;
	}

	#analysis article.win_rate h3 {
		display: none;
	}

	#analysis article.win_rate .left {
		float: none;
	}

	#analysis article.win_rate .right {
		float: none;
		width: 100%;
		padding: 0;
		background: none;
	}

	#analysis article.win_rate .right .point {
		padding: 0 0 40px;
		text-align: left;
	}

	#analysis article.win_rate .right .point .title1 {
		font-size: 21px;
		text-align: center;
	}

	#analysis article.win_rate .right .point .title1 span {
		font-size: 14px;
		padding: 0 0 6px;
	}

	#analysis article.win_rate .right .point p {
		font-size: 12px;
		text-align: left;
		line-height: 19px;
		padding: 15px 0;
	}
	
	#analysis article.win_rate .right .point img {
		width: 100%;
		height: auto;
	}

	#analysis article h2.title1 {
		font-size: 21px;
	}

	#analysis article h2.title1 span {
		font-size: 14px;
		padding: 0 0 6px;
	}

	#analysis article.graph p {
		font-size: 12px;
		line-height: 19px;
		text-align: left;
		padding: 20px 0 30px;
		margin: 0 0 55px;
	}
	
	#analysis article.graph .img img {
		width: 100%;
		height: auto;
	}

	#analysis article.data p {
		font-size: 12px;
		line-height: 19px;
		text-align: left;
		padding: 20px 0 30px;
		margin: 0 0 35px;
		border-bottom: 1px solid #e7e7e7;
	}

	#analysis article.data li {
		float: none;
		margin: 0 auto 50px;
	}

	#analysis article.data li:first-child {
		float: none;
	}
	
	#analysis article.data li:last-child {
		float: none;
		margin: 0 auto 20px;
	}

	#analysis article.data li h3 {
		font-size: 15px;
		padding: 0 0 0 9px;
		margin: 0 0 25px;
		border-left: 3px solid #d50303;
	}

	#analysis article.data li .img {
		position: relative;	
	}

	#analysis article.data li .img img {
		width: 100%;
		height: auto;
	}

	#analysis article.data li .img span {
		font-size: 12px;
		width: 90px;
		line-height: 18px;
		padding: 27px 0;
		right: 20px;
		top: -55px;
	}
	

	#analysis article.system {
		padding: 40px 30px;
	}

	#analysis article.report p {
		font-size: 12px;
		line-height: 19px;
		text-align: left;
		padding: 20px 0 25px;
		margin: 0 0 30px;
	}

	#analysis article.report .left {
		float: none;
		width: 100%;
		padding: 0 0 45px;
	}

	#analysis article.report .left:before {
		border-left: 14px solid transparent;
		border-right: 14px solid transparent;
		border-top: 12px solid #000;
		right: 0;
		left: 0;
		top: inherit;
		bottom: 0;
		margin: 0 auto;
	}

	#analysis article.report .left span {
		font-size: 12px;
		display: block;
		text-align: center;
		padding: 15px 5px 0;
		line-height: 28px;
	}

	#analysis article.report .right {
		float: none;
	}

	#analysis article.report .right .top {
		padding: 0 0 22px;
		margin: 0 0 20px;
		border-bottom: 1px solid #dfdfdf;
	}
	
	#analysis article.report .right .top img {
		width: 100%;
		height: auto;
	}
	
	#analysis article.report .right .bottom img {
		width: 100%;
		height: auto;
	}

/* ------------------------------------------------------------ example */
#example {
	padding: 45px 0 65px;
}

	#example h1 {
		font-size: 30px;
	}

	#example h1 span {
		font-size: 22px;
	}

	#example .intro {
		padding: 15px 0 68px;
		line-height: 20px;
	}

	#example article {
		padding: 28px 5% 15px;
		border-radius: 10px;
		margin: 0 0 77px;
	}
	
	#example article:last-of-type {
		margin: 0 auto;
	}

	#example article.padd {
		margin: 0 0 113px;
	}

	#example article .example_title {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
	}

	#example article .example_title .icn {
		width: 53px;
		border-radius: 1000px;
		padding: 8px 0;
		position: absolute;
		left: 3%;
		top: -12px;
	}

	#example article .example_title .icn img {
		width: 38px;
		height: auto;
	}
	
	#example article .example_title .icn.ex {
		padding: 2px 0;
	}
	
	#example article .example_title .icn.ex img {
		width: 50px;
		height: auto;
	}

	#example article .example_title .right {
		min-width: inherit;
		padding: 0 15px 0 45px;
		border-radius: 0 19px 0 0;
		display: inline-block;
		margin: 0 0 0 26px;
	}

	#example article .example_title .right h2 {
		font-size: 15px;
		padding: 18px 0 6px 0;
	}

	#example article .example_title span {
		padding: 0 15px 0 55px;
		line-height: 18px;
		border-radius: 13px;
		left: 16px;
		top: -8px;
	}


	#example article .example_title.long {
		top: -43px;
	}

	#example article .example_title.long .icn {
		top: -42px;
	}

	#example article .example_title.long .right {
		padding: 0 20px 0 45px;
		border-radius: 0 19px 0 0;
		margin: 0 0 0 26px;
	}

	#example article .example_title.long .right h2 {
		font-size: 15px;
		padding: 18px 0 10px 0;
	}

	#example article .example_title.long span {
		padding: 4px 10px 4px 55px;
		line-height: 18px;
		border-radius: 13px;
		left: 16px;
		top: -36px;
	}


	#example article .detail .pickup {
		border-radius: 10px;
		padding: 12px 2%;
	}

	#example article .detail .pickup span {
		float: none;
		font-size: 15px;
		padding: 0 55px 0 2%;
		margin: 0 0 17px;
		border-left: 2px solid #2a78ac;
		background: url("http://artory-lab.net/shoritsu-ichiban-hp/css/../images/rent/arw_01.png") no-repeat calc(100% - 20px) center;
		display: inline-block;
	}

	#example article .detail .pickup ul {
		float: none;
	}

	#example article .detail .pickup ul li {
		width: 32.2%;
		border: 1px solid #2a78ac;
		font-size: 11px;
		line-height: 16px;
		padding: 17px 0;
		margin: 0 0 0 0.6%;
	}

	#example article .detail .pickup ul li:first-child {
		margin: 0;
	}

	#example article .detail .pickup ul li.twin {
		line-height: 16px;
		padding: 9px 0;
	}

	#example article .detail .pickup ul li.twin_sp {
		padding: 9px 0;
	}

	#example article .detail .pickup ul li.twin_sp2 {
		padding: 17px 0;
	}

	#example article .detail .left {
		width: 100%;
		float: none;
	}

	#example article .detail .left h3 {
		font-size: 18px;
		line-height: 26px;
		padding: 17px 0 21px;
		text-align: center;
	}

	#example article .detail .left p {
		font-size: 12px;
		line-height: 20px;
	}

	#example article .detail .right {
		float: none;
		padding: 22px 0 0;
	}

	#example article .detail .right img {
		width: 100%;
		height: auto;
	}


}