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

.concept{
  height: 300px;
  background-image: url("../images/concept/concept_top.jpg");
  background-repeat: no-repeat;
  background-position: 100% 70% ;
  background-size: cover;
  color: #363e37;
  margin-bottom:50px;
  background-color: #fff;
　width:100%; 
}
.concept h2{
  font-size: 3.0rem;
  color: #363e37;
  letter-spacing: 8px;
}
.concept h2 span{
  display: block;
  font-size:0.8rem;
  padding-top: 10px;
}
.top-bg{
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.concept-01,.concept-02,.concept-03{
	margin: 0 auto 80px;
}
.concept-01{
	margin-top: 70px;
}
.concept-01 img,.concept-02 img,.concept-03 img{
	width: 296px;
    height: 222px;
	margin: 0 auto;
	object-fit: cover;
}
.concept-01 img{
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.concept-02 img{
  border-radius:34% 37% 35% 31% / 32% 40% 37% 36% ;
}
.concept-03 img{
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}

.title-pc{
	display: none;
}
.title-01,.title-02,.title-03{
	display: block;
	font-size: 7.0rem;
	color: #849988;
	opacity: 0.3;
    margin-right: 245px;
    margin-bottom: 16px;
	font-style: italic;
}

.concept-01 h3,.concept-02 h3,.concept-03 h3{
	font-size: 4.0rem;
	color: #849988;
	    margin: 30px auto;
    letter-spacing: 3px;
	font-style: italic;
}

.title-jp{
	display: block;
	font-size: 1.2rem;
    color: #849988;
    margin: 14px;
	font-style: normal;
}
.concept-discription,.concept-discription-02{
    margin: 30px auto;
    padding: 0 30px;
    font-size: 1.4rem;
}

@media screen and (min-width:600px){
	.concept{
		margin-bottom: 80px;
	}
	.concept-01,.concept-02,.concept-03{
		margin: 0 20px;
	}
	.title-sp{
		display: none;
	}
	.title-pc{
		display: block;
	}
	.concept-01__flex,.concept-03__flex{
		display: flex;
		flex-direction: row-reverse;
	}
	.concept-02__flex{
		display: flex;
	}
	.concept-01,.concept-02,.concept-03{
		max-width: 840px;
		margin: 0 auto 60px;
	}
	.concept-01 img,.concept-02 img,.concept-03 img{
	max-width:250px;
    height: 170px;
	    margin: 80px 20px 0;
	object-fit: cover;
		width: 30%;
}
	.concept-02 img{
		margin-left: 47px;
	}
	.title-01,.title-02,.title-03{
		margin-left: 30px;
	}
	.concept-01 h3,.concept-02 h3,.concept-03 h3{
		text-align: left;
	font-size: 4.0rem;
    letter-spacing: 3px;
}
	.concept-03 h3{
		letter-spacing: 1px;
	}
	
	.title-eng-01{
	margin-left: 60px;
}
	.title-eng-02{
	margin-left: 84px;
}
	.title-eng-03{
	margin-left: 54px;
}
	.concept-discription,.concept-discription-02{
		text-align: left;
	margin: 0 30px 0 50px;
    padding: 0;
	}
	.concept-discription-02{
		margin-left: 79px;
	}
	.title-jp-01,.title-jp-02,.title-jp-03{
		font-size: 1.2rem;
		display: inline-block;
		margin: 10px 0 0 20px;
		font-style: normal;	
	}
	
	.concept-01__content,.concept-02__content,.concept-03__content{
		width: 70%;
	}
}

@media screen and (min-width:960px){
	.concept{
		margin-bottom: 100px;
	}
	.concept-01,.concept-02,.concept-03{
		max-width: 1240px;
		margin: 0 auto 100px;
	}
	.concept-01 img,.concept-02 img,.concept-03 img{
	width: 30%;
    height: 230px;
	margin: 80px 20px 0;
   max-width: 320px;
}
	.concept-02 img{
		margin-left: 108px;
	}
	.title-01,.title-02,.title-03{
		font-size: 9rem;
		    margin: 0 0px 34px 50px;
	}
	.title-eng-01,.title-eng-02,.title-eng-03{
		font-size: 5rem;
		font-weight: 300;
	}
	.title-eng-01{
	    margin-right: 20px;
    margin-left: 104px;
}
	.title-eng-02{
	margin-right: 20px;
		    margin-left: 114px;
}
	.title-eng-03{
		margin-right: 20px;
	margin-left: 113px;
}
	.title-jp-01,.title-jp-02,.title-jp-03{
		font-size: 1.4rem;
		display: inline-block;
		margin: 10px 0 0 0;
		font-style: normal;	
	}
	.title-jp-03{
		margin-left: 0px;
	}
	
	
	
	.concept-discription,.concept-discription-02{
		font-size: 1.8rem;
		line-height: 32px;
		margin: 0 44px 0 106px;
		
	}
	
}