/* =========================================================
   page-company.css
   ---------------------------------------------------------
   会社概要ページ専用スタイル用CSS

   ■ 概要
   WordPressの固定ページ「company」に適用されるスタイルを記述するファイル

   ■ 読み込み条件
   functions.php にて以下条件で読み込み
   - if ( is_page('company') )

   ■ 対象ページ
   - 会社概要ページ

   ■ 今後の運用
   - 他の固定ページに流用する場合は、
     ファイル名・読み込み条件の見直しを行うこと
========================================================= */
.l-main{
	margin-bottom: 150px;
}

@media (max-width: 767px) {
.l-main{
	margin-bottom: 120px;
}
}

.l-main .p-company-hero {
    position: relative;
    background-image: url("http://202606111612y455n4dc.conohawing.com/wp-content/uploads/2026/06/mv_company.jpg");
    background-size: cover;
    background-position: center;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 背景を少し暗くして文字を見やすく */
.l-main .p-company-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 47, 52, 0.2);
    z-index: 1;
}
.l-main .p-company-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}
.l-main .p-company-hero__title {
    font-size: 46px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    color: #fff;
}
.l-main .p-company-hero__sub {
    font-size: 16px;
    letter-spacing: 0.1em;
	font-weight: 700;
	color: #FFFFFF !important;
}

@media (max-width: 767px) {
	.l-main .p-company-hero {
		height: 200px;
	}
	.l-main .p-company-hero__title{
		font-size: 30px;
	}
	.l-main .p-company-hero__sub{
		font-size: 14px;
	}
}


 /* ===== セクション全体 ===== */
  .message-section {
    padding: 50px 0 60px;
    margin: 0 auto;
  }
 
  /* ===== PC：写真＋キャッチコピー 横並び ===== */
  .message-top {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 56px;
  }
 
  /* 写真 */
  .message-photo {
    flex: 0 0 45%;          /* 幅を固定（縮まない・伸びない） */
    max-width: 45%;
  }
 
  .message-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
  }
 
  /* キャッチコピー */
  .message-catch {
    flex: 1;                /* 残りの幅を占める */
  }
 
  .message-catch p {
    font-size: clamp(20px, 2.4vw, 30px);   /* 画面幅に応じて自動調整 */
    font-weight: 700;
    line-height: 1.8;
    color: #002F34;
  }
 
  /* ===== 本文（PC・モバイル共通で全幅） ===== */
  .message-body {
    border-top: 1px solid #DDDDDD;
    padding-top: 48px;
  }
 
  .message-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #002F34;
    margin-bottom: 24px;
    font-weight: 700;
  }
 
  .message-body p:last-child {
    margin-bottom: 0;
  }

.name{
	text-align: right;
}
 
  /* ===== モバイル：縦並び ===== */
  @media (max-width: 767px) {
    .message-section {
      padding: 56px 24px;
    }
 
    .message-top {
      flex-direction: column;   /* 縦積みに切り替え */
      gap: 30px;
      margin-bottom: 30px;
    }
 
    .message-photo {
      flex: none;
      max-width: 100%;          /* 幅いっぱいに広げる */
      width: 100%;
    }
 
    .message-catch {
      width: 100%;
    }
 
    .message-catch p {
      font-size: clamp(18px, 5vw, 24px);
    }
 
    .message-body {
      padding-top: 36px;
    }
 
    .message-body p {
      font-size: 14px;
    }
  }

/* ===== 会社概要 ===== */

.p-page-header__inner{
margin-bottom: 16px;
}

.text_link{
	color:#f79b3f !important;
	 text-decoration: underline;
}

.text_link:hover{
	text-decoration: none;
}


.company_ttl{
	font-weight: 600;
	margin-bottom: 30px;
	padding: 12px 16px;
	background-color: #F79B3F;
	color: #FFFFFF !important;
	border-radius: 6px;
	line-height: 1.4;
}

.list .company_list{
	width:100%;
	display:flex;
	margin-bottom: 30px;
	border-bottom:1px solid #DDDDDD;
}

.list .company_list dt{
	width: 25%;
	color: #F8810A;	
	line-height: 1.8;
   font-weight: 700;
}

.list .company_list dd{
	width: 75%;
	color: #002F34;	
	line-height: 1.8;
   font-weight: 700;
	margin-bottom: 30px;
	margin-left: 0;
}


/*地図 */
.p-company__map {
    flex: 0 0 50%;
    aspect-ratio: 4 / 2;          /* 地図の縦横比 */
    border-radius: 12px;
    overflow: hidden;
}
.p-company__map iframe {
    width: 100%;
    height: 100%;
    display: block;
}


@media screen and (max-width: 767px){
.list .company_list dt{
	font-size: 14px;
}

.list .company_list dd{
	font-size: 14px;
}

	.company_ttl{
	font-size: 18px;
}
	
	
}