/* CSS Document */

/* 代表メッセージ欄 */
.message-bg{
  background-color: #B8E8FF;
  padding-top: 5rem;
}

.white-bg {
  background-color: #fff;
  margin-top: 6rem;
}

.white-bg .row{
  align-items: center;
  padding: 4.2rem 0; /* 余白を少し狭める */
}

.message-photo{
  width: 50%;
  max-width: 320px; /* 画像を少し小さくして間を狭める */
  height: auto;
  display: block;
}

.message-text{
  padding: 0 0.6rem; /* テキスト側の内側余白を小さく */
  font-family: 'Noto Sans JP', 'Zen Maru Gothic', sans-serif;
}

.message-text .catch{
  font-family:  'Zen Maru Gothic', 'Noto Sans JP',sans-serif;
  color: #02144C; 
  font-size:  clamp(2.6rem, 2.8vw + 1rem, 3rem);
  font-weight: bold;
  line-height: 1.8; 
  display: block;
  margin-bottom: 3.5rem;
}

.message-text .role{
  color: #000;
  font-size: 1.5rem;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.message-text .name{
  display: block;
  font-weight: 700;
  font-size: 2.3rem; 
  font-size: 23px;
  margin: 0;
}

.message-text .furigana{
  font-size: 1.5rem; 
  font-size: 15px; 
  color: #000;
}
.business{
  padding-bottom: 8rem;
  padding-top: 8rem;
}
.message-container {
  padding-bottom: 7rem;
  margin-top: 5rem;
}
.message-container p{
  margin-bottom: 8rem;
}

/* 自己紹介マンガ欄 */
.comic-bg {
  background-color: #0F94D4;
}
.comic-message p{
  color: #fff;
  margin-bottom: 5rem;
}
.comic-photo {
  margin-bottom: 7rem;
}

/* 経営理念欄 */
.mission-bg{
  background-color: #FFFDE6;
}

.mission-text h3{
  text-align: center;
  font-family:  'Zen Maru Gothic', 'Noto Sans JP',sans-serif;
  font-size: clamp(2.5rem, 2.8vw + 1rem, 3rem);
  font-weight: bold;
  color: #109DE0;
  margin-bottom: 4rem;
}
.mission-text li{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  color: #231815;
  font-weight: 500;
}
.mission-text ol{
  width: fit-content;
  margin: auto;
}
.mission-text{
  padding-bottom: 15rem;
}

/* 自社の強み欄 */
.strength-bg{
  background-color: #fff;
  margin-bottom: 7rem;
}
.strength-row {
  align-items: center;
  margin-bottom: 9rem;
}
.strength-row dt {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: clamp(2rem, 2vw, 2.3rem);
  font-weight: bold;
  margin-bottom: 1.8rem;
}
.strength-row dd {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  text-align: justify;
  line-height: 1.8;
  color: #231815;
}

/* 社名の由来欄 */
.origin-bg{
  background-color: #B8E8FF;
}
.origin-logo{
  max-width: 65%;
  height: auto;
  display: block;
  margin: 0 auto 4rem auto;
}
.origin-logo-vertical{
  max-width: 45%;
  height: auto;
  display: block;
  margin: 0 auto 0 auto;
}
.origin-text{
  text-align: justify;
}
.origin-text h4{
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: clamp(2.5rem, 2.8vw + 1rem, 3rem);
  font-weight: bold;
  color: #02144C;
  text-align: center;
  margin-bottom: 4rem;
  margin-top: 15rem;
}
.origin-bold {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #02144C;
  font-size: clamp(1.6rem, 2.8vw + 1rem, 1.8rem);

}
.origin-row {
  align-items: center;
  padding-bottom: 18rem;
}
.origin-space {
  margin-bottom: 30rem;
}

.about-bg{
  background-color: #FFFDE6;
  padding-top: 5rem;
}

/* 基本データ表 */
.date-table{
  margin-top: 6rem;
  padding-bottom: 13rem;
}
.date-table dl{
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    font-size: 16px;
    font-size: 1.6rem;
    width: 80%;
    margin: 5rem auto 3rem;
}
.date-table dt{
    border-bottom: solid 1.5px rgba(146, 146, 146, 0.5);
    width: 25%;
    font-weight: 800;
    color: #0F94D4;
    padding: 0 0 1.5rem 2rem;
    margin-bottom: 2.2rem;
    line-height: 2;
}
.date-table dd{
    border-bottom: solid 1.5px rgba(146, 146, 146, 0.5);
    width: 75%;
    font-weight: 400;
    padding: 0 0 2rem 2rem;
    margin-bottom: 2.2rem;
    line-height: 2;
}
.date-table dl{ margin: 0; }
.date-table dl dt{
  position: relative;
  padding-left: 32px;
  margin-top: 0.75rem;
  font-weight: 600;
}


.date-table dl dd{ margin: 0 0 1rem 0; padding-left: 32px; }


.data-list{ margin: 0; }
.data-item{
  display: flex;
  align-items: flex-start;
  border-bottom: 1.5px solid #C4C4C4;
  padding: 1.5rem 0;
  gap: 1rem;
}
.data-label{
  display:flex;
  align-items:center;
  gap:0.6rem;
  min-width: 160px; /* ラベル列の幅（調整可） */
}
.data-label .dt-text{
  color: #0F94D4;
  font-weight: 700;
}
.dt-icon{ width:20px; height:20px; display:inline-block; }
.data-value{ flex:1; color:#333; text-align: justify;}

.calendar-bg{
  background-color: #FFFDE6;
  padding-bottom: 13rem;
}

/* Googleカレンダーのレスポンシブ対応 */
.calendar-embed {
    text-align: center;
}


.calendar-embed iframe {
    width: 100%;
    max-width: 800px;
    height: 600px;
}


/* パソコン・タブレット用（768px以上） */

@media only screen and (max-width: 767px){
  .strength-icon,
  .message-photo,
  .contact-photo{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .origin-logo {
    max-width: 100%;
  }
  .message-photo {
    max-width: 260px;
    margin: 0 auto;
  }
  .strength-row dt {
    margin-top: 3rem;
  }
  .data-item{ flex-direction: column; align-items: flex-start; }
  .data-label{ min-width: auto; margin-bottom: 0.4rem; }
    .calendar-embed iframe {
        height: 600px;
    }
}
@media only screen and (max-width: 575px){
  .comic-photo{
    margin-bottom: 5rem;
  }
}