@charset "UTF-8";
/* CSS Document */
.section-top{
  background-image: url("../images/second_top-bg.jpg");
  background-position: right 40% bottom 25% ;
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
  height: 260px;
  width: 100%;
  margin-bottom: 200px;
}
.section-top h2{
  font-size: 4.0rem;
  padding: 70px 0 0;
  border-bottom: 2px solid #ff9f1c;
  padding-bottom: 30px;
  width: 200px;
  margin: 0 auto 20px;
}
.section-top p{
  font-size: 2.0rem;
}
.fadeIn {
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: .25s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.message{
  padding: 0 25px;
}
.message h2{
  display: inline-block;
  position: relative;
  font-size: 2.8rem;
  line-height: 3.6rem;
  padding: 80px 0 10px;
  
}
.message h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: inline-block;
  width: 50px;
  height: 3px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #05668d; /*下線の色*/
}
.fadeIn02{
  opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: .25s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn02{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.message_img{
  width: 100%;
  height: auto;
  padding: 80px  0 50px ;
  position: relative;
  animation: fluidrotate 5s ease 0s infinite;/*アニメーションの設定*/
}
.message_img:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-84deg, #fff95b 0%, #ff930f 100% );
    transform: translate3d(0px, 20px, 0) scale(0.95);
    filter: blur(38px);
    opacity: var(0.49);
    transition: opacity 0.3s;
    border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.message_img::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
        
        
        
        
/*流体*/
@keyframes fluidrotate {  
    
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
    
}
.message p{
  text-align: left;
  font-size: 1.6rem;  
  line-height: 3.2rem;
}
.pc{
  display: none;
}
.name{
  margin-left: 110px;
}
.name_flex{
  display: flex;
  margin-top: 40px;
}
.name_img{
  width: 130px;
  height: auto;
  padding-left: 10px;
  padding-bottom: 5px;
}
@media(min-width: 1160px) {
  .message{
  padding: 0 ;
}
  .message_flex{
    display: flex;
    padding-top: 80px;
    justify-content: center;
  }
  .message_img{
    width: 600px;
    height: 100%;
    padding: 0 0 0 80px;
  }
  
  
  .message p{
    padding: 0 120px 0 50px;
}
  .pc{
    display: block;
  }
  .name{
    position: absolute;
    left: 800px;
    padding: 0px;
    margin: 0px;
  }
  .name_img{
    width: 160px;
    height: auto;
    padding-left: 10px;
    position: absolute;
    left: 950px;
  }
}
.company_overview{
  padding: 0 25px;
}
.company_overview h2{
  display: inline-block;
  position: relative;
  font-size: 3.0rem;
  padding: 100px 0 10px;
}
.company_overview h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: inline-block;
  width: 50px;
  height: 3px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #05668d; /*下線の色*/
}
.company_overview h3{
  border: 1px solid #ff9f1c;
  background-color: #ff9f1c;
  color: #fff;
  padding: 10px 0 10px 20px;
  margin-bottom: 20px;
  margin-top: 50px;
  text-align: left;
}
.company_overview p{
  text-align: left;
  padding-left: 20px;
  line-height: 3.2rem;
}
.company_overview-flex-bottom{
  margin-bottom: 200px;
}
@media(min-width: 1160px) {
  .company_overview{
    padding: 0 120px;
  }
  .company_overview-flex{
    display: flex;
    margin: 50px auto 50px;
    width: 900px;
  }
  .company_overview h3{
    width: 300px;
    margin: 0;
  }
  .company_overview p{
    width: 600px;
    padding: 10px 0 10px 20px;
    border: 1px solid #ff9f1c;
    background-color: #FFFFFF;
  }
  .company_overview-flex-bottom{
    display: flex;
    margin: 50px auto 200px;
    width: 900px;
  }
  
}