/* reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;line-height:1.3;color:#333;background:#fff;}

/* header */
.header{position:sticky;padding:0 0 20px 0;z-index:100;}
.header{
  position:sticky;
  padding:0 0 8px 0;
  z-index:100;
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;       /* 基本は中央 */
  padding: 10px 40px;
  max-width: 1100px;        /* サイト幅に合わせる */
  margin: 0 auto;            /* 画面中央に寄せる */
}

/* ロゴだけ左 */
.logo {
  align-self: flex-start;
}

.logo img{
  max-width:300px;
  height:auto;
  display:block;
}

/* サブロゴ */
.logo02 img{max-width:100%; height:auto; display:block;}

/* ハンバーガー */
.hamburger{
  display: none;           /* PCは非表示 */
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  margin-top: 10px;         /* ロゴとの隙間 */
}

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

.image-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* nav */
.nav{
  max-width:1024px;
  width:100%;
  margin:10px auto;
  background:#dc570e;
  border-radius:10px;
}
.nav ul{
  display:flex;
  justify-content:center;
  gap:30px;
  list-style:none;
  padding:10px 20px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  letter-spacing:2px;
}
.nav a:hover{color:#ffdd00;}
.nav.active{display:flex; flex-direction:column;}

/* hero */
.hero{
  background:#dc570e; /* グレー背景 */
  text-align:center;
  padding:20px; /* 余白リセット（必要なら調整） */
}

.hero-inner{
  max-width:1024px;
  margin:0 auto;
}

.hero-inner img{
  width:100%;
  display:block;
}

/* 左右ブロックのラッパー */
.split-inner {
  display: flex;
  gap: 10px;          /* 左右ブロック間の白い隙間 */
}

/* 左右ブロック */
.block-left,
.block-right {
  flex: 1;
  background: #ffffff;  /* ブロック背景は白 */
  padding: 15px;
  border-radius: 3px;
}

/* main content */
.container{max-width:1024px;margin:auto;padding:20px 20px;display:flex;flex-direction:column;gap:40px;}
.news{background:#f3f3f3;padding:10px 20px;border-radius:6px;}
.main-content h2{font-size:20px;margin-bottom:15px;}
.news ul{list-style:none;}
.news li{margin-bottom:12px;}

.step {
  padding: 30px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fafafa;
}

.step p {
  line-height: 1.8;
  margin-bottom: 15px;
}

.btn {
  display: inline-block;
  padding: 22px 26px;
  background: #1a73b8;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}

.btn:hover {
  background: #135a92;
}

.btn-dl {
  display: inline-block;
  margin-left: 20px;
  padding: 10px 16px;
  background: #E8E8E8;
  color: #000;
  text-decoration: none;
  border-radius: 3px;
}

/* footer（縦幅スリム） */
.footer{
  background:#dc570e;
  color:#fff;
  padding:5px 0;
  text-align:center;
}
.footer p,
.footer-links{margin:0; line-height:1.2;}
.footer-links a{margin-right:6px; font-size:13px; color:#fff; text-decoration:none;}
.footer p{font-size:13px; color:#fff; margin-top: -10px}

/* responsive */
@media(max-width:1024px){.container{padding:10px 20px;}}
@media(max-width:768px){
  .header-inner{padding:15px 20px;}
  .nav{display:none; position:absolute; top:70px; left:0; width:100%; z-index:99;}
  .hero{padding:30px 15px;}
  .hero-title{font-size:28px;}
  .hero-subtitle{font-size:16px;}
  .logo img{max-width:100%;}
  .split-inner {
    flex-direction: column;
    gap: 10px;
  }
  .step {
    padding: 20px;
  }
	/* ハンバーガーを表示 */
  .hamburger {
    display: flex;
  }

  /* 縦メニュー表示 */
    .nav.active {
    position: fixed;        /* 画面全体に固定 */
    top: 30%;               /* 画面縦中央 */
    left: 50%;              /* 画面横中央 */
    transform: translate(-50%, -50%); /* 中央揃え */
    width: 80%;             /* 幅は画面の80% */
    max-width: 80%;       /* 必要に応じて上限 */
    flex-direction: column; /* 縦並び */
    border-radius: 10px;
    background: #dc570e;
    padding: 10px;
    z-index: 999;           /* ヘッダーより前面に */
  }

  /* メニュー項目縦並び */
  .nav.active ul {
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
  }
}