/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* STYLES ======================================================== */

/* ルートのフォントサイズを10pxに設定 */
html {
  font-size: 62.5%;
}

/* bodyのフォントサイズを16pxに設定 */
body {
  font-size: 1.6em;
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-s{
  font-size: 1.2rem;
}

.font-m{
  font-size: 1.6rem;
}

.font-l{
  font-size: 2rem;
}

/*文字色*/
.font-red{
  color: #c00;
}

.font-blue{
  color: #039;
}


*{
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fdfdd8;
}

/*下記marginやpadding、widthはサイトデザインに合わせて調整*/

main{
  max-width: 1200px;
	margin: 0 auto;
  padding: 0;
}

main p{
	margin: 0;
}

footer{
  max-width: 1200px;
	margin: 0 auto;
  padding: 20px 0;
	background-color: #df57a5;
	color: #fff;
	text-align: center;
}

/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;　/*Chromeで画像がぼやけるのを防止*/
}

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 77%;
  width: 20%;
  max-width: 194px;
  z-index: 1000;
}
#page-top img {
  width: 100%;
}
/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span{
  display: inline-block;
  white-space: nowrap;
}