/* PC・スマホ共通スタイル */
*{
    box-sizing: border-box;
}

p{
    font-size: 18px;
}

body{
    max-width:1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN","Meiryo","Arial","sans-serif";
}

header{
    display:flex;
    justify-content:space-between;
    width: 100%;
    margin:0 auto 0 auto;
    align-items: center;
}

#logo{
    width: 50%;
    height:50%;
}

#nav-pc{
    font-size: 14px;
    align-items: end;
}

#nav-pc ul{
    display: flex;

}

#nav-pc li{
    list-style: none;
}

/* ナビゲーションのリンクの装飾設定 */
#nav-pc a{
    text-decoration: none;
    margin-left: 20px;
    color: black;
}

#nav-pc a:hover{
    text-decoration: underline;
}

/* スマホ用ナビを非表示 */
#nav-sp,
#menu-sp {
  display: none;
}

/* メインビジュアル */
 #main-visual {
    position: relative;
  }

  #main-message {
    position: absolute;
    top: 20px;
    left: 0;
    color: white;
    max-width: 100%;
    height: 100%;
    width: 100%;
    z-index: 11;
  }

  #main-message > h1 {
    font-size:    60px;
    padding-left: 0px;
  }
  #main-message > p { 
    font-size: 35px;
    max-width: 90%;
  }

/* トップメッセージ */

.topmassage{
    padding: 48px 60px;
    background-color: #333333; 
  }

/* 見出し */

.index-h2{
    position: relative;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 0.2em;
    border-bottom: 5px solid #ccc;
    
  }
  
.index-h2::before {
    content: " ";
    position: absolute;
    display: inlihe-block;
    border-bottom: solid 5px #3a86ff;
    bottom: -5px;
    width: 25%;
  }

   /* ミッション */
 #information {
    margin: 40px auto 40px auto;
  }
 
 #mission-flex {
    display: flex; 
  }

  #mission-flex > div {
    width: 50%;
    margin: 20px;
  }

  #mission-photo {
    width: 100%; 
    aspect-ratio: 16 / 10; /* ← 比率を統一（例：16:10や4:3など） */
    object-fit: cover;      /* ← はみ出す部分をトリミングして均等に */
    border-radius: 8px;     /* ← 角丸があれば */

  }

  #mission-photo2 { 
    width: 100%;
    aspect-ratio: 16 / 10; /* ← 比率を統一（例：16:10や4:3など） */
    object-fit: cover;      /* ← はみ出す部分をトリミングして均等に */
    border-radius: 8px;     /* ← 角丸があれば */

  }

  #btn {
    font-size: 14px;
    border: 1px solid black;
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
    font-family: 'Meiryo', serif;
  }
  
  #btn a {
    color:black;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  /* 会社概要 */
 #company {
  margin: 0 2.5px 0 5px;
  }

  #company-table {
    width: 100%;
  }

  .tableheader {
    text-align: left;
    padding: 20px;
    border-bottom-color: #3a86ff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    width: 100px;
  }

  .tableheader-first {
    border-top-color: #3a86ff;
    border-top-width: 1px;
    border-top-style: solid;
  }

  .cell {
    padding: 30px;
    border-bottom-color: #ececec;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  
  .cell-first {
    border-top-color: #ececec;
    border-top-width: 1px;
    border-top-style: solid;
  }

  #company-flex {
    display: flex;
    width: 100%;
  }

  #company > iframe {
    width: 100%;
    height: 368px;
  }

#company > h3 {
  margin-bottom: 20px;
}

.tableheader {
  width: 50px;
}

.cell {
  padding: 20px;
}

.company-iframe {
  width: 100%;
}

/* 問合せ申込みフォーム */
.contact1 iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}



/* フッター */
footer {
  background-color:black;
  text-align: center;
  padding: 40px 80px 40px 80px;
}

#footer-logo {
  margin-bottom: 30px;
  color: white;
}

#footer-link {
  margin-bottom: 50px;
}

#footer-link > a {
  text-decoration: none;
  margin: 10px;
  color: white;
}

#footer-link > a:hover {
  text-decoration: underline;
}

#copyright {
  color: white;
}

  .company-map {
    width: 100%;
  }

/* 画面幅が768px以上のとき */
@media screen and (min-width: 768px) {
  /* PC用のスタイルを指定する */
  /* SP用ナビゲーション非表示 */
  #nav-sp {
    display: none;}
  #menu-sp {
    display: none;
  }

  .company-pc {
  width: 50%;
  padding: 10px;
  }

}


/* 画面幅が767px以下のとき */
@media screen and (max-width: 767px) {
  /* スマートフォン用のスタイルを指定する */
  /* PC用ナビゲーション非表示 */
  #nav-pc {
    display: none;
}

/* メインビジュアルスマホ対応 */
  #main-message > h1,

  #main-visual h1 {
    font-size: 20px;
    margin: 0px 0px 0px 0px;
  }
  
  #main-visual > div > p {
    font-size: 14px;
    max-width: 90%;
  }
  
/* ミッションスマホ対応 */
  #mission-flex {
    display: block;
  }

  #mission-flex > div {
    width: 100%;
    margin: 10px 0;
  }
 

  /*会社概要縦並び*/

#company-flex {
  display: block;
}

 /* ハンバーガーメニュー */
 #menu-sp {
  display: block;
  background-color: transparent;
  float: right;
  padding: 0;
  border: none;
}

/* スマホ用ナビゲーションの表示切替*/
/* 初期状態、レイアウトと非表示設定 */

#nav-sp {
  background-color:rgba(0,0,0,0.9);
  position: fixed;
  left:30%;
  top: 10px;
  height:  80%;
  width:   70%;
  display: none;
  z-index: 100;
}

/* フッター部分スマホ用 */
footer {
  padding: 20px;
}

}

 /* ×ボタン */
 #close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
  border: none;
}

#nav-sp nav ul {
  padding-left: 0;
}

#nav-sp nav li {
  list-style: none;
}

/* ナビゲーションメニュー用ロゴ */
#logo-sp {
  margin: 80px 0 30px 20px;
} 

 /* ナビゲーションのリンクの装飾設定 */
 #nav-sp nav a {
  display: block;
  color: #ffffff;
}

#nav-sp nav a:hover {
   text-decoration: underline;
 }

 #nav-sp .menu {
   text-decoration: none;
   margin: 0 20px 0 20px;
   height: 44px;
   font-size: 16px;
   background-image: url("image/arrow.png");
   background-repeat: no-repeat;
   background-position: right top;
 }

 #sns {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

#sns > a {
  margin-right: 30px;
}

 /* メインビジュアル */
#main-visual {
  position: relative;
  /* height: 400px; */
}

#main-visual > div {
  text-align: left;
  height: 280px;
  padding:0 0 0 20px;
}

#main-visual > img {
  width: 100%;
  top: auto;
  bottom: 0;
}

/* セクション内限定の変数 */
#about-message{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0ea5e9; --brand-ink:#0c4a6e; --container:1100px; --radius:16px;
}

/* 独立コンテナ（既存 .container に依存しない） */
#about-message .am-container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:20px;
}

/* パンくず */
#about-message .breadcrumb{ border-bottom:1px solid var(--line); }
#about-message .breadcrumb .am-container{ padding-block:12px; }
#about-message .breadcrumb ol{
  margin:0; padding:0; list-style:none; display:flex; gap:10px; flex-wrap:wrap;
}
#about-message .breadcrumb a{ color:var(--muted); text-decoration:none; }
#about-message .breadcrumb li{ color:var(--muted); font-size:14px; }
#about-message .breadcrumb li+li::before{
  content:"/"; margin:0 6px 0 2px; color:var(--line);
}

/* タイトル */
#about-message .page-head{ padding:clamp(28px,5vw,56px) 0; }
#about-message .page-title{
  font-size:clamp(26px,4.2vw,40px); line-height:1.25; margin:0 0 8px; color:var(--ink);
}
#about-message .lead{ margin:0; color:var(--muted); font-size:clamp(16px,2.2vw,18px); }
#about-message .sp-only{ display:none; }
@media (max-width:640px){ #about-message .sp-only{ display:inline; } }

/* 本文 2カラム（.am-container を内包していればOK。未使用でも動く） */
#about-message .message{ padding:12px 0 clamp(48px,7vw,72px); color:var(--ink); }

/* ★ カラム分けの要：.columns に直接グリッドを指定 ★ */
#about-message .columns{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:clamp(20px,3vw,48px);
  align-items:start;
  min-width:0; /* はみ出し対策 */
}

/* 左：肖像（sticky） */
/* #about-message .portrait{ position:sticky; top:24px; } */
#about-message .portrait figure{ margin:0; }
#about-message .portrait img{
  border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.06);
  display:block; max-width:100%; height:auto;
}
#about-message .portrait figcaption{ margin-top:10px; font-size:14px; color:var(--muted); }

/* 右：本文 */
#about-message .content{ font-size:16px; line-height:1.9; }
#about-message .content p{ margin:0 0 1.2em; color:#374151; }

/* 署名 */
#about-message .signature{
  border-top:1px solid var(--line); margin-top:clamp(28px,4vw,40px); padding-top:16px;
}
#about-message .signature .company{ margin:0; font-weight:600; }
#about-message .signature .role{ margin:2px 0 0; color:var(--muted); }
#about-message .signature .name{ margin:2px 0 0; font-size:20px; font-weight:700; letter-spacing:.04em; }

/* お問い合わせ */
#about-message .cta{
  margin-top:clamp(32px,4vw,48px); padding:24px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); text-align:center;
  max-width: 700px;       /* 幅を本文程度に調整 */
  margin: 64px auto 0;    /* 自動マージンで中央寄せ */
  text-align: center;
}
#about-message .cta__title{ margin:0 0 4px; font-size:22px; }
#about-message .cta__lead{ margin:0 0 14px; color:var(--muted); }

/* ボタン */
#about-message .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:12px 18px; font-weight:600; color:var(--ink);
}
#about-message .btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
#about-message .btn-primary:hover{ filter:brightness(.96); }

/* レスポンシブ */
@media (max-width:1024px){
  #about-message .columns{ grid-template-columns:320px 1fr; }
}
@media (max-width:800px){
  #about-message .columns{ grid-template-columns:1fr; }
  #about-message .portrait{ position:static; }
  #about-message .portrait figcaption{ text-align:center; }
}

/* ダーク（局所） */
@media (prefers-color-scheme:dark){
  #about-message .content p{ color:#cbd5e1; }
  #about-message .cta{ background:linear-gradient(180deg,#0f172a 0%,#0b0c0f 100%); }
}