@import url(html5reset-1.6.1.css);

/* General */
* {box-sizing: border-box;}
html,body {width: 100%;}
/* html {font-size: 62.5%;} */
body {line-height: 1.0;color: #000;font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}
@media screen and (min-width: 875px) {body {font-size: 16px;}}
@media screen and (max-width: 874px) {body {font-size: 20px;font-size: 16px;}}
@media screen and (min-width: 875px) {.sp {display: none !important;}}
@media screen and (max-width: 874px) {.pc {display: none !important;}}
img {max-width: 100%;vertical-align: bottom;align-self: baseline;}


@media screen and (min-width: 875px) {
  .sp-only{
    display: none;
  }
}


/* コンテンツ */

body{
  background-image: url(https://sapporo-1ban.com/assets/img/hitotemacp2021/cp-tile-bg.png);
  width: 100%;
  background-repeat: repeat;
  background-size: 20%;
  position: relative;
  padding:56px 56px 150px 56px;
  justify-content: center;
  min-height: 100vh;
  margin:0;
}
@media screen and (max-width: 874px) {
  body{
    padding:24px;
    margin: 0;
  }
}

main {
  width:95%;
  max-width:1200px;
  margin: auto;
}
@media screen and (max-width: 874px) { /* SP */
  main {
    width:100%;
    padding-bottom: 120px;
  }
}

header{
  width:100%;
}

header img{
  width:100%;
  height:auto;
  display: block;
  margin-bottom:40px;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(189,220,239,.3);
}
@media screen and (max-width: 874px) {
  header img{
    margin-bottom:24px;
  }
}

.form-area {
  width: 100%;
  background: rgb(255,255,255);
  border-radius: 2px;
  padding: 5%;
  /* box-shadow: 0 0 4px rgba(189,220,239,.3); */
  border: 1px solid rgba(189, 220, 239, 1); 
  box-shadow: 0 0 8px rgba(189, 220, 239, 0.6);
}
@media screen and (max-width: 874px) { /* SP */
  .form-area {
    padding:24px;
  }
}

/* フォーム */

h2 {
  font-size: 32px;
  margin-bottom: 24px;
  line-height: 48px;
  letter-spacing: 2px;
  /* border-bottom: solid 2px rgb(255,15,9); */
}
/* h2 span{
  display: block;
  font-size:24px;
  line-height:32px;
  border-bottom:none;
  border-bottom: 2px solid red; 線の太さと色
  display: inline-block;        線を文字の幅に合わせる
  width: max-content;
  margin: 0 auto;
} */

h2 span {
  border-bottom: 2px solid red; /* 赤い下線 */
  display: inline-block;        /* 線の長さを文字の幅に合わせる */
  max-width: 100%;              /* ★文字が四角の枠からはみ出るのを防ぐ */
  width: auto;                  /* ★はみ出しの原因だった max-content を解除 */
  text-align: center;           /* ★文字が折り返したときも中央揃えにする */
  margin: 0 auto;
}


@media screen and (max-width: 874px) { /* SP */
  /* h2 {
    font-size: 3.8375vw;
    margin-bottom: 8vw;
  }
  h2 span{
    font-size:16px;
    line-height:24px;
  } */

  h2 {
    font-size: 20px; /* 1行目も小さくなりすぎないように固定 */
    line-height: 1.4;
    margin-bottom: 8vw;
  }
  
  /* ↓↓↓ ここを調整 ↓↓↓ */
  h2 span {
    font-size: 20px;
    line-height: 32px;
    display: inline;        /* ★重要：inlineにすることで、折り返されたすべての行に線が引かれます */
    word-break: break-all; /* 枠の端できちんと折り返すようにする */

    /* PC用の inline-block 用の設定をスマホだけ解除 */
    width: auto;
    max-width: none;
    margin: 0;
  }

}

footer{
  width: 100%;
  text-align: center;
  padding: 50px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right:0;
  background-color:red;
  color:rgb(255,255,255);
}