@charset "UTF-8";
/* CSS Document */

.body{
	background-color: #37474F;
}
.main {
  padding-bottom: 150px;
}
@media(min-width:1200px) {
  .main {
    padding-bottom: 200px;
  }
}

.section-top {
  margin-bottom: 100px;
}
.section-top__image {
  height: 500px;
  background-image: url("../images/about/about.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 100px;
  position: relative;
}


@media(max-width: 960px) {
	.sectio-top{
		margin-bottom: 80px;
	}
	.section-top__image{
		height: 236px;
	}
}

.section-top__rogo{
	width: auto;
	height: 58px;
}

@media(max-width: 960px){
	.section-top__rogo{
	    width: auto;
		height: 40px;
	}
}

.section-about__message{
	display: inline-flex;
	height: 476px;
	margin-bottom: 200px;
	position: relative;
	font-size: 14px;
	text-align: left;
}
 /*アニメーション*/
.section-about{
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 2s, visibility 2s, transform 2s;
}
.now-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.section-series__image{
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px
}
.line-image2{
	background-image: url('../images/about/line2.png');
	width: 100%;
	height: 260px;
}
.section-about__message p{
	display: block;
	line-height: 40px;
	padding-right: 200px;
	padding-top: 30px;
}
@media(max-width: 960px){
	.section-series__image{
		background-attachment: local;
		margin-bottom: 70px;
	}
	.line-image2{
		height: 150px;
	}
	.section-about__message{
		display: inline-block;
	}
	.section-about__message p{
		font-size: 14px;
		line-height: 48px;
		padding: 0 30px 70px;
		margin: 0 auto;
		position: relative;
	}
	.section-about__image{
	    height: 378px;
		margin: 0 auto;
		position: absolute;
		bottom: auto;
		left: 50%;
        transform: translateX(-50%);
    }
}

.section-series img{
	width: 100%;
	height: 390px;
	object-fit: cover;
	padding-bottom: 100px
}
.section-series p{
	font-size: 26px;
	position: relative;
	display: inline-flex;
	margin-bottom: 5em;
}
.section-series p:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;/*線の上下位置*/
  display: inline-block;
  width: 22px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #FFFFFF;/*線の色*/
}
@media(max-width: 960px){
	.section-series{
		padding-top: 450px;
	}
	.section-series img{
	    height: 300px;
	}
	.section-series p{
		font-size: 22px;
		margin-bottom:100px;
	}
}
.section-souhou{
	padding-bottom: 40px;
	}
.section-kaku{
	padding-bottom: 80px;
    }
.section-souhou__main-image,.section-kaku__main-image{
		height: 100%;
		width: 272px;
		object-fit: cover;
	}
.section-souhou__description h3,.section-kaku__description h3{
		font-size: 18px;
		font-weight: 600;
		padding: 34px 0 40px;
	}
.section-souhou__description p,.section-kaku__description p{
		font-size: 14px;
	    line-height: 30px;
	}	
.section-souhou__description,.section-kaku__description{
		text-align: center;
    }  

/*フェードインアニメーション*/
.section-souhou__main-image,.section-kaku__main-image{
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 2s, visibility 2s, transform 2s;
}
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.section-souhou__description ,.section-kaku__description {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 3s, visibility 3s, transform 3s;
}
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media(min-width: 1100px){
	.section-souhou,.section-kaku {
		height: 350px;
		margin-bottom: 80px;
		padding: 0;
		display: inline-flex;
	}
	.section-souhou{
		flex-flow: row-reverse;
	}
	.section-souhou__main-image,.section-kaku__main-image{
		height: 100%;
		width: 588px;
		object-fit: cover;
	}
	.section-souhou__description,.section-kaku__description{
		padding: 0 120px;
	}	
	.section-souhou__description h3,.section-kaku__description h3{
		padding: 50px 0 30px;
	}
.section-souhou__description p,.section-kaku__description p{
		padding: 0 0 50px;
	    line-height: 30px;
	}
}

.section-btn__image{
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin-top: 80px;
  margin-bottom: 100px
}
.line-image3{
	background-image: url('../images/about/line3.png');
	width: 100%;
	height: 260px;
}

@media(max-width: 960px){
	.section-btn__image{
		background-attachment: local;
	}
	.line-image3{
		height: 150px;
	}
}

.section-attached h3{
	font-size: 18px;
	position: relative;
	display: inline-block;
	margin-bottom: 90px;
}
.section-attached h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;/*線の上下位置*/
  display: inline-block;
  width: 22px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #FFFFFF;/*線の色*/
}
@media(max-width: 960px){
	.section-attached h3{
		font-size: 16px;
	}
}

.section-attached ul{
	display: flex;
	list-style: none;
	max-width: 750px;
	margin: 0 auto 80px;
}
.section-attached ul li{
	max-width: 296px;
	margin: 0 auto;
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
}
.section-attached h4{
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 10px;
}
.section-attached p{
	flex: 1;
	padding-bottom: 20px;
}
.section-attached__item-description,.section-attached__item-description2{
	font-size: 12px;
	text-align: left;
}
.section-attached__item-picture,.section-attached__item-picture2{
	height: 206px;
	width: 299px;
	object-fit: cover;
}

@media(max-width: 750px){
	.section-attached ul{
		display: block;
	}

	.section-attached ul li {
		width: 296px;
		margin-bottom: 80px;
	  }
	.section-attached ul li:last-child {
		margin-bottom: 0;
	  }
	.section-attached__item-description2{
		padding-bottom: 0;
	}
}

.section-profile{
	padding: 0 30px;
	margin-bottom: 200px;
}
.section-profile__title h2{
	padding-top: 150px;
	font-size: 20px;
	margin-bottom: 40px;
	text-align: left;	
}
.section-profile__title-image{
	width: 100%;
	height: auto;
}
.section-profile__description{
	text-align: left;
}
.section-profile__description h4{
	padding-top: 46px;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 30px;
}
.section-profile__description p{
	font-size: 14px;
}
@media(min-width:1000px){
	.section-profile{
		max-width: 970px;
		margin: 0 auto;
		display: flex;
		padding: 180px 30px 0;
	}
	.section-profile__title h2{
		padding-top: 0;
	}
	.section-profile__title-image{
		width: auto;
		height: 240px;
		padding-right: 50px;
	}
	.section-profile__description{
		padding-top: 60px;
	}
	.section-profile__description h4{
		padding: 0;
	}
	
	
}