@charset "utf-8";

/* ==============================
   ページタイトル背景（お知らせ）
============================== */
.page_ttl_wrap {
  position: relative;
    background-image: url(../img/news/news_ttl_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fbf6f0;
}

.page_ttl {
  color: #6b3d14;
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0;
  z-index: 1;
}


/* スマホ時のみ背景を切り替え */
@media (max-width: 768px) {
  .page_ttl_wrap {
    background-image: url(../img/news_ttl_bg_sp.png);
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .page_ttl_wrap {
    height: 120px;
    background-size: contain;
  }
	
  .page_ttl {
    font-size: clamp(18px, 5vw, 26px);
  }
}




/* ===== ごあいさつ ===== */
.greet{
  background:#fbf6f0;;
  padding: 100px 0px 150px;
  color:#5c3b1e;
}
.greet__inner{max-width:1200px;margin:0 auto;}

.greet__head{ text-align:center; margin-bottom:50px; }
.greet__head-icon{ width:65px; height:auto; display:block; margin:0 auto 8px; }
.greet__title{ font-size:28px; font-weight:700; letter-spacing:.05em; color:#7f4c1f;}

.greet__top{
  display:grid;
  grid-template-columns: 1fr 360px;
  max-width: 1000px;
  margin: 0 auto;
  gap:50px;
  align-items:start;
  margin-top:22px;
}

.greet__text{ line-height:2; font-size: 18px;}
.greet__text p{ margin:0 0 1em; }

.greet__portrait{ position:relative; text-align:center; }
/* 修正：花画像を除外して、先生イラストのみに100%を適用 */
.greet__portrait > img:not(.greet__flower){ width:100%; height:auto; display:block; }

.greet__name{ margin-top:12px; font-weight:700; }
.greet__flower{
  position:absolute; right:-8px; bottom:-130px;
  width:110px; height:auto; pointer-events:none;
}



.aist_ttl {
	    font-weight: bolder;
    font-size: 22px;
}


/* ── プロフィールカード（レイアウト修正） ───────────────── */

.greet__card{
  position:relative;
  margin-top: 50px;
  background:#fff;
  border-radius: 60px;
  padding: 80px 80px 80px;
}

/* 2カラム×2行（左：職歴／右上：資格／右下：所属） */
.greet__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, auto);
  column-gap: 60px;   /* 横のあき */
  row-gap: 40px;      /* 縦のあき */
}

/* 1: 職歴 → 左列で2行分を占有（縦長） */
.greet__grid > .greet__col:nth-child(1){
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* 2: 資格 → 右列1行目 */
.greet__grid > .greet__col:nth-child(2){
  grid-column: 2;
  grid-row: 1;
}

/* 3: 所属 → 右列2行目 */
.greet__grid > .greet__col:nth-child(3){
  grid-column: 2;
  grid-row: 2;
}

/* 見出し・本文は従来のまま */
.greet__col-title{
   background: #cfee74;
   display: block;
   text-align: center;
   padding: 20px 0px;
   border-radius: 12px;
   margin: 0 0 30px;
   color: #5c3b1e;
   letter-spacing: 0.06em;
}
.greet__list{ margin:0; padding-left:1.1em; }
.greet__list li{ margin: 1.05em 0; list-style: none;}

/* 建物イラストはカード左下に固定 */
.greet__city{
  position: absolute;
    left: 110px;
    bottom: 97px;
    width: min(400px, 42%);
    height: auto;
    pointer-events: none;
}

/* SP（1カラムへ） */
@media (max-width: 860px){
  .greet__card{ padding:24px 20px 36px; }
  .greet__grid{
    grid-template-columns: 1fr;
    row-gap: 20px;
    column-gap: 0;
  }
  /* 自然に縦並び：順序は 1:職歴 → 2:資格 → 3:所属 */
  .greet__grid > .greet__col:nth-child(1),
  .greet__grid > .greet__col:nth-child(2),
  .greet__grid > .greet__col:nth-child(3){
    grid-column: 1;
    grid-row: auto;
  }
  
	    .greet__city {
        width: 60%;
        left: 147px;
        bottom: -40px;
    }
	
	.greet__title {
		font-size: 20px;
    margin: 0;
	}
	
	.greet__top {
	display: flex;
	flex-direction: column;
	padding: 0 4%;
	gap: 10px;
}
	.greet__text {
    font-size: 17px;
}
		
	.greet__portrait > img:not(.greet__flower) {
	width: 80%;
    margin: 0 auto;
	}
	
   .greet__card {
        padding: 50px 20px 50px;
        max-width: 82%;
        margin: 0 auto;
        margin-top: 50px;
    }
	
	.greet__head {
    margin-bottom: 20px;
}
	
	.greet__flower {
    right: 10px;
    bottom: 10px;
    width: 80px;
}
	
	.greet__list {
    padding-left: 0em;
}
	
	.greet__list li {
            line-height: 1.4;
        font-size: 16px;
        margin: 0.55em 0;
}
	
	.greet{
  padding: 50px 0px 150px;
}
	
}