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

.nav-top a {
	background-color: #5aaf94;
}

/* ==========================================================================
	MAIN
	========================================================================== */
.main {
  overflow: hidden;
	border-bottom: solid 20px #647661;
}

.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 {
	margin: 0px;
}
.main .slick-slide img {
	width: 100%;
}
.slider li {
	position: relative;
}
.slider li h2 {
	position: absolute;
	top: 20%;
	left: 50%;
	z-index: 1000;
	width: 200px;
	color: #fff;
	text-align: center;
	font-size: 3.5rem;
	line-height: 200%;
	margin-left: -100px;
}
.slider li h2 span {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  display: inline-block;
	text-align: left;
}

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

/*OGIYA*/

.ogiya-bg {
	background: url("../images/index-images/ogiya-bg.jpg") 50% 100% no-repeat;
  background-attachment: fixed;
}
.meetpia-bg {
	background: url("../images/index-images/meetpia-bg.jpg") 50% 100% no-repeat;
  background-attachment: fixed;
}
.meetpia-bg ul {
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}
.meetpia-bg ul li {
  width: 47%;
  font-size: 110%;
  text-align: center;
}
.meetpia-bg ul li a {
  display: block;
  color: #a52525;
}
.meetpia-bg ul li a img {
  display: block;
  margin-bottom: 20px;
}
.meetpia-bg ul li a span {
  display: block;
}
.meetpia-bg ul li a span:before {
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 10px;
}
.online-bg {
	background: url("../images/index-images/online-bg.jpg") 50% 100% no-repeat;
  background-attachment: fixed;
}


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

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


}


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

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

.slider li h2 {
	font-size: 3rem;
}

.ogiya-bg .tit-cmn01 {
	background: url("../images/index-images/ogiya-bg.jpg") 50% 100% no-repeat;
  background-size: 150%;
}
.meetpia-bg .tit-cmn01 {
	background: url("../images/index-images/meetpia-bg.jpg") 50% 100% no-repeat;
  background-size: 150%;
}
.online-bg .tit-cmn01 {
	background: url("../images/index-images/online-bg.jpg") 50% 100% no-repeat;
  background-size: 150%;
}

}

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

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

.main {
	border-bottom: solid 10px #647661;
}
.main .slider {
  width: 180%;
	margin: 0 auto 0 -90%;
}

.slider li h2 {
	top: 10%;
	width: 150px;
	font-size: 2.2rem;
	margin-left: -75px;
}
.slider li h2 span {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  display: inline-block;
	text-align: left;
}

/*OGIYA*/

.meetpia-bg ul {
  width: 100%;
}
.meetpia-bg ul li {
  float: none;
  width: 100%;
}
.meetpia-bg ul li:first-child {
  margin-bottom: 30px;
}
.meetpia-bg ul li a img {
  margin-bottom: 15px;
}
.meetpia-bg ul li a span:before {
	margin-right: 7px;
}
.meetpia-bg .txt-center {
  text-align: left;
}

}