@charset "UTF-8";

/* -------------------------------------------------

Opening

------------------------------------------------- */
.main_photo {
 position: relative;
}
.main_photo ul {
	list-style:none;
 width: 1240px;
	margin: 0 auto;
	position:relative;
}
.main_photo ul li {
	list-style:none;
}
.slider {
	width: 100%;
 height: 100%;
}
.slider li {
 width: 100%;
 height: 600px;
}
.slider span {
  display: block;
 	width: 100%;
  height: 100%;
		margin:0 auto !important;
  background: no-repeat right bottom/cover;
}
.slider span.hero1 {
  background-image:	url("../images/DSC07833s.jpg");
}
@media screen and (min-width: 899px) and (max-width: 1260px) {
.main_photo ul {
 width: 100%;
}
.slider li {
 height: 500px;
}
.slider span {
  background: no-repeat right center/cover;
}
}
@media screen and (max-width: 898px)  {
.main_photo {
	margin: 0px auto;
}
.main_photo ul {
 width: 100%;
}
.slider li {
 height: 500px;
}
.slider span {
  background: no-repeat right center/cover;
}
}
@media screen and (max-width: 768px)  {
.slider li {
 height: 380px;
 overflow: hidden;
}
.slider span {
}
.slider span.hero1 {
  /*background-image:	url(../images/main_img01_sp.jpg);*/
}
}
@media screen and (max-width: 480px)  {
.slider li {
 height: 300px;
}
}


/* -------------------------------------------------

TopIntro

------------------------------------------------- */
.TopIntro_wrp	{
 width: 100%;
 margin: 50px auto 40px;
	position: relative;
}
.TopIntroduction	{
 width: 980px;
	margin:0px	auto;
	position: relative;
}
.TopIntroduction > p	{
	font-size: 1.6rem;
	margin:0;
	padding:0;
	line-height:2.2;
}
@media screen and (min-width: 899px) and (max-width: 1140px) {
.TopIntroduction	{
 width: 90%;
}
}
@media screen and (max-width: 898px)  {
.TopIntroduction	{
 width: 90%;
}
}
@media screen and (max-width: 768px)  {
.TopIntro_wrp	{
 margin: 40px auto;
}
.TopIntroduction > p	{
	line-height:2;
	font-size: 1.4rem;
}
}
@media screen and (max-width: 568px)  {
.TopIntro_wrp	{
 margin: 40px auto 20px;
}
}


/* -------------------------------------------------

TopGallery

------------------------------------------------- */
.TopGallery_wrp	{
 width: 100%;
}
.TopGallery_wrp::after {
 content: "";
 display: block;
 clear: both;
}
.TopGallery_wrp section	{
	margin: 0 auto;
 display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	padding: 0 0 40px;
}
.TopGallery_wrp section h2	{
	font-weight: 300;
	font-size:4rem;
	position:relative;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px solid #777;
}
@media screen and (max-width: 768px)  {
.TopGallery_wrp section	{
	padding: 0 0 0px;
}
.TopGallery_wrp section h2	{
	font-size:3rem;
}
}
@media screen and (max-width: 480px)  {
.TopGallery_wrp section h2	{
	font-size:2.6rem;
}
}

.gallery {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:100%;
  margin:0 auto;
}
.gallery img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  /*height:auto;*/
  height: 25vw;
  object-fit: cover;
}
@media screen and (max-width: 768px)  {
.gallery img {
 height: 50vw;
}
}
@media screen and (max-width: 480px)  {
.gallery img {
 height: 100vw;
}
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.gallery .slick-slide {
    /*margin:0 10px;*/
  margin:0;
}

/*矢印の設定*/


/*ドットナビゲーションの設定*/
.slick-dots {
 /*text-align:center !important;
	margin:20px 0 0 0;*/
}
@media screen and (max-width: 480px)  {
.slick-dots {
/*width: 97% !important;*/
	padding: 0 10px !important;
	/*margin:0 auto !important;*/
}
}


/* -------------------------------------------------

TopSystem

------------------------------------------------- */
.TopSystem_wrp	{
 width: 100%;
}
.TopSystem_wrp section	{
 width: 1140px;
	margin: 0 auto;
 display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	padding: 40px 0;
}
.TopSystem_wrp section h2	{
	font-weight: 300;
	/*font-size:3.2rem;*/
	font-size:4rem;
	position:relative;
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #777;
}
.TopSystem_inner {
 width: 100%;
 display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.TopSystem_inner > div {
 width: calc(20% - 15px);
 margin:0 15px 0px 0;
	padding: 0;
	position: relative;
	background-color: #ffffff;
	border: 1px solid #ccc;
}
.TopSystem_inner > div:nth-child(5n) {
 margin:0;
}
.TopSystem_inner .title	{
	font-weight: 300;
	font-size:1.8rem;
	color: #777777;
	position:relative;
	text-align: center;
	padding: 15px 0;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0px;
}
.TopSystem_inner .title span	{
	font-size:1.2rem;
	/*color: #FFE500;*/
	display: block;
}
.TopSystem_inner p	{
	font-weight: 300;
	font-size:1.2rem;
	line-height: 1.6;
	padding: 20px;
}
@media screen and (min-width:1141px) and (max-width: 1260px) {
.TopSystem_wrp section	{
 width: 90%;
}
}
@media screen and (min-width:899px) and (max-width: 1140px) {
.TopSystem_wrp section	{
 width: 90%;
}
.TopSystem_inner {
	flex-flow: row wrap;
	justify-content: center;
}
.TopSystem_inner > div {
 width: calc(33.3333% - 15px);
 margin:0 15px 15px 0;
	padding: 0;
	position: relative;
	background-color: #ffffff;
}
.TopSystem_inner > div:nth-child(3n) {
 margin:0 0 15px;
}
.TopSystem_inner > div:nth-child(5n) {
 margin:0 0 15px;
}
}
@media screen and (max-width: 898px)  {
.TopSystem_wrp section	{
 width: 90%;
	padding: 40px 0 0;
}
.TopSystem_inner {
	flex-flow: row wrap;
	justify-content: center;
}
.TopSystem_inner > div {
 width: calc(33.3333% - 15px);
 margin:0 15px 15px 0;
	padding: 0;
	position: relative;
	background-color: #ffffff;
}
.TopSystem_inner > div:nth-child(3n) {
 margin:0 0 15px;
}
.TopSystem_inner > div:nth-child(5n) {
 margin:0 0 15px;
}
}
@media screen and (max-width: 768px)  {
/*.TopSystem_wrp section	{
	padding: 40px 0;
}*/
.TopSystem_wrp section h2	{
	font-size:2.8rem;
	margin-bottom: 30px;
}
.TopSystem_wrp section	{
 width: 90%;
}
.TopSystem_inner {
	flex-flow: row wrap;
	justify-content: center;
}
.TopSystem_inner > div {
 width: calc(50% - 15px);
 margin:0 15px 15px 0;
	padding: 0;
	position: relative;
	background-color: #ffffff;
}
.TopSystem_inner > div:nth-child(2n),
.TopSystem_inner > div:nth-child(4n) 	{
 margin:0 0 15px;
}
.TopSystem_inner > div:nth-child(3n) {
 margin:0 15px 15px 0;
}
.TopSystem_inner > div:nth-child(5n) {
 margin:0 0 15px;
}
.TopSystem_inner .title	{
	font-size:1.6rem;
	padding: 15px 0;
}
.TopSystem_inner .title span	{
	font-size:1.1rem;
}
.TopSystem_inner p	{
	/*font-size:1.4rem;*/
	line-height: 1.6;
	padding: 10px;
}
}
@media screen and (max-width: 480px)  {
.TopSystem_wrp section h2	{
	font-size:2.2rem;
}
.TopSystem_inner {
	flex-flow: column wrap;
}
.TopSystem_inner > div {
 width: 100%;
 margin:0 0 15px;
}
}


/* -------------------------------------------------

other

------------------------------------------------- */
.bg	{
	width:100%;
	padding:60px 0 80px;
	margin:0;
	background-color: #f5f1f1;
}
.line	{
	width:100%;
	border-bottom:1px solid #999;
}
@media screen and (max-width: 768px)  {
.bg	{
	padding:40px 0 60px;
}
}
@media screen and (max-width: 480px)  {
.bg	{
	padding:20px 0 40px;
}
}