@charset "utf-8";

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

/* mainImage
---------------------------------------- */
#mainImage {
	width:100%;
	border-bottom:#e60012 1px solid;
	background-size:cover!important;
}

/* leadBox
---------------------------------------- */
#leadBox h2 {
	line-height:1.5em;
	color:#e60012;
}
#leadBox h2,
#leadBox p {
	text-align:center;
	font-family:"NewCezannePro-DB";
}
#leadBox p span {
	font-size:1.5em;
	color:#e60012;
	line-height:1.5em;
}
#leadBox .btn02 a {
	max-width: 300px;
	margin: 0 auto;
}

/* box01
---------------------------------------- */
#box01 {
	background:url(../../images/mainframe/tex01.gif) repeat center top;
}
#box01 article h3 {
	line-height:1.5em;
	position:relative;
}
#box01 article h3:before {
	display:block;
	content:"";
	background-color:#e60012;
	position:absolute;
}
#box01 article h3 span {
	display:inline-block;
	position:relative;
	z-index:100;
}
#box01 article h3 span:first-letter {
	font-size:1.28em!important;
	color:#fff!important;
}

/* box02
---------------------------------------- */
#box02 {
	background:url(../../images/index/box_tex01.gif) repeat center top;
	box-shadow:0px 6px 6px -3px rgba(0,0,0,0.15) inset,0px -3px 6px -3px rgba(0,0,0,0.15) inset;
	-moz-box-shadow:0px 6px 6px -3px rgba(0,0,0,0.15) inset,0px -3px 6px -3px rgba(0,0,0,0.15) inset;
	-webkit-box-shadow:0px 6px 6px -3px rgba(0,0,0,0.15) inset,0px -3px 6px -3px rgba(0,0,0,0.15) inset;
}
#box02 header h3,
#TopicsList header h3{
	color:#e60012;
	text-align:center;
	font-family:"NewCezannePro-DB";
}
#box02 header p,
#TopicsList header p{
	text-align:center;
	font-size:0.92em;
	line-height:1.2em;
	font-family: 'Lato', sans-serif;
}
#box02 h4 {
	font-family: 'Lato', sans-serif;
	border-bottom:#000 1px solid;
}
#box02 h4 span {
	display:inline-block;
	color:#e60012;
	font-family:"NewCezannePro-DB";
}
#box02 #box02Inner01 {
	background:url(../../images/index/image05.png) no-repeat left top;
}
#box02 #box02Inner02 {
	background:url(../../images/index/image06.png) no-repeat right top;
}
#box02 #box02Inner03 {
	background:url(../../images/index/image07.png) no-repeat left top;
}
#box02 #box02Inner04 {
	background:url(../../images/index/image08.png) no-repeat right top;
}
#contactBox {
	box-shadow:0px 6px 6px -3px rgba(0,0,0,0.15) inset,0px -3px 6px -3px rgba(0,0,0,0.15) inset;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* mainImage
	---------------------------------------- */
	#mainImage {
		margin-bottom:1.5em;
		background:url(../../images/index/mainImage_sp.jpg) no-repeat center top;
	}
	
	/* leadBox
	---------------------------------------- */
	#leadBox {
		margin-bottom:2em;
	}
	#leadBox h2 {
		font-size:1.14em;
		margin-bottom:0.5em;
	}
	
	/* box01
	---------------------------------------- */
	#box01 {
		padding-bottom:2em;
		background-size:12px 12px!important;
	}
	#box01 article {
		padding:2em 0 2em;
	}
	#box01 article h3 {
		font-size:1.5em;
		padding-left:22px;
	}
	#box01 article h3:before {
		width:40px;
		height:40px;
		bottom:8px;
		left:0;
		z-index:1;
	}
	#box01 article .photo {
		position:relative;
		margin-top:1em;
	}
	#box01 article .btn02 {
		width:225px;
		position:absolute;
		bottom:-1.5em;
		left:50%;
		margin-left:-112px;
	}
	
	/* box02
	---------------------------------------- */
	#box02 {
		padding:3.5em 0;
		background-size:50% auto;
	}
	#box02 header,
	#TopicsList header{
		margin-bottom:2.4em;
	}
	#box02 header h2 {
		width:46%;
		max-width:160px;
		margin:0 auto 1em;
	}
	#box02 header h3 .txt,
	#TopicsList header h3 .txt{
		display:inline-block;
		font-size:1.4em;
		line-height:1.5em;
		padding:0 1em;
	}
	#box02 article {
		margin-bottom:2.4em;
		background-size:45% auto!important;
	}
	#box02Inner01,
	#box02Inner03 {
		padding-left:45%;
	}
	#box02Inner02,
	#box02Inner04 {
		padding-right:45%;
	}
	#box02 h4 {
		font-size:1.5em;
		line-height:1.7em;
		margin-bottom:0.5em;
	}
	#box02 h4 span {
		font-size:0.7em;
		margin-left:0.5em;
	}
	#box02 #logo {
		width:55.6%;
		max-width:220px;
		margin:0 auto;
	}
	
	#TopicsList {
		padding: 2em 0;
	}
	#TopicsList .btn02 a{
		margin-top: 2em;
	}
}


/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* mainImage
	---------------------------------------- */
	#mainImage {
		background:url(../../images/index/mainImage_pc.jpg) no-repeat center top;
	}
	
	/* leadBox
	---------------------------------------- */
	#leadBox {
		padding:5em 0;
		background:url(../../images/index/lead_tex.png) no-repeat left top;
	}
	#leadBox h2 {
		font-size:1.7em;
		margin-bottom:0.5em;
	}
	#leadBox p {
		font-size:1.15em;
	}
	
	/* box01
	---------------------------------------- */
	#box01 {
		padding:5em 0;
	}
	#box01 article {
		width:46%;
		float:left;
		padding:4% 0 4%;
	}
	#box01 article:nth-child(odd) {
		margin-right:8%;
	}
	#box01 article h3 {
		font-size:2.1em;
		padding-left:0.92em;
	}
	#box01 article h3:before {
		width:1.7em;
		height:1.7em;
		bottom:0.45em;
		left:0;
		z-index:1;
	}
	#box01 article .photo {
		position:relative;
		margin-top:1em;
	}
	#box01 article .btn02 {
		width:225px;
		position:absolute;
		bottom:-1.5em;
		left:50%;
		font-size:1.15em;
		margin-left:-112px;
	}
	
	/* box02
	---------------------------------------- */
	#box02 {
		padding:3.5em 0;
		background-size:50% auto;
	}
	#box02 header,
	#TopicsList header {
		margin-bottom:2.4em;
	}
	#box02 header h2 {
		width:22%;
		max-width:210px;
		margin:0 auto 0.5em;
	}
	#box02 header h3 .txt,
	#TopicsList header h3 .txt{
		display:inline-block;
		font-size:2.28em;
		line-height:1.7em;
		padding:0 1em;
	}
	#box02 article {
		min-height:20em;
		margin-bottom:2.4em;
		background-size:30% auto!important;
	}
	#box02Inner01,
	#box02Inner03 {
		padding-left:33%;
	}
	#box02Inner02,
	#box02Inner04 {
		padding-right:33%;
	}
	#box02 h4 {
		position:relative;
		font-size:2.57em;
		line-height:1.7em;
		margin-bottom:0.5em;
	}
	#box02 h4:after {
		display:block;
		font-size:2em;
		color:#fce5e7;
		position:absolute;
		top:0;
		right:0;
		font-family: 'Lato', sans-serif;
		font-style:italic;
	}
	#box02 #box02Inner01 h4:after { content:"1"; }
	#box02 #box02Inner02 h4:after { content:"2"; }
	#box02 #box02Inner03 h4:after { content:"3"; }
	#box02 #box02Inner04 h4:after { content:"4"; }
	#box02 h4 span {
		font-size:0.5em;
		margin-left:1.5em;
	}
	#box02 .text p {
		font-size:1.15em;
	}
	#box02 #logo {
		width:31%;
		max-width:300px;
		margin:0 auto;
	}
	
	/*トピックス一覧*/
	#TopicsList {
		padding: 5em 0;
		box-shadow: 0px -3px 6px -3px rgba(0,0,0,0.15);;
	}
	#TopicsList .btn02 {
		text-align: center;
		margin-top: 4%;
	}
	#TopicsList .btn02 a {
		max-width: 300px;
		margin: 0 auto;
	}
}