/* ===== Facio モバイル版（縦並び＆重ねなし） ===== */
*{box-sizing:border-box}
html{
    font-size:16px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif
}

body{
    margin:0;
    background:#fff;
    color:#333;
    line-height:1.65
}

img{
    max-width:100%;
    height:auto;
    display:block
}

a{
    color:#333;
    text-decoration:none
}
a:hover{
    opacity:.8
}

/* Header */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 16px
}

.facio_logo{
    display:flex;
    gap:12px;
    align-items:center
}

.facio_logo img{
    width:56px;
    height:auto
}

.logoname{
    font-size:1rem;
    margin:0
}

.hamburger{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:28px;
    height:20px;
    cursor:pointer
}

.hamburger span{
    display:block;
    height:3px;
    background:#333;
    border-radius:2px
}



/* Hero */
.parent{position:relative}
.parent img{width:100%}
.catch_copy{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(0,0,0,.48);color:#fff;padding:10px 12px;border-radius:6px}
.miraivalue{font-size:1.25rem;margin:0 0 4px}
.miraivalue_two{font-size:.9rem;margin:0}

/* Titles */
h2{text-align:center;font-size:1.6rem;margin:36px 0 8px}
h3{text-align:center;font-size:1rem;margin:0 0 20px;color:#666}

/* NEWS */
.newslist{margin:0 16px 28px}
.newslist ul{list-style:none;margin:0;padding:0;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.newslist li{padding:12px 10px;border-top:1px solid #eee}
.newslist li:first-child{border-top:none}

/* CONCEPT（縦積み） */
.concepttext{background:#f69a16;padding:20px 16px}
.concepttext img{width:100%;border:6px solid #fff;border-radius:6px;margin:0 0 16px}
.cp{background:#fff;color:#333;padding:18px;border-radius:8px;box-shadow:none}
.conceptp{margin:0;line-height:1.9}

/* BUSINESS（＝カテゴリー）カード縦並び） */
#business{margin-top:28px}
.businessbody{padding:0 16px;margin:0 0 28px}
.businesstext,
.businesstext_two,
.businesstext_three{
  background:#fff;
  border:2px solid #f69a16;
  border-radius:10px;
  margin:0 0 20px;
  padding:16px;
}
.businesstext_two{background:#f69a16;border:none}
.wrap{display:block}
#business img{width:100%;border-radius:6px;margin:0 0 12px}
.business_one p,.business_two p,.business_three p{font-size:1.6rem;font-weight:700;margin:0 0 6px}
.chapterone,.chaptertwo,.chapterthree{margin:0}
.chapterone h4,.chaptertwo h4,.chapterthree h4{font-size:1.05rem;margin:6px 0 6px}
.chapterone h5,.chaptertwo h5,.chapterthree h5{font-size:.95rem;line-height:1.7;color:#444}

/* 会社情報テーブル */
.table_info{width:100%;border-collapse:collapse;margin:16px 0}
.table_info th,.table_info td{border:1px solid #ddd;padding:10px;vertical-align:top;font-size:.95rem}
.table_info th{background:#f69a16;white-space:nowrap}

/* CONTACTボタン */
.contactbtn{background:crimson;color:#fff;text-align:center;border-radius:40px;margin:28px auto 36px;padding:14px 16px;width:72%;font-weight:700;font-size:1rem}
.contactbtn a{color:#fff;display:block}

/* Footer */
footer{background:#f69a16;padding:18px;text-align:center;color:#fff}
.endline{margin:0 0 6px;font-weight:700}
.gotop img{width:40px;margin:8px auto 0}

/* Form */
form{width:92%;margin:0 auto}
input[type="text"],textarea,select{width:100%;font-size:1rem;padding:10px;border:1px solid #ccc;border-radius:8px;margin:0 0 12px;background:#fff}
textarea{height:120px}
input[type="submit"]{background:crimson;color:#fff;border:none;padding:12px;width:100%;border-radius:40px;font-weight:700}
input[type="submit"]:hover{opacity:.9}

/* ================= 固定ヘッダー（モバイル専用） ================= */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.logo_nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
}

.facio_logo{
  display: flex;
  align-items: center;
  gap: 10px;
}
.facio_logo img{
  width: 50px;
  height: auto;
}
.logoname{
  font-size: 1rem;
  margin: 0;
}

/* ハンバーガー */
.hamburger{
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
.hamburger span{
  display: block;
  height: 3px;
  background: #333;
  margin: 4px 0;
  border-radius: 2px;
}

/* ナビメニュー */
.nav{
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background-color: #fff;
  transition: height 0.3s ease;
  z-index: 999;
}
.nav.active{
  height: calc(100vh - 60px);
}
.nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li{
  border-top: 1px solid #eee;
}
.nav a{
  display: block;
  text-align: center;
  padding: 16px;
  font-weight: bold;
  color: #333;
}
.nav a:hover{
  background: #f69a16;
  color: #fff;
}

.submit input[type="submit"] {
  width: 120px;          /* 幅を指定（例：200px） */
  height: 48px;          /* 高さを指定（例：48px） */
  display: inline-block; /* 幅いっぱいに広がらないように */
  margin: 0 auto;        /* 中央寄せしたい場合 */
  background-color: crimson; /* 背景色（例） */
  color: #fff;           /* 文字色 */
  border: none;          /* 枠線なし */
  border-radius: 15px;    /* 角を少し丸く */
  font-size: 1rem;       /* 文字サイズ */
  cursor: pointer;       /* ポインター表示 */
}

.submit {
  text-align: center;    /* 中央寄せ */
  margin-top: 16px;      /* 上に余白（任意） */
}

/* 本文がヘッダーの下に隠れないように余白を追加 */
body{
  padding-top: 70px;
}

/* === hamburger 強制表示パッチ（sp.cssの一番下に） === */

/* コンテナ：中央寄せ＋段組をgapで管理（marginの競合を排除） */
.hamburger{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;               /* ← 3本の間隔はこれで作る */
  width:32px !important; /* 念のため可視幅を明示 */
  height:24px !important;
  background:transparent !important;
  border:0 !important;
  position:relative;
  z-index:1100;          /* 何かに隠れても前面へ */
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color: transparent;
}

/* 線そのもの：幅・高さ・色をガッチリ固定 */
.hamburger > span{
  display:block !important;
  width:100% !important;       /* 32px いっぱい */
  height:2px !important;       /* 見えやすい太さ */
  background-color:#111 !important; /* 濃い目（白背景でも見える） */
  border-radius:2px;
  margin:0 !important;         /* 以前の margin 指定を無効化 */
  opacity:1 !important;        /* 透過させない */
}

/* 万一PC側CSSで消していたら（例：display:none）無効化 */
@media (min-width: 768px){
  .hamburger{ display:none; } /* ←PCで非表示にしたい時だけ残す。必要なければ削除 */
}

/* 固定ヘッダー分のオフセット（ヘッダーが ~70pxなら72pxくらい） */
[id]{ scroll-margin-top: 72px; }
html{ scroll-behavior: smooth; }