/* reset */

hrml, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;}
ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
caption, th {text-align: left;}
q:before, q:after {content: '';}
object,embed{vertical-align:top;}
legend {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img, abbr, acronym, fieldset {border: 0;}
body {font-family : "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Arial, sans-serif; font-size: 16px;}
a {color: #000000; text-decoration: none;}
a:active, a:focus, input:active, input:focus {outline: 0;}
section{width: 100%;}
.pcClass {display: block;}
.spClass {display: none;}
.wrap {overflow: hidden;position: relative;}

/* ----------------------------------------------------------------
共通パーツ
----------------------------------------------------------------- */
.inner p{
	font-size: 16px;
	line-height: 2;
	text-align: left;
}

/* ----------------------------------------------------------------
メインビジュアル・ヘッダー
----------------------------------------------------------------- */
#main{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 0 0 70px 0;
	background-image: url(../img/main-bg.png);
	height: auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

#main p{
	max-width: 931px;
	display: inline-block;
}

#main img {
	width: 100%;
}

header {
	width: 100%;
	padding: 30px 0 5% 0;
}
header nav{
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

header nav ul{
	display: flex;
	margin-left: auto;
}

header nav h1{
	left:10px;
	width: 292px;
	height: 21px;
}

/* ----------------------------------------------------------------
代表メッセージ
----------------------------------------------------------------- */
#message {
	border-top: 8px solid #000000;
	padding: 0 0 60px 0;
}

#message .inner{
	max-width: 1060px;
	width: 90%;
	margin: 0 auto;
}

#message h2{
	max-width: 1260px;
	margin: 0 auto;
}

#message img{
	width: 100%;
}

#message .inner .read p{
	padding: 0 40px;
	margin: 70px 0;
}

#message .inner ul{
	background-color: #F0F0F0;
	padding: 30px 50px;
	display: flex;
	flex-wrap: wrap;
	flex-direction : row-reverse;
	justify-content: space-between;
}

#message .inner ul li.text{
	width: 50%;
}

#message .inner ul li.img{
	width: 35%;
}

#message .inner ul li.img img{
	width: 100%;
	display: block;
}

#message .inner ul li.text h4{
	margin: 10px 0 25px 0 ;
	font-size: 26px;
	padding-left: 40px;
	position: relative;
}

#message .inner ul li.text h4::before {
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 35px;
	height: 35px;
	background: url(../img/title-icon.svg) 0 0 no-repeat;
	z-index: 1;
}

#message .sp-message{
	text-align: center;
}

#message .sp-message h2{
	font-size: 28px;
	padding: 30px 0 20px 0;
}

#message .sp-message h2::after {
	content: '～パートナーになった思い～';
	font-size: 15px;
	display: block;
	color: #f28835;
}

#message .sp-message p{
	line-height: 2;
	font-size: 14px;
}

#message .sp-message img{
	margin-top: 30px;
}

/* ----------------------------------------------------------------
エスパルスと一緒に地域を盛り上げていきます!
----------------------------------------------------------------- */
#support {
	padding: 60px 0 60px 0;
	background: -moz-linear-gradient(top bottom, #f6aa0059 5%, #FFF 80%);
	background: -webkit-linear-gradient(top bottom, #f6aa0059 5%, #FFF 80%);
	background: linear-gradient(to bottom, #f6aa0059 5%, #FFF 80%);
}

#support .inner{
	width: 1060px;
	margin: 0 auto;
	text-align: center;
}

#support .inner h3{
	font-size: 36px;
	padding: 0 0 40px 0;
	display: inline-block;
	position: relative;
}

#support .inner h3::before {
	content: '';
	position: absolute;
	top: -100px;
	left: -155px;
	width: 181px;
	height: 231px;
	background: url(../img/pal.svg) 0 0 no-repeat;
	z-index: 1;
}

/* ---PC----*/
#support .inner .pcClass ul{
	display: flex;
	margin-bottom: 70px;
}

#support .inner .pcClass ul.left01 li.text,
#support .inner .pcClass ul.left02 li.text{
	padding: 145px 0 0 0;
	position: relative;
	width: 560px;
}

#support .inner .pcClass ul.left01 li.text p,
#support .inner .pcClass ul.left02 li.text p{
	padding: 0 50px 0 0;
}

#support .inner .pcClass ul.right li.text{
	padding: 120px 0 0 0;
	position: relative;
	width: 560px;
}

#support .inner .pcClass ul.right li.text p{
	padding: 0 20px 0 50px;
}

#support .inner .pcClass ul.left01 li.text h4{
	z-index: 10;
	width: 602px;
	height: 67px;
	position: absolute;
	top: 40px;
	left: 0px; 
}

#support .inner .pcClass ul.left02 li.text h4{
	z-index: 10;
	width: 556px;
	height: 67px;
	position: absolute;
	top: 20px;
	left: 0px; 
}

#support .inner .pcClass ul.right li.text h4{
	z-index: 10;
	width: 572px;
	height: 67px;
	position: absolute;
	top: 15px;
	right: 0px; 
}

#support .inner .pcClass ul li.img{
	width: 500px;
}

#support .inner .pcClass ul li img{
	width: 100%;
	display: block;
}
/* ---PC----*/

/* ---SP----*/

.inner .spClass ul {
	display: flex;
	flex-direction: column;
}

.inner .spClass ul li.img {
	width: 100%;
}

.inner .spClass ul li.img img {
	width: 100%;
}

.inner .spClass ul li.text {
	width: 100%;
	padding: 10px 0 25px 0;
}

.inner .spClass ul li.text h4 {
	width: 100%;
	margin-bottom: 10px;
}

.inner .spClass ul li.text p {
	line-height: 2;
	font-size: 14px;
}

/* ---SP----*/

/* ----------------------------------------------------------------
バナーエリア
----------------------------------------------------------------- */
#bnr-area {
	padding: 30px 0 60px 0;

}

#bnr-area .inner{
	max-width: 810px;
	width: 90%;
	margin: 0 auto;
}

#bnr-area .inner ul{
	display: flex;
	 flex-wrap: wrap;
	justify-content: space-between;
}

#bnr-area .inner ul li{
	width: 365px;
}

#bnr-area a:hover,
footer a:hover{
	opacity: 0.8;
	transition: .3s;
}

#bnr-area .inner ul li p{
	text-align: center;
	font-size: 20px;
	margin: 10px 0 20px 0;
	position: relative;
}

#bnr-area .inner ul li p::after {
	font-family: FontAwesome;
	content: '\f101';
	font-size: 25px;
	color: #000000;
	position: absolute;
	top: -5px;
	right: 50px;
	margin: auto;
	text-align: center;
}

#bnr-area .inner ul li img{
	width: 100%;
	display: block;
}

/* ----------------------------------------------------------------
フッター
----------------------------------------------------------------- */
footer {
	width: 100%;
	background-color: #EDEEEF;
}

footer .inner{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;	
	justify-content: space-between;
}

footer .inner #page_top{
	width: 70px;
	height: 70px;
	position: fixed;
	right: 60px;
	bottom: 200px;
	background-color: #000000;
	z-index: 1000;
}

footer .inner #page_top a{
	position: relative;
	display: block;
	width: 70px;
	height: 70px;
	text-decoration: none;
}

footer .inner #page_top a::before{
	font-family: FontAwesome;
	content: '\f176';
	font-size: 20px;
	color: #FFFFFF;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -25px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

footer .inner #page_top a::after{
	content: 'PAGE TOP';
	font-size: 10px;
	color: #FFFFFF;
	position: absolute;
	top: 38px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

footer p#copy{
	background-color: #231815;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	padding: 10px 0 10px 0;
}

footer .inner .logo-box{
	margin-right: 130px;
	width: 300px;
}

footer .inner .logo-box h5{
	width: 250px;
	height: 17px;
	margin-bottom: 10px;
}

footer .inner .logo-box ul{
	display: flex;
	justify-content: space-between;
}

footer .inner .logo-box ul.bnr{
	width: 228px;
}

footer .inner .logo-box ul.sb{
	width: 41px;
}

footer .inner .logo-box ul.bnr,
footer .inner .logo-box ul.sb{
	width: 100%;
	display: block;
}

footer .inner dl{
	font-size: 14px;
	margin-bottom: 20px;
}
footer .inner dl dt{
	font-weight: bold;
}

/* セミナーバナー
------------------------------------------------------------*/

a.Side_Banner {
 position: fixed;
 display: inline-block;
 transition: all .2s ease;
 z-index: 9999;
}

a.Side_Banner.right { right: -8px;}
a.Side_Banner.right:hover{ right: 0;}

a.Side_Banner.top1 { top: 180px; }



/* RESPONSIVE 設定
------------------------------------------------------------*/
@media screen and (max-width: 1024px){

/* ----------------------------------------------------------------
エスパルスと一緒に地域を盛り上げていきます!
----------------------------------------------------------------- */
#support .inner {
	width: 960px;
	margin: 0 auto;
	text-align: center;
}
}
/*------------------------------------------------------------*/
@media screen and (max-width: 896px)	{

.pcClass {
	display: none;
}
.spClass {
	display: block;
}

/* ----------------------------------------------------------------
メインビジュアル・ヘッダー
----------------------------------------------------------------- */
header nav {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

/* ----------------------------------------------------------------
代表メッセージ
----------------------------------------------------------------- */
 #message .inner .read p {
	padding: 0 0;
}

/* ----------------------------------------------------------------
エスパルスと一緒に地域を盛り上げていきます!
----------------------------------------------------------------- */
#support .inner{
	width: 90%;
}

#support .inner h3 {
	font-size: 32px;
	padding: 0 0 40px 60px;
}

#support .inner h3::before {
	top: -80px;
	left: -50px;
	width: 140px;
	height: 165px;
	background: url(../img/pal.svg) 0 0 no-repeat;
	z-index: 1;
}

#message .inner ul {
	padding: 20px 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#message .inner ul li.text,
#message .inner ul li.img{
	width: 100%;
}

#message .inner ul li.text h4 {
	margin: 10px 0 10px 0;
	font-size: 22px;
	padding-left: 35px;
	position: relative;
}

/* ----------------------------------------------------------------
バナーエリア
----------------------------------------------------------------- */
#bnr-area .inner ul{
justify-content: center;
}

#bnr-area .inner ul li p::after {
	top: -5px;
	right: 15px;
}

footer .inner .logo-box{
	margin-right: 0px;
	width: 300px;
} 
}

/*------------------------------------------------------------*/
@media screen and (max-width: 480px)/**スマホ用のCSS**/ {

.pcClass {
	display: none;
}
.spClass {
	display: block;
}

/* ----------------------------------------------------------------
メインビジュアル・ヘッダー
----------------------------------------------------------------- */
header nav h1 {
	left: 10px;
	width: 180px;
	height: 21px;
}

	header nav {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#main{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 0 0 70px 0;
	background-image: url(../img/main-bg-sp.png);
	height: auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ----------------------------------------------------------------
代表メッセージ
----------------------------------------------------------------- */
#message .inner .read p {
	padding: 0;
	margin: 40px 0;
}
	
#message .inner ul {
	padding: 20px 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#message .inner ul li.text,
#message .inner ul li.img{
	width: 100%;
}

#message .inner ul li.text h4 {
	margin: 10px 0 10px 0;
	font-size: 22px;
	padding-left: 40px;
	position: relative;
}

#message .inner ul li.text h4::before {
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 31px;
	height: 31px;
	background: url(../img/title-icon.svg) 0 0 no-repeat;
	z-index: 1;
}

/* ----------------------------------------------------------------
エスパルスと一緒に地域を盛り上げていきます!
----------------------------------------------------------------- */

#support .inner{
	width: 90%;
}

#support .inner h3 {
	font-size: 18px;
	padding: 0 0 20px 60px;
}

#support .inner h3::before {
	top: -60px;
	left: -15px;
	width: 100px;
	height: 118px;
	background: url(../img/pal.svg) 0 0 no-repeat;
	z-index: 1;
}

/* ----------------------------------------------------------------
バナーエリア
----------------------------------------------------------------- */

#bnr-area .inner ul{
justify-content: center;
}

#bnr-area .inner ul li p::after {
	top: -5px;
	right: 15px;
}

/* ----------------------------------------------------------------
フッター
----------------------------------------------------------------- */	
 
footer .inner{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;	
justify-content: center;
}

footer .inner #page_top {
	position: fixed;
	right: 10px;
	bottom: 320px;
}
	
footer .inner .logo-box {
	margin-right: 0;
	width: 300px;
}

/*セミナーバナー
------------------------------------------------------------*/
a.Side_Banner.top1 {
    top: 110px;
    right: -35px;
}
a.Side_Banner.right:hover{ right: -35px;}
a.Side_Banner img {
    width: 60%;
}

    
}
/*------------------------------------------------------------*/