@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

/* ==========================================================================
	MAIN
	========================================================================== */
.main {
	position: relative;
  overflow: hidden;
	text-align: left;
  margin-bottom: 80px!important;
}
.main .main-txt {
  position: absolute;
  z-index: 1000;
  bottom: 20%;
  left: 50px;
  width: 50%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 4rem;
	line-height: 100%;
}
.main .main-txt span {
	display: inline-block;
	background-color: #fff;
	padding: 5px;
	margin-bottom: 10px;
}
.main .slick-slider li {
  font-size: 0!important;
  vertical-align: bottom;
}
.main .slider {
	position: relative;
	width: 100%;
	left: 50%;
	margin: 0 auto 0 -50%;
}
.main .slick-slide img {
	width: 100%;
}


/* ==========================================================================
	CONTENTS
	========================================================================== */

.bn li {
	height: 430px;
	background-color: #5f93c3;
}
.bn ul {
	max-width: 1900px;
	margin: 0 auto;
}
.bn li a {
  overflow: hidden;
	display: block;
	height: 430px;
	color: #fff;
	box-sizing: border-box;
	padding-top: 100px;
}
.bn li a .tit {
  position: relative;
  z-index: 1000;
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.8rem;
	font-weight: 900;
	margin-bottom: 50px;
}
.bn li a .tit:after {
  position: relative;
  z-index: 1000;
	content: "";
	display: block;
	width: 100px;
	height: 2px;
	background-color: #fff;
	margin: 30px auto 0 auto;
}
.bn li a i {
  position: relative;
  z-index: 1000;
	display: block;
	font-size: 2rem;
	margin-bottom: 30px;
}
.bn li a .txt {
  position: relative;
  z-index: 1000;
}

.bn li:first-child {
	border-right: solid 3px #fff;
}
.bn li:first-child a:after {
position: absolute;
opacity: .3;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
	background: url("../images/index-images/bn01.jpg") 50% 50% no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.bn li:last-child a:after {
position: absolute;
opacity: .3;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
	background: url("../images/index-images/bn02.jpg") 50% 50% no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.bn li a:hover:after {
opacity: .6;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

.bn li a {
position: relative;
}
.maker {
	background-color: #f0f0f0;
	padding: 40px 0;
}
.maker h2 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	text-align: center;
}
.maker h2:before {
	content: "-";
	margin-right: 5px;
}
.maker h2:after {
	content: "-";
	margin-left: 5px;
}
.maker li {
	border: solid 2px #cecece;
	margin-bottom: 2%;
}

/* ==========================================================================
	PC 1025px -
	========================================================================== */

@media screen and (min-width: 1025px){


}


/* ==========================================================================
	TABLET - 1024px
	========================================================================== */

@media screen and (max-width:1024px){

.main {
  margin-bottom: 60px!important;
}
.main .main-txt {
	font-size: 3rem;
}
.main .slider {
	width: 150%;
	margin: 0 auto 0 -75%;
}

.bn li {
	height: 330px;
}
.bn li a {
	height: 330px;
	padding: 50px 0 0 0;
}
.bn li a .tit {
	font-size: 2.4rem;
	margin-bottom: 30px;
}
.bn li a i {
	margin-bottom: 30px;
}

.maker h2 {
	font-size: 2rem;
}
}

/* ==========================================================================
	SP - 640px
	========================================================================== */

@media screen and (max-width: 640px) {

.main {
  margin-bottom: 40px!important;
}
.main .main-txt {
  left: 10px;
  width: 100%;
	font-size: 2rem;
}
.main .slider {
	width: 180%;
	margin: 0 auto 0 -90%;
}

.bn ul {
  width: 100%;
}
.bn li {
  display: table;
  table-layout: fixed;
  float: none;
  width: 100%;
	height: 270px;
}
.bn li a {
  display: table-cell;
  vertical-align: middle;
	height: 270px;
	padding: 0;
}
.bn li a .tit {
	font-size: 2rem;
	margin-bottom: 20px;
}
.bn li a .tit:after {
	width: 60px;
	margin: 20px auto 0 auto;
}
.bn li a i {
	font-size: 1.7rem;
	margin-bottom: 20px;
}
.bn li a .txt {
  display: block;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.bn li:first-child {
	border-right: none;
	border-bottom: solid 3px #fff;
}

.maker {
	padding: 30px 0;
}
.maker h2 {
  font-size: 1.8rem;
}
.maker ul {
  width: 103%;
}
.maker li {
  width: 47%;
  margin: 0 3% 3% 0;
}

}