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


main{
	width: 80%;
	justify-content: center;
}


@media screen and (max-width: 1100px) {
	main{
		width: 90%;
	margin: 100px auto;
	}
}


/*❎ マークにこめられた思い*/
.mark{
	width: 90%;
	max-width: 1000px;
  margin: 50px auto 100px;
  padding: 30px 0;
	
		
	background-color: #FEF1D7;
  border: 8px solid #736357;
  border-radius: 18px;

}
.mark-title{
	margin: 0 auto;
	display: block;
	max-width: 300px;
}
.mark ul{
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	list-style: none;
	justify-content: center;
}
.mark li{
	max-width: 400px;
	min-width: 200px;
	
}
.mark li img{
	width: 70%;
	max-width: 350px;
	margin: 10px auto;	
	justify-content: center;
	display: block;
}


.company-about{
	background-color:#f8f8ff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	padding: 50px 0;
	margin-bottom: 100px;
}



/* ❎メッセージ */
.message{
  width: min(1200px, 90%);
  max-width: 1100px;
  margin: 100px auto 100px;
  padding: 60px;
  /* フクロウが被らないように下余白を追加 */
  padding-bottom: calc(60px + clamp(90px, 3vw, 100px));
  
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  display: flex;
  align-items: stretch;
  gap: 24px;
  flex-wrap: nowrap;
  position: relative; /* 左下固定の基準 */
}

/* テキスト側（左） */
.message p{
  flex: 1 1 62%;
  max-width: 62%;
  margin: 0;
  color: #333;
  font-size: 1.15rem;
  line-height: 2.1rem;
}

/* 小見出し（span）にアクセント */
.message p > span{
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 700;
  color: #736357;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 3px dotted #736357;
}

/* 画像側（右）…フクロウを除外して指定 */
.message > img:not(.message-hukurou){
  flex: 0 0 38%;
  max-width: 38%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  display: block;
}

/* 左下のフクロウ（装飾） */
.message-hukurou{
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: clamp(110px, 14vw, 150px);
  height: auto;
  object-fit: contain;
  pointer-events: none;   /* クリックを邪魔しない */
  z-index: 1;
}

/* スマホ：縦並び＋余白調整 */
@media (max-width: 768px){
  .message{
    flex-direction: column;
    gap: 16px;
    padding: 30px 20px;
    padding-bottom: calc(20px + clamp(80px, 28vw, 140px)); /* モバイルでも下余白確保 */
  }
  .message p{
    flex: none;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.9rem;
  }
  .message > img:not(.message-hukurou){
    flex: none;
    max-width: 100%;
    width: 100%;
    height: auto;  /* 自然比率に戻す */
    order: 2;      /* pの後に表示（HTML順のままでもOK） */
  }
  .message-hukurou{
    right: 12px;
    bottom: 12px;
    width: clamp(80px, 28vw, 120px);
  }
}



/*❎スライドショー*/
.about-slide {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 50px auto;
}

.about-slide ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: slide-scroll 25s linear infinite;
}

.about-slide li {
  flex-shrink: 0;
  width: 400px;       /* 固定幅 */
  margin-right: 20px; /* gap 相当 */
}

.about-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}

@keyframes slide-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 移動量 = (画像幅 + gap) * 4 = (400 + 20) * 4 = 1680px */
    transform: translateX(-1680px);
  }
}






/* ❎会社概要 レイアウト（省略なし） */
.Company {
  width: min(1200px, 92%);
  margin-top: 80px;
  margin-right: auto;
  margin-bottom: 80px;
  margin-left: auto;
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	
}

/* 2カラム */
.company-layout {
  display: flex;
  row-gap: 32px;   /* gap: 32px; を分解 */
  column-gap: 32px;
  align-items: stretch; /* 等高にして左写真をトリミング */
}

/* 左：写真（PCは縦長トリミング） */
.company-photo {
  /* flex: 0 0 46%; を分解 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 46%;

  max-width: 520px;
  overflow-x: hidden;
  overflow-y: hidden;

  /* border-radius: 12px; を分解 */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

.company-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 余白なしで埋めてトリミング */
  object-position: 50% 50%;    /* center を明示 */
  display: block;
}

/* 右：テキスト側 */
.company-content {
  position: relative; /* 英字大見出しの基準 */

  /* flex: 1 1 54%; を分解 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 54%;

  min-width: 0;
}

/* 英字の大見出し（雰囲気づくり） */
.company-hero {
  position: absolute;
  top: -18px;
  right: 0;
  font-size: 5rem;
  font-weight: 800;
  line-height: .95;
  color: #EDE6DF;      /* 薄いベージュで主張しすぎない */
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 日本語見出しは控えめに */
.Company h1 {
  position: relative;
  z-index: 1;

  /* margin: 8px 0 22px; を分解 */
  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 22px;
  margin-left: 0;

  color: #6a625a;
  font-size: 1rem;
  letter-spacing: .12em;
  font-weight: 700;
}

/* テーブルを“区切り線のみ”のフラットに */
.company-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: rgba(255, 255, 255, 0.60);
	z-index: 10;

  /* 角丸 */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  overflow-x: hidden;
  overflow-y: hidden;

  /* はみ出し防止に有効 */
  table-layout: fixed;
	
}

.company-table th,
.company-table td {
  /* padding: 18px 20px; を分解 */
  padding-top: 18px;
  padding-right: 20px;
  padding-bottom: 18px;
  padding-left: 20px;

  vertical-align: top;

  /* border: none; を分解 */
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;

  /* 長い文字の折返し（メール・長い名称対策） */
  overflow-wrap: anywhere;
  word-break: break-word;  /* 互換用 */
  word-wrap: break-word;   /* 旧プロパティ互換 */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* 行ごとの薄いボーダー */
.company-table tr + tr th,
.company-table tr + tr td {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #eeeeee;
}

/* 左列（ラベル） */
.company-table th {
  width: 220px;
  color: #7b756e;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap; /* PCではラベルを1行基調に */
}

/* 右列（値） */
.company-table td {
  color: #2f2b27;
  font-size: 1.02rem;
  line-height: 1.8;
  font-weight: 500;
}

/* スマホ：縦並び＋画像は自然比率 */
@media (max-width: 700px) {
  .Company {
    margin-top: 60px;
    margin-right: auto;
    margin-bottom: 60px;
    margin-left: auto;
  }

  .company-layout {
    flex-direction: column;
    row-gap: 18px;   /* gap: 18px; を分解 */
    column-gap: 18px;
    align-items: stretch;
  }

  .company-photo {
    max-width: none;
    height: auto; /* 等高解除 */
  }

  .company-photo img {
    height: auto;
  }

  .company-hero {
    position: static;
    /* margin: -6px 0 8px; を分解 */
    margin-top: -6px;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;

    font-size: clamp(40px, 14vw, 68px);
    text-align: right;
  }

  .Company h1 {
    text-align: left;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 12px;
    margin-left: 0;
    font-size: .95rem;
	  z-index: 0;
  }

  .company-table th,
  .company-table td {
    padding-top: 14px;
    padding-right: 16px;
    padding-bottom: 14px;
    padding-left: 16px;
    font-size: .98rem;
  }

  .company-table th {
    width: 34%;
    white-space: normal; /* スマホではラベルも折返し許可 */
  }
}


/* ❎組織図 */
.organization {
  margin: 100px auto;
  position: relative;
	max-width: 1300px;
}

/* タイトル */
.organization { text-align: center; }

.organization h1{
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  color: #006400;
  margin: 0 0 28px;
}

/* 太めの下線 */
.organization h1::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 220px;
  height: 6px;
  background: linear-gradient(90deg, #e8f3d6, #99ab4e, #cfe8a3);
box-shadow: 0 4px 10px rgba(153, 171, 78, .25);

  border-radius: 999px;


}


/* 図エリア：右側にふくろう分の余白を確保して左へ寄せる */
.organization-img {
  position: relative;
  display: block; /* ← flexは不要。重なり回避のため外す */
  padding-right: clamp(180px, 24vw, 360px); /* ← ふくろうの幅ぶんスペース確保 */
}

/* 図（1枚目の画像）— ふくろう以外 */
.organization-img img:not(.hukurou) {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;  /* 中央寄せ（右側に余白がある状態で実質左寄りに見える） */
}

/* ふくろう */
.hukurou {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: clamp(160px, 22vw, 340px);  /* 画面に応じて可変 */
  height: auto;
  max-height: 400px;
  object-fit: contain;
  /* widows: auto; ← 誤プロパティなので削除 */
}

/* スマホ：縦並び。重なりをやめて下に配置 */
@media (max-width: 768px) {
  .organization-img {
    padding-right: 0;        /* 余白不要 */
  }
  .hukurou {
    position: static;        /* 絶対配置を解除して */
    display: block;          /* 図の下に通常フローで表示 */
    margin: 12px auto 0;     /* 中央寄せ */
    max-height: 400px;
    width: min(60%, 260px);
  }
}


/*❎アクセス*/

.access-back{
	 /* カード外観（お住まいカードを踏襲） */
  width: min(1200px, 90%);
  max-width: 1100px;
  margin: 10px auto 100px;
  background-color: #FEF1D7;
  border-radius: 18px;
  border: 8px solid #736357;
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  position: relative;
}
.access-hukurou{
	position: absolute;
	bottom: 10px;
	right: 20px;
}

@media (max-width: 1350px){
	.access-hukurou{
	display: none;
}
}

.access{
  /* レイアウト：h1は上段、地図とテキストを2カラム */
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;     /* 地図を少し大きめに */
  grid-template-areas:
    "title title"
    "map   text";
  gap: 24px;
	max-width: 1000px;
	margin: 30px auto;
	width: 90%;
}

/* 見出し（カード内で映えるように） */
.access h1{
  grid-area: title;
  font-size: 1.8rem;          /* お住まいカードのh3に近いサイズ感 */
  margin: 0 0 6px;
  font-weight: bold;
  color: #333;
  text-align: center;         /* 中央揃え */
}

/* 地図 */
.access iframe{
  grid-area: map;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;       /* レスポンシブ比率 */
  height: auto;
  border: 0;                  /* 念のため */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* テキスト */
.access p{
  grid-area: text;
  font-size: 1.2rem;          /* お住まいカードのpに近いサイズ感 */
  line-height: 2.2rem;
  margin: 0;
  color: #333;
}
/*❎インターフォン*/
.intercom{
	margin: 30px auto;
max-width: 1000px;
width: 90%;
}
.intercom img{
	max-height: 200px;
	border-radius: 15px;

}
.intercom p{
	margin-top: 10px;
}



/* スマホ：縦並びにして余白も調整 */
@media (max-width: 768px){
  .access{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "map"
      "text";
    padding: 30px 20px;
    gap: 16px;
  }
  .access h1{
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .access p{
    font-size: 1rem;
    line-height: 1.9rem;
  }
	.intercom img{
	display: block;
margin: 0 auto;
		
}
}