@charset "UTF-8";

/* common
-------------------------------------------------- */
html {
  font-size: .625rem;
}

body {
  background-color: #f8f8f8;
  color: #333;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.5;
  font-family: "ヒラギノ角ゴシック","Hiragino Sans","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: top;
}

.container{
  max-width: 680px;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
}

.container h1{
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.container h2{
  margin: 28px 0;
  padding: 8px 16px 10px;
  border-bottom: 2px solid #1a9ec9;
  border-left: 8px solid #1a9ec9;
  color: #1a9ec9;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.3;
}

.container h3{
  margin: 32px 0;
  color: #ff5a8d;
  font-weight: 600;
  font-size: 2.2rem;
}

.txtBox{
  margin: 28px 0;
}

.marking{
  background:linear-gradient(rgba(255, 255, 255, 0) 40%, #fff583 40%);
  font-weight: 600;
  font-size: 2rem;
}

.tRed{
  color: #ea0000;
  font-weight: 600;
  font-size: 2rem;
}

.container em{
  font-weight: 600;
}

.imgBox{
  margin: 28px 0;
  text-align: center;
}

.imgBox-top{
  margin: 28px 0 10px 0;
  text-align: center;
}

.btnBox{
  margin: 28px -16px;
  text-align: center;
}

.quote{
  margin: 28px 0;
  padding: 20px 24px;
  background-color: #f8f5ef;
  border-radius: 6px;
}
.quote li{
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.7;
}
.quote dt{
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 2rem;
}
.review li{
  margin: 16px 0;
  padding: 20px 24px;
  border: 1px solid #ccc;
}
.review dt{
  margin-bottom: 12px;
  font-weight: 600;
}
.review dt span{
  color: #ff9d00;
  margin-left: 8px;
  white-space: nowrap;
}
.review dd{
  font-size: 1.6rem;
}
.summary{
  margin: 28px 0;
  padding: 16px 24px;
  background-color: #e4f8ff;
  border-radius: 6px;
}
.summary li{
  position: relative;
  padding-left: 26px;
  margin: 4px 0;
}
.summary li::before{
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #1a9ec9;
  font-size: 0;
  content: "";
}

@media screen and (max-width: 768px) {
.container{
  padding: 20px;
}

}

header , footer{
	width: 100%;
	background-color: #36B6D0;
}

header p{
	color: #FFFFFF;
	padding:3px;
	margin:0;
	font-weight: bold;
	text-align: center;
}
footer p{
	color: #FFFFFF;
	padding:10px;
	margin:0;
	font-weight: bold;
	text-align: center;
}
h1 .undl {
	font-size: 2.8rem;
	background:linear-gradient(transparent 65%, #fff583 65%);
	font-weight: 600;
}