/* ============================
   CEO Page - 代表あいさつ
============================ */

/* ページ固有のパディング調整 */
#page-ceo.page-top-under {
  padding-bottom: 0;
}

/* メインセクション */
.ceo-main-section {
  margin-top: clamp(1.688rem, 0.732rem + 3.92vw, 5.438rem);
  /* 390px: 27px, 1920px: 87px */
  /* vw係数: (87-27)/1530*100 = 3.92vw, 切片: 27 - 3.92*3.9 = 11.712px = 0.732rem */
}

/* コンテンツラッパー（デスクトップ：横並び） */
.ceo-content-wrapper {
  display: flex;
  justify-content: center; /* コンテンツを中央に配置 */
  gap: clamp(2.188rem, 1.79rem + 1.63vw, 3.75rem);
  /* 390px: 35px, 1920px: 60px */
  /* vw係数: (60-35)/1530*100 = 1.63vw, 切片: 35 - 1.63*3.9 = 28.643px = 1.79rem */
  width: 100%;
  max-width: 120rem; /* 1920px */
  margin: 0 auto; /* 中央配置 */
  padding: 0 clamp(0rem, -2.549rem + 10.46vw, 10rem);
  /* 390px: 0px, 1920px: 160px */
  /* vw係数: (160-0)/1530*100 = 10.46vw, 切片: 0 - 10.46*3.9 = -40.794px = -2.549rem */
  box-sizing: border-box; /* paddingを幅に含める */
}

/* 左側: 画像コンテナ */
.ceo-image-container {
  flex-shrink: 0;
  width: clamp(19.375rem, 12.972rem + 26.27vw, 44.5rem);
  /* 390px: 310px, 1920px: 712px */
  /* vw係数: (712-310)/1530*100 = 26.27vw, 切片: 310 - 26.27*3.9 = 207.547px = 12.972rem */
  height: clamp(22.813rem, 15.276rem + 30.92vw, 52.375rem);
  /* 390px: 365px, 1920px: 838px */
  /* vw係数: (838-365)/1530*100 = 30.92vw, 切片: 365 - 30.92*3.9 = 244.412px = 15.276rem */
}

.ceo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右側: テキストコンテナ */
.ceo-text-container {
  flex-shrink: 0;
  width: clamp(19.375rem, 11.122rem + 33.86vw, 51.75rem);
  /* 390px: 310px, 1920px: 828px */
  /* vw係数: (828-310)/1530*100 = 33.86vw, 切片: 310 - 33.86*3.9 = 177.946px = 11.122rem */
  display: flex;
  flex-direction: column;
}

/* タイトル */
.ceo-title {
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.24rem, 1.046rem + 0.795vw, 2rem);
  /* font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2rem); */
  /* vw係数: (32-20)/1530*100 = 0.784vw, 切片: 20 - 0.784*3.9 = 16.94px = 1.059rem */
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: clamp(0.25rem, 0.212rem + 0.157vw, 0.4rem);
  /* 390px: 4px, 1920px: 6.4px */
  /* vw係数: (6.4-4)/1530*100 = 0.157vw, 切片: 4 - 0.157*3.9 = 3.388px = 0.212rem */
  margin: 0;
}

/* 600px以下でタイトルの改行を非表示 */
@media (max-width: 600px) {
  .ceo-title-br {
    display: none;
  }
}

/* あいさつ文 */
.ceo-message {
  margin-top: clamp(1.25rem, 1.092rem + 0.65vw, 1.875rem);
  /* 390px: 20px, 1920px: 30px */
  /* vw係数: (30-20)/1530*100 = 0.65vw, 切片: 20 - 0.65*3.9 = 17.465px = 1.092rem */
}

.ceo-message p {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  /* 390px: 14px, 1920px: 16px */
  /* vw係数: (16-14)/1530*100 = 0.13vw, 切片: 14 - 0.13*3.9 = 13.493px = 0.843rem */
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.375rem, 1.292rem + 0.34vw, 1.7rem);
  /* 390px: 22px, 1920px: 27.2px */
  /* vw係数: (27.2-22)/1530*100 = 0.34vw, 切片: 22 - 0.34*3.9 = 20.674px = 1.292rem */
  letter-spacing: clamp(0rem, 0.044rem + -0.037vw, 0.035rem);
  /* 390px: 0.56px, 1920px: 0px */
  /* vw係数: (0-0.56)/1530*100 = -0.037vw, 切片: 0.56 - (-0.037)*3.9 = 0.704px = 0.044rem */
  margin: 0 0 clamp(1.375rem, 1.292rem + 0.34vw, 1.7rem) 0;
}

.ceo-message p:last-child {
  margin-bottom: 0;
}

/* 署名セクション */
.ceo-signature {
  margin-top: clamp(3.75rem, 3.488rem + 0.26vw, 3.5rem);
  /* 390px: 60px = 3.75rem, 1920px: 56px = 3.5rem */
  /* vw係数: (56-60)/1530*100 = -0.26vw, 切片: 60 - (-0.26)*3.9 = 61.014px = 3.813rem */
}

.ceo-position {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 0.968rem + 0.07vw, 1.063rem);
  /* 390px: 16px = 1rem, 1920px: 17px = 1.063rem */
  /* vw係数: (17-16)/1530*100 = 0.065vw, 切片: 16 - 0.065*3.9 = 15.746px = 0.984rem */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: clamp(0.05rem, 0.049rem + 0.003vw, 0.053rem);
  /* 390px: 0.8px = 0.05rem, 1920px: 0.85px = 0.053rem */
  /* vw係数: (0.85-0.8)/1530*100 = 0.003vw, 切片: 0.8 - 0.003*3.9 = 0.788px = 0.049rem */
  margin: 0;
}

.ceo-name {
  color: #000;
  font-family: "Yuji Mai", serif !important;
  font-size: clamp(2rem, 1.715rem + 1.05vw, 3rem);
  /* 390px: 32px = 2rem, 1920px: 48px = 3rem */
  /* vw係数: (48-32)/1530*100 = 1.05vw, 切片: 32 - 1.05*3.9 = 27.905px = 1.744rem */
  font-style: normal;
  font-weight: 400;
  line-height: clamp(3rem, 2.715rem + 1.05vw, 3rem);
  /* 390px: 48px = 3rem, 1920px: 48px = 48px */
  letter-spacing: clamp(0.2rem, 0.143rem + 0.21vw, 0.3rem);
  /* 390px: 3.2px = 0.2rem, 1920px: 4.8px = 0.3rem */
  /* vw係数: (4.8-3.2)/1530*100 = 0.105vw, 切片: 3.2 - 0.105*3.9 = 2.791px = 0.174rem */
  margin: clamp(0.625rem, 0.494rem + 0.65vw, 1.25rem) 0 0 0;
  /* 390px: 10px = 0.625rem, 1920px: 20px = 1.25rem */
  /* vw係数: (20-10)/1530*100 = 0.65vw, 切片: 10 - 0.65*3.9 = 7.465px = 0.466rem */
}

.ceo-divider {
  width: clamp(19.375rem, 12.972rem + 25.56vw, 43.813rem);
  /* 390px: 310px = 19.375rem, 1920px: 701px = 43.813rem */
  /* vw係数: (701-310)/1530*100 = 25.56vw, 切片: 310 - 25.56*3.9 = 210.316px = 13.145rem */
  height: 1px;
  background: #000;
  margin-top: clamp(1rem, 0.559rem + 1.44vw, 2.375rem);
  /* 390px: 16px = 1rem, 1920px: 38px = 2.375rem */
  /* vw係数: (38-16)/1530*100 = 1.44vw, 切片: 16 - 1.44*3.9 = 10.384px = 0.649rem */
}

/* SNSセクション */
.ceo-sns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(0.375rem, 0.008rem + 1.76vw, 2.063rem);
  /* 390px: 6px = 0.375rem, 1920px: 33px = 2.063rem */
  /* vw係数: (33-6)/1530*100 = 1.76vw, 切片: 6 - 1.76*3.9 = -0.864px = -0.054rem */
  gap: clamp(0.125rem, -0.032rem + 1.11vw, 1.188rem);
  /* 390px: 2px = 0.125rem, 1920px: 19px = 1.188rem */
  /* vw係数: (19-2)/1530*100 = 1.11vw, 切片: 2 - 1.11*3.9 = -2.329px = -0.146rem */
}

.ceo-sns-text {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.07vw, 0.938rem);
  /* 390px: 14px = 0.875rem, 1920px: 15px = 0.938rem */
  /* vw係数: (15-14)/1530*100 = 0.065vw, 切片: 14 - 0.065*3.9 = 13.746px = 0.859rem */
  font-style: normal;
  font-weight: 700;
  line-height: 3.75rem;
  /* 60px 固定 */
  letter-spacing: clamp(0.088rem, 0.084rem + 0.01vw, 0.094rem);
  /* 390px: 1.4px = 0.088rem, 1920px: 1.5px = 0.094rem */
  /* vw係数: (1.5-1.4)/1530*100 = 0.0065vw, 切片: 1.4 - 0.0065*3.9 = 1.375px = 0.086rem */
  margin: 0;
}

.ceo-sns-icons {
  display: flex;
  gap: clamp(1rem, 0.769rem + 0.72vw, 0.688rem);
  /* 390px: 16px = 1rem, 1920px: 11px = 0.688rem */
  /* vw係数: (11-16)/1530*100 = -0.33vw, 切片: 16 - (-0.33)*3.9 = 17.287px = 1.08rem */
  align-items: center;
}

.ceo-sns-link {
  display: block;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .ceo-sns-link:hover {
    opacity: 0.7;
  }
}

.ceo-sns-icon {
  display: block;
  height: 2.813rem;
  /* 45px 固定 */
  flex-shrink: 0;
}

.ceo-sns-icon-x {
  width: 3.438rem;
  /* 55px 固定 */
}

.ceo-sns-icon-instagram {
  width: 3.375rem;
  /* 54px 固定 */
}

/* カードセクション */
.ceo-cards-section {
  margin-top: clamp(3.75rem, 1.033rem + 11.14vw, 10rem);
  /* 390px: 60px = 3.75rem, 1920px: 160px = 10rem */
  /* vw係数: (160-60)/1530*100 = 6.54vw, 切片: 60 - 6.54*3.9 = 34.494px = 2.156rem */
}

/* Grid Layout */
.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0rem, -2.632rem + 10.79vw, 5.063rem) clamp(0rem, -1.316rem + 5.39vw, 2.5rem);
  max-width: 100%;
  margin: 0 auto;
}

/* Card */
.about-card {
  width: 100%;
  height: clamp(15rem, 8.743rem + 25.68vw, 37.375rem);
  background: #FFF;
  border-radius: clamp(0.5rem, 0.402rem + 0.4vw, 1.194rem);
  border: 1px solid #B7B7B7;
  overflow: hidden;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  position: relative;
}

@media (hover: hover) {
  .about-card:hover {
    opacity: 0.7;
  }
}

.about-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: relative;
}

/* Card Image - 固定比率79.6% */
.about-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 79.6%; /* 固定比率: 画像部分79.6% */
  overflow: hidden;
  background: #F5F5F5;
}

.about-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Card Content - 固定比率20.4% */
.about-card-content {
  position: absolute;
  top: 79.6%; /* 画像の高さと同じ比率 */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 0.857rem + 1.61vw, 3.75rem);
  background: #FFF;
}

.about-card-title {
  color: #000;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.678rem + 0.81vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: clamp(0.088rem, 0.068rem + 0.08vw, 0.125rem);
}

@media screen and (min-width: 769px) {
  .about-card-title {
    font-weight: 400;
  }
}

/* Arrow Icon */
.about-card-arrow {
  display: block;
  width: clamp(1.75rem, 1.065rem + 2.81vw, 4.375rem);
  height: clamp(1.75rem, 1.065rem + 2.81vw, 4.375rem);
  flex-shrink: 0;
  position: relative;
  background-image: url('../../images/pickup-arrow-right.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* カードのレスポンシブ対応 */
@media screen and (max-width: 768px) {
  .about-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-cards-container {
    width: 79.49%;
    margin: 0 auto;
  }
}

/* タブレット・モバイル: 縦並びレイアウト */
@media screen and (max-width: 1279px) {
  .ceo-content-wrapper {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    padding: 0 2.5rem;
    /* 左右のパディングを調整 */
  }

  .ceo-image-container {
    width: 100%;
    max-width: 44.5rem;
    /* 712px */
    height: auto;
    margin: 0 auto;
  }

  .ceo-image {
    width: 100%;
    height: auto;
  }

  .ceo-text-container {
    width: 100%;
    max-width: 44.5rem;
    /* 712px - 画像と同じ幅 */
    align-items: flex-start;
    text-align: left;
  }

  .ceo-message {
    width: 100%;
  }
}

/* 1380px以下で特定の改行を非表示 */
@media screen and (max-width: 1380px) {
  .ceo-br-hide-1380 {
    display: none;
  }
}