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




.hero-section {
  background-image: url(../company/images/photo_tothe_future.jpg);
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
}

.overlay-box {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 8rem;
  max-width: 850px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 
}

 @media (max-width: 768px) {
.overlay-box {

  padding: 4rem;
  max-width:95%;
  margin: 0 auto;

 
}
}

    .headline {
      font-weight: bold;
      font-size: 3.1rem;
      margin-bottom: 45px;
		text-align: center;
    }

    .description {
      font-size: 1.8rem;
		line-height: 190%;
      color: #333;
    }

.description p{
	margin:0 0 25px 0;
	
}

 @media (max-width: 768px) {
 .headline {

      font-size: 2.2rem;
      margin-bottom: 35px;
		
    }
  .description {
      font-size: 1.6rem;
		
    }

}
 .concept-line {
      display: flex;
      align-items: center; /* 縦中央揃え */
      margin-bottom: 1.0rem;
    }

    .initial {
      background-color: #003b6b;
      color: white;
      border-radius: 10%;
       padding: 0.5rem;         /* ← 余白を追加 */
  width: 50px;             /* ← 固定サイズから可変に */
  height: auto;            /* ← 同上 */
      font-size: 3.0rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
	
      flex-shrink: 0;
    }

    .keyword {
      color:#003b6b;
      font-weight: bold;
      margin-right: 1rem;
      font-size: 2.2rem;
    }

    .jp {
      color: #333;
      font-size: 2.0rem;
    }

@media (max-width: 768px) {
   .initial {
      font-size: 2.1rem;
width: 30px;     
    }	
	
	   .keyword {
      color:#003b6b;
      font-weight: bold;
      margin-right: 1rem;
      font-size: 1.8rem;
    }
	 .jp {
      color: #333;
      font-size: 1.6rem;
    }
}

#ceo{

	display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end; 
}
#ceo #text {
 width: 35%;  
  color: #333;
}

#ceo #photo {
  width: 25%;          
  height: auto;
  
}

#ceo #photo img{
	border-radius: 20px;
}


@media (max-width: 768px) {
#ceo{
	margin:25px 0;
	text-align: right;
	display: block;
}	
	
#ceo #text {
 width: 75%;  
  color: #333;
margin:10px auto;
	text-align: center;
}

#ceo #photo {
  width: 75%;          
  height: auto;
	margin:10px auto;
  
}
}

/*リード*/
.sec_company{
    margin:5% auto;
    width: 90%;
    max-width: 900px;
}

.sec_company h3{
    color:#003b6b;
    margin:0 0 35px 0;
    font-size:2.5rem;
	text-align: center;
}



@media (max-width: 768px) {
.sec_company h3{
        margin:35px 0 25px 0;
        font-size:2.3rem;
	text-align: center;
    }
}
.company-table {
      width: 100%;
      max-width: 800px;
      border-collapse: collapse;
      margin: 0 auto;
    }

    .company-row {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #ccc;
      padding: 1.3rem 0;
    }

    .label {
      width: 30%;
      font-weight: bold;
    }

    .value {
      width: 70%;
    }
    .value ul {
      list-style:none;
    }

 .value li {
      margin-bottom:10px;
    }

    @media (max-width: 768px) {
      .company-row {
        flex-direction: column;
      }

      .label, .value {
        width: 100%;
      }
    }