@charset "utf-8";

.main-slide {
    position: relative;
    padding: 50px 0 0 0;
}

.main-slide,.slide-wrap {
    /* width: 100vw; */
    /* height: 100vh; */
}

.left-slide {
    
}

.left-slide img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

.left-slide {
	position: relative;
	overflow: hidden;
}

.sample_animation .a-text{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	color:#FFF;
	font-size:35px;
	opacity: 0;
	transform:translate(0, -60%);
	animation-name: sampleanimation;
	animation-duration: 5s;
	animation-fill-mode: both;
}

.sample_animation .a-text.a02{
	animation-delay: 5s;
}
.sample_animation .a-text.a03{
	animation-delay: 10s;
}
.sample_animation .a-text.a04{
	animation-delay: 15s;
}
.sample_animation .a-text.a05{
	animation-delay: 20s;
}
.sample_animation .a-text.a06{
	animation-delay: 25s;
}
.sample_animation .a-text.a07{
	animation-delay: 30s;
}
.sample_animation .a-text.a08{
	animation-delay: 35s;
}
.sample_animation .a-text.a09{
	animation-delay: 40s;
}

.sample_animation .a-text.a10{
	animation-delay: 45s;
}

.sample_animation .a-text.a11{
	animation-delay: 50s;
}

.sample_animation .a-text.a12{
	animation-delay: 55s;
}

@keyframes sampleanimation {
	0% {
		opacity: 0;
		transform:translate(0, 60%);
	}
	30% {
		opacity: 1;
		transform:translate(0, 0%);
	}
	70% {
		opacity: 1;
		transform:translate(0, 0%);
	}
	100% {
		opacity: 0;
		transform:translate(0, -60%);
	}
}

.override img {
    width: 31%;
    max-width: 418px;
}

.news{
  width: 100%;
  float: left;
}

.news-box {
    width: 100%;
    float: left;
    padding: 95px 0;
    background: #f5f4f2;
}

.news-list-box {
    width: 100%;
    float: left;
}

ul.news-list {
    max-width: 1200px;
    margin: 60px auto 0;
    overflow: hidden;
    width: 90%;
}


ul.news-list li {
    width: 33%;
    float: left;
    border-right: 1px solid #fcc800;
    padding: 10px 30px;
}

ul.news-list li:nth-child(3) {
    border-right: none;
}

ul.news-list li:first-child {
    padding: 10px 30px 10px 0;
}

ul.news-list li a {
    display: block;
}

ul.news-list li:last-child {
    border: none;
}

.news-list figure {
    width: 25%;
    float: left;
    margin: 0;
}

.lilst-text {
    width: 75%;
    float: left;
    padding: 0 0 0 20px;
    color: #5c5c5c;
}

time {
    font-size: 14px;
}

p.title {
    width: 100%;
    float: left;
}

.news-all {
    position: absolute;
    right: 140px;
    top: 100px;
}

a.under-r {
    color: #5c5c5c;
    font-size: 16px;
}

a.under-r:after {
    content: "";
    width: 25px;
    height: 1px;
    background: #5c5c5c;
    position: absolute;
    bottom: -3px;
    right: 0;
}

a.under-r:hover {
    color: #fcc800;
}

.content {
    width: 100%;
    float: left;
}

.box01,.box02,.box03 {
    margin: 95px auto 0;
    max-width: 1260px;
    width: 95%;
    position: relative;
}

.box-inner {
    width: 100%;
    float: left;
}

.box01 .pic-box {
    width: 70%;
    float: left;
    position: relative;
}

.box01 .pic-box img {
    float: right;
    position: relative;
    z-index: 1;
    right: 40px;
}

.box01 .pic-box:after {
    width: 100%;
    float: left;
    position: absolute;
    bottom: -40px;
    height: 50%;
    background: #ffe076;
    display: block;
    content: "";
    z-index: 0;
    right: 0;
}

.content-text {
    width: 30%;
    float: left;
    padding: 40px 3% 0;
}

.content-heading {
    width: 100%;
    float: left;
    font-weight: 500;
    color: #636363;
    position: relative;
    font-size: 32px;
    line-height: 32px;
}

.content-heading:after {
    position: absolute;
    content: "";
    width: 20px;
    display: block;
    bottom: -10px;
    height: 1px;
    background: #636363;
}

.content-text p {
    width: 100%;
    float: left;
    margin: 40px auto 0;
    line-height: 1.8;
    color: #5c5c5c;
}

.box-wrap {
    width: 97.5%;
    float: left;
    position: relative;
}

.box02 {
    margin: 140px auto 0;
}

.box02 .pic-box {
    width: 70%;
    margin: 40px auto 0;
    z-index: 1;
    position: absolute;
    float: right;
    right: 0;
}
.box-wrap:nth-child(odd) .box02 .pic-box {
    right: auto;
}

.box02 .content-text {
    border: 1px solid #fdd333;
    padding: 80px 50px;
    position: relative;
    z-index: 0;
    width: 400px;
}

.box02 .content-text.even {
    float: right;
}

.box-wrap.back-y {
    margin: 0 1.5rem;
    position: relative;
}

section.beginner,.recruit {
    width: 100%;
    float: left;
    background: url(../img/top/b-mark.png) 98% 190% no-repeat #ffe076;
    margin: 95px auto 0;
}

section.beginner {
    margin: 165px auto 0;
}

.box03 {
    max-width: 1280px;
    margin: 40px auto;
	overflow: hidden;
}


.box03 .pic-box {
    width: 66%;
}

.box03 .content-text{
    width:34%;
}

h1.beginner {
    position: absolute;
    bottom: 51px;
    right: 100px;
    font-size: 37px;
    text-align: left;
    z-index: 1;
    line-height: 1;
    letter-spacing: 5px;
    color: #fcc800;
    font-family: 'Share Tech', sans-serif;
}

.box03 .link a {
    color: #fff;
    border-color: #fff;
}
.recruit{
  background: none;
}

.recruit-back {
    background: url(../img/top/recruit02.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    float: left;
    height: 556px;
}

.box04 {
    width: 100%;
    float: left;
    margin: 40px auto 0;
}

.center-text {
    max-width: 477px;
    margin: auto;
    text-align: center;
}

.center-text p {
    width: 100%;
    float: left;
    margin: 40px auto 0;
    color: #5c5c5c;
}

.center-text .link a {
    margin: auto;
}

h1.r-left,h1.r-right {
    font-family: 'Share Tech', sans-serif;
    font-size: 6vw;
    color: #fff;
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    margin: 0 auto;
    line-height: 1;
    letter-spacing: 8px;
    width: 100%;
}

h1.r-right {
    left: auto;
    right: 310px;
    text-align: right;
}

h1.r-left {
    left: 226px;
}

#access {
    width: 100%;
    float: left;
    margin: 95px auto 0;
}

.top-access-box {
    width: 97.5%;
    margin: auto;
    margin: 0 1.5%;
    position: relative;
    overflow: hidden;
}

.access-box-inner {
    width: 90%;
    max-width: 1260px;
    margin: auto;
    overflow: hidden;
    }

.access-detail {
    width: 35%;
    float: left;
    padding: 0 4% 0 0;
}

.access-map {
    width: 65%;
    height: 596px;
    float: left;
}

.access-detail h2 {
    width: 100%;
    float: left;
}

.access-detail p {
    width:100%;
    float:left;
    margin:20px auto 0;
}

.bg-gray {
    width: 100%;
    float: left;
    background: #f5f4f2;
    margin: 20px auto 0;
    padding: 15px;
}

.access-detail .logo {
    position: relative;
	width: 100%;
}

.bg-gray h6 {
    font-size: 17px;
    color: #9b9b9b;
    font-weight: 500;
}

.bg-gray .small {
    margin: 5px auto 0;
    font-size: 15px;
    color: #636363;
}

.strong {
    line-height: 1;
    width: 100%;
    float: left;
    margin: 30px auto 0;
    font-size: 16px;
    font-weight: 600;
    color: #5c5c5c;
}

.access-detail .tel,.week-sche {
    margin: 10px auto 0;
    width: 100%;
    float: left;
}

.access-detail .tel a {
    color: #5c5c5c;
    font-size: 20px;
    line-height: 1;
}

.access-detail .tel a strong {
    font-size: 32px;
}

.access-detail .contact {
    max-width: 320px;
    float: left;
    width: 90%;
    margin: 10px auto 0;
}

.access-detail .otr {
    text-align: left;
    padding: 0 0 0 63px;
}

address {
    width: 100%;
    float: left;
    font-style: normal;
    color: #5c5c5c;
    margin: 10px auto 0;
}

.text-muted {
    width: 100%;
    float: left;
    font-size: 15px;
    margin: 5px auto 0;
    color: #a1a1a1;
}
@media (max-width: 1330px) {
.sample_animation .a-text{
	font-size:25px;
}

.box02 .content-text {
    width: 32%;
}

}

@media (max-width: 1260px) {

section.beginner {
    margin: 95px auto 0;
}

}

@media (max-width: 1195px) {
.box01 .pic-box img {
    width: 90%;
    top: -20px;
}
}

@media (max-width: 1023px) {
.access-detail .tel a strong {
    font-size: 32px;
}


}

@media (max-width: 991px) {

.main-slide {
    padding: 30px 0 0 0;
}

.news-box {
    padding: 35px 0;
}

.box01 .pic-box {
    width: 60%;
}

.content-text {
    width: 40%;
    padding: 40px 0 0 3%;
}

.box02 {
    margin: 60px auto 0;
}

.box02 .content-text {
    padding: 5%;
    width: 44%;
    overflow: hidden;
}

.box02 .pic-box {
    width: 60%;
}

.box03 .content-text {
    padding: 40px 3% 0;
}

.content-heading {
    font-size: 28px;
    line-height: 28px;
}

.sample_animation h4 {
    font-size: 16px;
}

section.beginner{
    background: url(../img/top/b-mark.png) -70px no-repeat #ffe076;
}

h1.beginner {
    bottom: 0px;
    right: 0;
    font-size: 33px;
}

h1.r-left {
    left: 0;
}

h1.r-right {
    right: 0;
}

.access-detail h2 {
    width: 100%;
}

.access-detail .tel a strong {
    font-size: 24px;
}

.access-detail .tel a {
   font-size: 20px;
}

.sample_animation .a-text {
    font-size: 19px;
}

.recruit-back {
    height: 433px;
}

}

@media (max-width: 767px) {
.left-slide, #right-slide {
    width: 100%;
}

.override img {
    width: 64%;
}

.news-box {
    padding: 30px 0;
}

.name-heading {
    font-size: 24px;
    line-height: 1;
}

.name-heading span {
    font-size: 14px;
    line-height: 1;
}


ul.news-list {
    margin: 40px auto 0;
}

ul.news-list li:first-child {
    padding: 0 0 15px 0;
}

ul.news-list li {
    width: 100%;
    border-right: none;
    padding: 15px 0;
    border-bottom: 1px solid #fcc800;
}

ul.news-list li:last-child {
    border-bottom: 1px solid #fcc800;
}

.news-all {
    right: 6%;
    top: 7%;
}

.box01 .pic-box {
    width: 100%;
}

.box01 .pic-box img {
    top: -40px;
}

.box01 .pic-box:after {
    bottom: 0;
}

.box-wrap {
    width: 100%;
}

.content-text {
    width: 100%;
    padding: 0;
    margin: 30px auto 0;
}

.box02 ,section.beginner, .recruit {
    margin: 60px auto 0;
} 

.box02 .pic-box {
    width: 100%;
    margin: 0 auto;
	position: relative;
}

.box02 .content-text {
    width: 100%;
    position: relative;
    padding: 20px;
}

.content-heading {
    font-size: 24px;
    line-height: 1;
}

.box03 .pic-box,.box03 .content-text {
    width: 100%;
}


section.beginner {
    background: url(../img/top/b-mark.png) 10% 90% no-repeat #ffe076;
	margin: 60px auto 0;
}

.box-wrap.back-y {
    padding: 0 1.5rem;
	margin: 0;
}

h1.beginner {
    bottom: auto;
    right: 0;
    font-size: 28px;
    top: 27px;
}

.recruit-back {
    height: 286px;
}

h1.r-left, h1.r-right {
    font-size: 11vw;
    top: 47%;
}

.access-detail {
    width: 100%;
    padding: 0;
}

.access-detail .time, .access-detail .text-muted {
    font-size: 16px;
}

.access-map {
    width: 100%;
    height: 400px;
    float: left;
    margin: 40px auto 0;
}


}

@media (max-width: 500px) {

.news-all {
    right: 3%;
    top: 21%;
}

.box-wrap.back-y,main {
    padding: 0 1rem;
}

.box01, .box02, .box03,.box03 .pic-box {
    width: 100%;
}


.content-text {
    margin: 0 auto;
}

.box01 .content-text {
    margin: 30px auto 0;
}

.box03 .content-text {
    width: 100%;
    margin: 20px auto 0;
}



}