@charset "utf-8";

/* ==========================================================================
   共通
	========================================================================== */
h2{
	text-align: center;
  font-weight: normal;
  font-size: 35px;
	position: relative;
}

.news, .vision, .company, .contact{
	background: #fff;
	padding: 60px 0 40px;
  margin-bottom: 100px;
}

.btn{
	background: #004cc7;
	color: #fff;
  width: 220px;
  height: 50px;
	position: relative;
	border-bottom: solid 4px #002c73;
	margin: 50px auto 10px;
}

.btn img{
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
	margin-left: 70px;
}

.btn p{
	position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 235px;
  text-align: center;
  margin: 0;
}

section{
	box-shadow: 0px 5px 33px -15px #000;
}

.inner{
	text-align: center;
}
/*  SP
  ========================================================================== */
@media only screen and (max-width: 768px) {
	h2{
		font-size: 4.6vw;
	}
	
.news, .vision, .company, .contact{
	padding: 20px 3% 40px;
	margin: 50px 0 100px;
	overflow: hidden;
}

}

@media only screen and (max-width: 480px){
	h2{
		font-size: 6vw;
	}
}
/* ==========================================================================
   MV
	========================================================================== */
.mv{
	background: url(/img/mv.jpg)no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
	padding-top: 60px;
  padding: 6vw 0;
}

.h1wrap{
	text-align: center;
	overflow: hidden;
}

h1{
	margin: 0;
	padding: 10px 0 0;
  font-size: 60px;
	font-size: 3.15vw;
	position: relative;
	-moz-text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 30px rgba(255, 255, 255, 1), 0px 0px 40px rgba(255, 255, 255, 1);
	-webkit-text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 30px rgba(255, 255, 255, 1), 0px 0px 40px rgba(255, 255, 255, 1);
	-ms-text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 30px rgba(255, 255, 255, 1), 0px 0px 40px rgba(255, 255, 255, 1);
	text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 30px rgba(255, 255, 255, 1), 0px 0px 40px rgba(255, 255, 255, 1);
}

.mv_txt{
	background: rgba(83,83,83,0.55);
	padding: 20px 35px;
  margin-top: 25px;
	text-align: left;
}

.mv_txt p{
	color: #fff;
	font-size: 18px;
}

@media only screen and (max-width: 1360px){
	h1{
		font-size: 3.6vw;
	}
	
	.mv_txt p{
		font-size: 1.35vw;
	}
}

.h1wrap h1, img{
	display: inline-block;
}

.mv_left{
	position: absolute;
	width: 68%;
	left: -72%;
  top: -1%;
}

.mv_right{
	position: absolute;
	width: 68%;
	left: 102%;
  top: -1%;
}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 768px) {
h1{
	font-size: 5.3vw;
	line-height: 50px;
  margin-bottom: 20px;
}

.mv{
	background: none;
	padding: 0;
	height: 100%;
  margin-bottom: 100px;
}

.mv_txt{
	background: #fff;
	padding: 23px 3%;
  margin-top: 0px;
}

.mv_txt p{
	color: #000;
	font-size: 16px;
  margin: 0.5em;
}

.mv_left{
	left: -184%;
  top: -1%;
}

.mv_right{
	left: 109%;
  top: -1%;
}

.h1wrap{
	padding: 70px 0;
	background: url(/img/mv_sp.jpg)no-repeat center;
  background-size: cover;
}

}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 480px) {
	h1{
		font-size: 10vw;
	}
	
.mv_left{
	left: -65%;
  top: -55%;
  width: 100%;
}

.mv_right{
	left: 66%;
  top: 105%;
  width: 100%;
}

}

/* ==========================================================================
   btn_area
	========================================================================== */
.btn_area{
	box-shadow: none;
  max-width: 960px;
  width: 100%;
  margin: 40px auto;
}

.sec_btn{
	background: #004cc7;
  display: inline-block;
  width: 235px;
  height: 55px;
	position: relative;
	border-bottom: solid 4px #002c73;
	box-shadow: 0px 2px 10px -3px #000;
}

.sec_btn img{
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
	margin-left: 200px;
}

.sec_btn p{
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	width: 235px;
	text-align: center;
	margin: 0
}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 768px) {
.btn_area {
  margin: 25px auto;
}

.sec_btn {
  width: 180px;
	height: 45px;
}

.sec_btn p {
  font-size: 16px;
	width: 130px;
}

.sec_btn img {
	margin-left: 64px;
  width: 23px;
  height: 23px;
}

}

/* ==========================================================================
   お知らせ
	========================================================================== */
.news_left{
	position: absolute;
	top: -63%;
  left: -51%;
}

.news_right{
	position: absolute;
	top: -63%;
  left: 60%;
}

.article{
	position: relative;
	border-top: solid 1px #c9c9c9;
}

.article:first-child{
	border-top: solid 2px #c9c9c9;
}

.article:last-child{
	border-bottom: solid 2px #c9c9c9;
}

.date{
	float: left;
	padding: 1em 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 140px;
	color: #004cc7;
}

.ar_txt{
	padding: 1em 80px 1em 80px;
	text-align: left;
}

.indate{
	color: #004cc7;
}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 768px) {
.news_left{
	top: -38%;
  left: -62%;
	width: 100%;
}

.news_right{
	top: -38%;
  left: 62%;
	width: 100%;
}

.date{
	float: none;
  top: 0;
  transform: none;
  margin-left: 0;
}

.ar_txt {
    padding: 3em 0 1em 0;
}

}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 480px) {
.news_left{
	top: -20%;
  left: -67%;
	width: 100%;
}

.news_right{
	top: -20%;
  left: 67%;
	width: 100%;
}

}

/* ==========================================================================
   加盟屋外ビジョン
	========================================================================== */
.vision_left{
	position: absolute;
	top: -63%;
  left: -60%;
}

.vision_right{
	position: absolute;
	top: -63%;
  left: 69%;
}

	/*  loopSlider  */
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 200px;
    overflow: hidden;
    position: absolute;
}

.loopSlider {
    margin: 0 auto;
    height: 200px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.loopSlider ul {
    height: 200px;
    float: left;
    overflow: hidden;
		padding: 0;
}

.loopSlider ul li {
    width: 322px;
    height: 200px;
    float: left;
    display: inline;
    overflow: hidden;
}

/*  CLEARFIX ELEMENTS */
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*  SP
	========================================================================== */
@media only screen and (max-width: 768px) {
.vision_left{
	top: -40%;
  left: -74%;
  width: 100%;
}

.vision_right{
	top: -40%;
  left: 74%;
  width: 100%;
}

}

/*  SP
  ========================================================================== */
@media only screen and (max-width: 480px) {
.vision_left{
	top: -20%;
  left: -78%;
	width: 100%;
}

.vision_right{
	top: -20%;
  left: 78%;
	width: 100%;
}

}

/* ==========================================================================
   加盟各社
	========================================================================== */
.company_left{
	position: absolute;
	top: -63%;
  left: -52%;
}

.company_right{
	position: absolute;
	top: -63%;
  left: 62%;
}

.company_list{
	list-style: none;
	text-align: center;
  padding: 0;
}

/*  SP
	========================================================================== */
@media only screen and (max-width: 768px) {
.company_left{
	top: -40%;
  left: -66%;
  width: 100%;
}

.company_right{
	top: -40%;
  left: 66%;
  width: 100%;
}

}

/*  SP
	========================================================================== */
@media only screen and (max-width: 480px) {
.company_left{
	top: -20%;
  left: -66%;
  width: 100%;
}

.company_right{
	top: -20%;
  left: 66%;
  width: 100%;
}

}

/* ==========================================================================
   お問い合わせ
	========================================================================== */
.contact_left{
	position: absolute;
	top: -63%;
  left: -56%;
}

.contact_right{
	position: absolute;
	top: -63%;
  left: 65%;
}

.mail p a{
	color: #000;
}

.mail p a::before{
	content: url(../img/mail.png);
	margin-right: 25px;
	display: inline-block;
	vertical-align: middle;
}

	/*  SP
	  ========================================================================== */
	@media only screen and (max-width: 768px) {
/*
.mail p::before{
	content: url(../img/mail.png);
	margin-right: 25px;
	display: block;
	vertical-align: middle;
}
*/

.contact_left{
	top: -40%;
  left: -70%;
  width: 100%;
}

.contact_right{
	top: -40%;
  left: 70%;
  width: 100%;
}

}


/*  SP
	========================================================================== */
@media only screen and (max-width: 768px) {
.contact_left{
	top: -45%;
  left: -70%;
  width: 100%;
}

.contact_right{
	top: -45%;
  left: 70%;
	width: 100%;
}

}

@media only screen and (max-width: 480px) {
.contact_left{
	top: -20%;
  left: -72%;
  width: 100%;
}

.contact_right{
	top: -20%;
  left: 72%;
	width: 100%;
}

}