*,
*::before,
*::after{
box-sizing:border-box;
}

body{
font-family:sans-serif;
font-size: 20px;
color:#49413d;
margin:0;
background-color:#fff9c4;
}

.container{
max-width:1100px;
width:100%;
padding:0 16px;
margin:0 auto;
}

header{
background:white;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
padding:2px 12px;
}

header nav{
margin-left:auto;
padding-right:8px;
}

header nav a{
display:inline-block;
padding:8px 12px;
text-decoration:none;
color:#49413d;
font-weight:500;
transition:color 0.2s ease;
}

header nav a:hover{
color:#f17f32;
}

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

.hero{
padding:0 0 10px 0;
}

.hero-inner{
display:flex;
align-items:center;
gap:24px;
}

.hero-text{
flex:1;
}

.hero-image{
flex:1;
}

.hero-image img{
width:100%;
}

.subtitle{
font-size:36px;
font-weight: bold;
margin:10px 0;
color:#5a453d;
}

.period{
color:#f17f32;
}
.cta{
display:inline-block;
margin-top:20px;
padding:12px 28px;
background:#ffa757;
color:white;
text-decoration:none;
border-radius:6px;
}

.section{
padding:20px 0;
}

.section .container > *{
margin-bottom:1em;
}

.section .container > *:last-child{
margin-bottom:0;
}

.section .container p{
line-height:1.8;
margin-top:0;
}

h3{
font-size:32px;
color:#5a453d;
margin-top:0;
margin-bottom:1em;
border-bottom:2px solid #5a453d;
padding-bottom:6px;
}

.timeline{
line-height:1.8;
}

.steps{
line-height:1.8;
}

footer{
background:white;
padding:20px 0;
text-align:center;
}

/* --- Responsive --- */
@media (max-width: 1024px){
  body{
    font-size:18px;
  }

  /* PC以外はContact Usを非表示 */
  header nav{
    display:none;
  }

  /* ヘッダーロゴを少し縮小 */
  .header-inner img{
    max-height:48px;
    width:auto;
  }

  .section{
    padding:18px 0;
  }

  .subtitle{
    font-size:32px;
  }

  h3{
    font-size:28px;
  }

  .header-inner{
    height:auto;
    padding:10px 12px;
  }
}

@media (max-width: 600px){
  body{
    font-size:16px;
  }

  .section{
    padding:14px 0;
  }

  .header-inner img{
    max-height:40px;
  }

  .subtitle{
    font-size:24px;
  }

  h3{
    font-size:22px;
  }

  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  header nav{
    margin-left:0;
    padding-right:0;
  }

  header nav a{
    padding:10px 0;
  }

  .hero-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .download-btn,
  .cta-btn{
    width:100%;
    text-align:center;
  }

  .section ul{
    padding-left:1.2em;
  }
}

.download-btn{
display:inline-block;
background:#ffb74d;
color:#ffffff;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
box-shadow:0 4px 0 #f57c00;
transition:0.15s;
}

.download-btn:hover{
transform:translateY(2px);
box-shadow:0 2px 0 #f57c00;
}

.cta-btn{
display:inline-block;
background:#ffb74d;
color:#ffffff;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
box-shadow:0 4px 0 #f57c00;
transition:0.15s;
}

.cta-btn:hover{
transform:translateY(2px);
box-shadow:0 2px 0 #f57c00;
}

.section ul {
  line-height: 1.8;
  padding-left: 1.5em;
}

.section ul li.note {
  list-style: none;
  margin-left: -1em;
  padding-left: 2em;
  text-indent: -1em;
}