@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* mainTitle
---------------------------------------- */
#mainTitle {
	background:url(../../images/offer/title_tex.jpg) no-repeat center center;
}

/* textContents
---------------------------------------- */
.textContents {
	position: relative;
}
.textContents h3 {
	color :#e60012;
	line-height :1.4em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

/* caseStudy
---------------------------------------- */
.caseStudy {
	background :url(../../images/mainframe/tex01.gif) repeat center top;
}
.caseStudy h2 {
	color :#e60012;
	line-height :1.4em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	text-align: center;
	margin-bottom: 1em;
	letter-spacing: 0.04em;
}
.caseStudy .caseStudyBox section {
	position: relative;
	background-color: #fff;
	border: 1px solid #E60012;
	z-index: 1;
}
.caseStudy .caseStudyBox section:before {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	background-color: #e60012;
	z-index: -1;
}
.caseStudy .caseStudyHead .caseBox {
	position: relative;
	display: flex;
	align-items: baseline;
}
.caseStudy .caseStudyHead .caseBox span {
	display: block;
	font-family: "Lato", sans-serif;
}
.caseStudy .caseStudyHead .caseBox .studyCase {
	position: relative;
	line-height: 1.5;
	margin-right: 0.3em;
	letter-spacing: 0.08em;
}
.caseStudy .caseStudyHead .caseBox .studyCase:first-letter {
	font-size: 1.28em;
	color: #fff;
}
.caseStudy .caseStudyHead h3 {
	background-color: #BE0012;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.04em;
}

/* contactWrap
---------------------------------------- */
.contactWrap {
	border: 1px solid #CB0011;
}
.contactWrap h2 {
	display: flex;
	justify-content: center;
	align-items: baseline;
	background-color: #FBEEEF;
	color: #E60012;
}
.contactWrap h2 span {
	display: block;
	font-family: "Lato", sans-serif;
	color: #000;
	line-height: 1;
	margin: 0 0.5em;
}
.contactWrap .contactContainer > p {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	text-align: center;
	margin-bottom: 1em;
}
.contactWrap .contactContainer .contactChoice .telBox a {
	text-decoration: none;
}
.contactWrap .contactContainer .contactChoice .telBox .icon-phone {
	color: #a51520;
	margin-right: 0.3em;
}
.contactWrap .contactContainer .contactChoice .telBox .tel {
	font-family: "Lato", sans-serif;
	color: #E60012;
	font-weight: bold;
}
.contactWrap .contactContainer .contactChoice .btn01 a {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

/* consultingCase
---------------------------------------- */
#consultingCase .caseStudyBox section:first-child p,
#consultingCase .caseStudyBox section:first-child ul li:first-child {
	margin-bottom: 1em;
}
#consultingCase .caseStudyBox section ul li {
	line-height: 1.7;
	padding-left: 1em;
	text-indent: -1em;
}

/* supportWrap
---------------------------------------- */
#supportWrap {
	border:#e60012 1px solid;
}
#supportWrap h4 {
	line-height:1.3em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

/* box02
---------------------------------------- */
#box02 {
	background :url(../../images/mainframe/tex01.gif) repeat center top;
}
#box02 .fontCezanneM {
	font-size:1.15em;
	text-align:center;
	line-height:1.4em;
	margin-bottom:1.5em;
}
#box02 h4 {
	font-size:1.28em;
	text-align:center;
	color:#e60012;
	line-height:1.3em;
	margin-bottom:1em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* box01
	---------------------------------------- */
	.tit01 h2 {
		font-size:0.92em;
	}
	.tit01 h2 span {
		font-size:1.4em;
		padding:0 0.5em;
	}
	#box01 {
		margin-bottom:3em;
	}
	
	/* textContents
	---------------------------------------- */
	.textContents h3 {
		font-size:1.5em;
		margin-bottom:1em;
	}
	.textContents .contentsBox:not(:last-of-type) {
		margin-bottom: 4em;
	}
	.textContents .clearfix {
		padding-bottom:165px;
	}
	.textContents .clearfix p {
		margin-bottom:1em;
	}
	
	/* informationWrap */
	#informationWrap .contentsBox:first-of-type .clearfix {
		background:url(../../images/offer/image01.jpg) no-repeat center bottom / 280px auto;
	}
	#informationWrap .contentsBox:nth-of-type(2) .clearfix {
		background:url(../../images/offer/image02.jpg) no-repeat center bottom / 280px auto;
	}
	#informationWrap .contentsBox:nth-of-type(3) .clearfix {
		background:url(../../images/offer/image03.jpg) no-repeat center bottom / 280px auto;
	}
	#informationWrap .contentsBox:nth-of-type(4) .clearfix {
		background:url(../../images/offer/image04.png) no-repeat center bottom / 280px auto;
	}
	
	/* caseStudy 
	---------------------------------------- */
	.caseStudy {
		/*margin: -4em 0 4em;
		padding: 5em 1em 1em;*/
		margin-bottom: 4em;
		padding: 1em;
	}
	.caseStudy .caseStudyBox section {
		padding: 0.5em 1em 1em;
		margin-bottom: 1em;
	}
	.caseStudy .caseStudyBox section:before {
		width: 38px;
		height: 38px;
	}
	.caseStudy .caseStudyHead {
		margin-bottom: 1em;
	}
	.caseStudy .caseStudyHead .caseBox {
		margin-bottom: 0.3em;
		padding-left: 0.3em;
	}
	.caseStudy .caseStudyHead .caseBox .studyCase {
		font-size: 1.5em;
	}
	.caseStudy .caseStudyHead .caseBox .number {
		font-size: 1.7em;
	}
	.caseStudy .caseStudyHead h3 {
		display: inline-block;
		font-size: 0.86em;
		padding: 0 0.5em;
	}
	
	/* contactWrap
	---------------------------------------- */
	.contactWrap {
		margin-bottom: 4em;
	}
	.contactWrap h2,
	.contactWrap h2 span {
		font-size: 1.2em;
	}
	.contactWrap h2 {
		padding: 0.5em 0.5em 0.3em;
	}
	.contactWrap .contactContainer {
		padding: 30px 1em;
	}
	.contactWrap .contactContainer > p {
		font-size: 1.1em;
	}
	.contactWrap .contactContainer .contactChoice .telBox {
		text-align: center;
		margin-bottom: 1.5em;
	}
	.contactWrap .contactContainer .contactChoice .telBox .icon-phone {
		font-size: 1.5em;
	}
	.contactWrap .contactContainer .contactChoice .telBox .tel {
		font-size: 2.2em;
	}
	.contactWrap .contactContainer .contactChoice .btn01 {
		width: 100%;
	}
	#informationWrap {
		margin-bottom: 4em;
	}
	
	/* consultingWrap
	---------------------------------------- */
	#consultingWrap .contentsBox .clearfix {
		background:url(../../images/offer/image05.png) no-repeat center bottom / 280px auto;
	}
	
	/* communityWrap
	---------------------------------------- */
	#communityWrap {
		margin-bottom: 4em;
	}
	#communityWrap .contentsBox .clearfix {
		background:url(../../images/offer/image06.jpg) no-repeat center bottom / 280px auto;
	}
	
	/* supportWrap
	---------------------------------------- */
	#supportWrap {
		padding:1em 1em 130px;
		background:url(../../images/offer/image07.jpg) no-repeat left bottom;
		background-size:200px 130px;
	}
	#supportWrap h4 {
		font-size:1.28em;
		margin-bottom:0.5em;
	}
	
	/* box02
	---------------------------------------- */
	#box02 {
		padding:3em 0;
		background-size:12px 12px!important;
	}
	#box02 .fontCezanneM {
		font-size:1.15em;
		text-align:center;
		line-height:1.4em;
		margin-bottom:1.5em;
	}
	#box02 ul li {
		width:48%;
		float:left;
		margin:0 4% 4% 0;
	}
	#box02 ul li:nth-child(2n) {
		margin-right:0;
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* informationWrap
	---------------------------------------- */
	/*#box01 {
		
	}*/
	.textContents h3 {
		font-size:1.7em;
		margin-bottom:1em;
	}
	.textContents .contentsBox:not(:last-of-type) {
		margin-bottom: 7.14em;
	}
	.textContents .clearfix {
		min-height:320px;
	}
	.textContents .clearfix h3,
	.textContents .clearfix p {
		width: 49%;
	}
	
	/* informationWrap */
	#informationWrap {
		margin-bottom: 7em;
	}
	#informationWrap .contentsBox:first-of-type .clearfix {
		background:url(../../images/offer/image01.jpg) no-repeat right top / 55%;
	}
	#informationWrap .contentsBox:nth-of-type(2) .clearfix {
		background:url(../../images/offer/image02.jpg) no-repeat left top / 55%;
	}
	#informationWrap .contentsBox:nth-of-type(3) .clearfix {
		background:url(../../images/offer/image03.jpg) no-repeat right top / 55%;
	}
	#informationWrap .contentsBox:nth-of-type(4) .clearfix {
		background:url(../../images/offer/image04.png) no-repeat left top / 55%;
	}
	#informationWrap .contentsBox:nth-of-type(2n) .clearfix h3,
	#informationWrap .contentsBox:nth-of-type(2n) .clearfix p {
		margin-left: auto;
	}
	
	/* caseStudy
	---------------------------------------- */
	.caseStudy {
		/*padding: 9.29em  2.86em 2.86em;
		margin: -6.93em 0 7.14em;*/
		padding: 2.86em;
		margin-bottom: 7.14em;
	}
	.caseStudy h2 {
		font-size: 1.36em;
	}
	.caseStudy .caseStudyHead {
		display: flex;
		align-items: center;
		margin-bottom: 1em;
		padding-left: 0.3em;
	}
	.caseStudy .caseStudyHead .caseBox .studyCase {
		font-size: 2.1em;
	}
	.caseStudy .caseStudyBox section {
		padding: 1.2em 2.14em 2.14em;
	}
	.caseStudy .caseStudyBox section:before {
		width: 52px;
		height: 52px;
	}
	.caseStudy .caseStudyBox section:not(:last-child) {
		margin-bottom: 1.43em;
	}
	.caseStudy .caseStudyHead .caseBox {
		margin-right: 3.43em;
	}
	.caseStudy .caseStudyHead .caseBox .number {
		font-size: 2.71em;
	}
	.caseStudy .caseStudyHead h3 {
		padding: 0.5em 0.7em 0.24em;
	}
	.caseStudy .caseStudyBox section p {
		line-height: 2;
	}
	
	/* contactWrap
	---------------------------------------- */
	.contactWrap {
		margin-bottom: 7.14em;
	}
	.contactWrap h2 {
		font-size: 1.5em;
		padding: 0.5em 0;
	}
	.contactWrap h2 span {
		font-size: 1.71em;
	}
	.contactWrap .contactContainer {
		padding: 1.43em;
	}
	.contactWrap .contactContainer > p {
		font-size: 1.43em;
	}
	.contactWrap .contactContainer .contactChoice {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.contactWrap .contactContainer .contactChoice .telBox {
		margin-right: 2.5em;
		pointer-events: none;
	}
	.contactWrap .contactContainer .contactChoice .telBox .icon-phone {
		font-size: 1.86em;
	}
	.contactWrap .contactContainer .contactChoice .telBox .tel {
		font-size: 2.7em;
	}
	.contactWrap .contactContainer .contactChoice .btn01 {
		width: 300px;
	}
	.contactWrap .contactContainer .contactChoice .btn01 a {
		font-size: 1.29em;
	}
	
	/* consultingWrap
	---------------------------------------- */
	#consultingWrap .contentsBox .clearfix {
		background:url(../../images/offer/image05.png) no-repeat right top / 55%;
	}
	
	/* communityWrap
	---------------------------------------- */
	#communityWrap {
		margin-bottom: 7.14em;
	}
	#communityWrap .contentsBox .clearfix {
		background:url(../../images/offer/image06.jpg) no-repeat left top / 55%;
	}
	#communityWrap .contentsBox .clearfix h3,
	#communityWrap .contentsBox .clearfix p {
		margin-left: auto;
	}
	
	/* supportWrap
	---------------------------------------- */
	#supportWrap {
		padding:2em 2em 2em 50%;
		background:url(../../images/offer/image07.jpg) no-repeat left bottom;
		background-size: 45%;
		margin-bottom: 4.5em;
	}
	#supportWrap h4 {
		font-size:1.28em;
		margin-bottom:0.5em;
	}
	
	/* box02
	---------------------------------------- */
	#box02 {
		padding:4.5em 0;
	}
	#box02 ul {
		width:83%;
		margin:0 auto;
	}
	#box02 ul li {
		width:28%;
		float:left;
		margin:0 8% 8% 0;
	}
	#box02 ul li:nth-child(3n) {
		margin-right:0;
	}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 860px){
	
	/*.textContents .clearfix h3,
	.textContents .clearfix p {
		width: 49%;
	}*/
	.caseStudy .caseStudyBox section:before {
		width: 60px;
		height: 60px;
	}
	.contactWrap .contactContainer .contactChoice .btn01 {
		width: 333px;
	}
}