html {
  min-height:100%;
  position:relative;
}

body {
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  display: flex;
  flex-flow: column;
  width:100%;
  height:100%;
  min-height: 100vh;
  overflow-x: hidden;
}

header {
  position: relative;
  width:100%;
  background:#fff;
}

main {
  flex: 1;
  margin-bottom:50px;
}

footer  {
  text-align:center;
  background:#513a90;
  padding:10px 0;
}

footer p  {
  font-size:11px;
  color:#fff;
}


/*テキスト関連の調整*/
p {
  color: #343434;
  font-size:1.3rem;
  line-height:2;
}

h1 {
  color: #343434;
  text-align:center;
  font-size:2.2rem;
  font-weight:800;
  line-height: 1.5;
}

h2 {
  color: #343434;
  position:relative;
  margin-bottom: 1rem;

  text-align:center;
  font-size:1.8rem;
  font-weight:bold;
  line-height:3;
}

h3{
  color: #343434;
  margin-bottom: 1rem;

  text-align:center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2;
}

h4 {
  color: #343434;
  font-size: 1.5rem;
  line-height: 1.5;
}

/*全体*/
#container {
  width:90%;
  margin:10px auto;
  text-align:center;
}

#container .inner {
  padding:0 20px 20px;
}

.h-underline{
  width:90%;
  max-width:600px;
  margin:50px auto 20px;
  border-bottom:2px solid #343434;
}

.h-block {
  display:inline-block;
  margin:40px auto;
  padding:0.6em;
  border-radius:2px;
  font-size:1.6rem;
  font-weight: bold;
  cursor: pointer;

  color: #FEFEFE;
  background: #888;
}
.block-violet {
  color: #EEE;
  box-shadow: 0px 1px 1px 0px hsla(0, 0%, 3%, 0.7);
  text-shadow: 0 -1px 1px hsla(256,42%,20%, 0.9);
  background: hsla(256,42%,39%,1);
  text-decoration: none;
}
.block-violet:hover {
  color: #FFF;
  background: hsla(256,42%,60%,1);
}
.block-sakura{
 color: #FEFEFE;
 box-shadow: 0px 1px 1px 0px hsla(0, 0%, 3%, 0.7);
 text-shadow: 0 -1px 1px hsla(337,57%,31%, 0.9);
 background: #E08DAC;
}
.block-sakura:hover {
  color: #FFF;
  background: hsla(337,57%,81%,1);
}

.lead {
  line-height: 1.6;
  padding:0.6em 0.8em 0.6em 1em;
  margin: 2em auto 0;
  border-left:solid 8px #513a90;
  text-align: left
}

.section {
  position: relative;
  padding:0 0 60px;
}
.section::before{
  position: absolute;
  content: '';
  width: 100vw;
  height: 20px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top:5px;
  border-top: solid 1px #DDD;
}

.center-box {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}



/*メディアクエリ　タブレット・スマホ*/
@media screen and (max-width:920px) {

  #container {
    width:95%;
  }

  #container .inner {
    padding:0;
  }
} /*メディアクエリ終わり*/