@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

/* body共通 */
body{
  font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  font-weight: 300;
  -webkit-text-size-adjust:100%;
  overflow-x: hidden;
  color: #000;
  background: #fff;
}

a:active, a:focus,input:active, input:focus{outline:0;}


h2 {
  font-family: "A P-OTF A1ゴシック StdN", sans-serif;
  font-weight:bold;
  font-size: 30px;
  letter-spacing: 0.1em;
}


/* ===== ヘッダー ===== */
#site-header {
  display: flex;
  justify-content: center; /* 横方向中央に配置 */
  align-items: center;     /* 縦方向中央 */
  padding: 10px 15px;
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#site-header .logo img {
  height: 25.5px;
  padding: 0;
  margin: 0;
}

#mainnav ul li a {
  text-decoration: none;
  color: #999;
  font-size: 13.5px;
  padding: 18px 5px;
  display: block;
}

/* ===== フッター ===== */
#footer {
  padding: 50px 0;
  text-align: center;
  font-size: 12px;
  background: #f2f2f2;
  color: #333;
  line-height: 2.5;
}

#footer a {
  color: #333;
  text-decoration: none;
}

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

#footer p {
  margin: 5px 0;
}

/* 前後に線を追加 */
.privacy a::before,
.privacy a::after {
  content: "|";
  margin: 0 8px;
  color: #333;
}


/* sec01 */
#sec01 {
  max-width: 800px;       
  margin: 0 auto;         
  padding: 40px 20px;    
  color: #000000;
}

#sec01 h2 {
  margin-top: 100px;    /* 上に余白を追加 */
}

.title_sc1 {
  display: flex;
  flex-direction: column; /* 縦並び（タイトル＋コピー） */
  align-items: center;    /* 横中央揃え */
  text-align: center;     /* コピー文字も中央 */
  width: 100%;            /* 親幅いっぱい */
  margin-bottom: 80px; /* ここで下の余白を追加 */
}

.steps {
  list-style: none;       /* ← list-styleを消すことで番号が1つに */
}

.steps li {
  margin-bottom: 50px;
  position: relative;
  font-size: 14px;
  line-height: 2.0;
}

.steps li .subheading {
  font-weight: bold;
  
}

/* モバイル用（幅600px以下のとき） */
@media screen and (max-width: 600px) {
  h2 {
    font-size: 25px; /* 小さくして一行に収める */
	margin-bottom: 0px;  /* モバイルでは50pxに */
  }

}



/* SEC07 MESSAGE
------------------------------------------------------------*/
#sec07 {
  padding-top: 50px;
  margin-bottom: 100px;
  display: flex;
  justify-content: center; /* 子ブロックを中央寄せ */
}

#sec07 li {
  max-width: 600px;
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: left;
  /* box-shadow削除 */
}

#sec07 dl {
  display: grid;
  grid-template-columns: 30% 65%;
  row-gap: 20px;
  column-gap: 10%;
  margin: 0;
}

#sec07 dt {
  text-align: right;
  font-weight: 600;
  line-height: 1.6em;
}

#sec07 dd {
  text-align: left;
  line-height: 1.6em;
  margin: 0;
}

#sec07 {
  margin-bottom: 100px; /* 下に50px空ける */
}


/* モバイル用レスポンシブ（画面幅600px以下） */
@media (max-width: 600px) {
   #sec07 li {
    width: 90%;         /* 画面幅に合わせて少し余白を残す */
    margin-left: auto;  /* 左右マージン自動で中央寄せ */
    margin-right: auto;
  }
}