@charset "UTF-8";
/* CSS Document */
header {
  margin: 0 auto;
  min-height: 580px;
  background-image: url("../img/header_bg01.jpg");
  background-position: 50% 250%;
  margin-bottom: 1em;
}
main {
  max-width: 900px;
  margin: 0 auto;
}
footer {
  margin: 0 auto;
  min-height: 110px;
  text-align: center;
}
footer .summary a {
  color: #fff;
}
footer #copy {
  font-size: 0.9em;
  margin: 5px;
}
footer #copy a {
  text-decoration: none;
}
.bg_rgba {
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  justify-content: center;
  align-items: center;
  padding: 30px 10px 10px;
}
h1, h2, h3, h4, h5 {
  margin-bottom: 1.0em;
}
h1 {
  text-align: center;
  font-family: Ryumin Bold KL;
  font-size: 3em;
  margin-bottom: 0.5em;
}
h1 span {
  font-size: 0.8em;
}
h2 {
  font-family: Midashi Go MB31;
  font-size: 1.8em;
  color: #351000;
  position: relative;
  padding-bottom: 9px;
  padding-left: 5px;
}
h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #351000, #351000 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #351000, #351000 2px, #fff 2px, #fff 4px);
}
h3 {
  font-family: Ryumin Bold KL;
  border-left: 7px solid #351000;
  border-bottom: 1px dotted #351000;
  font-size: 1.5em;
  padding: 0 0 5px 10px;
}
h3 span {
  background: #23ac38;
  color: #fff;
  font-size: 0.6em;
  padding: 2px;
}
h4 {
  font-family: Midashi Go MB31;
  color: #351000;
  background: #fdfbd1;
  font-size: 1.3em;
  padding: 0.2em 0.5em;
  text-align: center;
}
sub {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #351000;
  text-align: center;
}
main p strong {
  background: #fcfada;
}
p {
  margin-bottom: 1em;
}
p.note {
  font-size: 0.9em;
  background: #fafafa;
  border: dotted 1px #666666;
  padding: 10px;
  margin-bottom: 2em;
}
p.note02 {
  font-size: 0.9em;
  background: #fafafa;
  padding: 10px;
  margin-bottom: 2em;
}
p.note03 {
  font-size: 0.8em;
  line-height: 1.5em;
  background: #fff;
  padding: 10px;
  margin: 1.5em 0 0;
}
th a {
  color: #fff;
  text-decoration: underline dotted;
}
th a:hover {
  color: #fff;
  text-decoration: none;
}
#copy a {
  color: #333;
}
a:hover {
  opacity: 0.9;
}
div.read {
  position: relative;
  top: 250px;
}
div.read, div.summary {
  background: #351000;
  color: #fff;
  padding: 15px 10px;
}
div.read p, div.summary p {
  max-width: 900px;
  margin: 0.7em auto;
}
div.read p strong, div.summary p strong {
  color: #FEF300;
}
.point {
  margin-bottom: 3em;
}
.point p img {
  text-align: center;
  margin: 0 auto;
}
.point ul {
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 1.3em;
}
.point ul li {
  line-height: 1.5em;
  margin-bottom: 1em;
  padding-left: 2em;
}
.point ul li span {
  border-bottom: 7px #FEF300 solid;
}
.point dl {
  margin-bottom: 1em;
}
.point dl dt {
  font-weight: bold;
}
.point dl dd {
  margin-bottom: 0.5em;
}
.point3 dl {
  display: block;
}
.point3 dt {
  display: block;
  width: 20%;
  height: 150px;
  float: left;
}
.point3 dd {
  display: block;
  width: 80%;
  height: 150px;
  float: left;
  margin-top: 3em;
}
.point3 dd span {
  font-weight: bold;
}
.point table {
  font-size: 0.9em;
  margin-bottom: 3em;
}
.point table caption {
  text-align: left;
  margin: 2em 1em 0.5em;
}
.point table th {
  background: #351000;
  color: #fff;
  padding: 5px;
}
.point table td {
  width: 15%;
  vertical-align: top;
  text-align: center;
  min-width: 120px;
  padding: 8px;
}
.point table td img {
  width: 80%;
}
.point table td img {
  text-align: center;
  margin: 0 auto;
}
.point table td img.crown {
  width: 35px;
}
.point table td.valBest {
  background: url("../img/val_best.png") center no-repeat;
}
.point table td.valGood {
  background: url("../img/val_good.png") center no-repeat;
}
.point table td.valNormal {
  background: url("../img/val_normal.png") center no-repeat;
}
.point table.cheap td {
  background: #fafafa;
}
.point sup {
  font-weight: normal;
}
#subscription {
  background: #fcfada;
  padding: 1em;
  margin-bottom: 3em;
}
#subscription h3 {
  border-left: none;
  text-align: center;
}
.point #subscription ul {
  font-weight: normal;
  font-size: 1em;
  background: #fff;
  padding: 1em;
  margin-bottom: 0;
}
.point #subscription ul li {
  padding: 0;
}
span.star {
  color: #F2B242;
  font-size: 1.3em;
}
span.nostar {
  color: #ccc;
  font-size: 1.3em;
}
div.product {
  clear: both;
}
div.product .fLeft {
  float: left;
  width: 30%;
  text-align: center;
}
div.product .fLeft img {
  text-align: center;
  margin: 0 auto;
}
div.product .fRight {
  float: left;
  width: 70%;
}
div.product dl.price {
  border-bottom: 1px solid #351000;
}
div.product dl.price dt, div.product dl.price dd {
  display: inline-block;
}
div.product dl.price dt {
  margin-right: 0.2em;
}
div.product dl.price dd {
  margin-right: 0.8em;
}
div.product table th {
  width: 30%;
}
div.product table td {
  width: 35%;
}
dl.checkPoint {
  /*background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 3px, #fff 0, #fff 6px);
  border: dotted 1px #666666;
  font-size: 1.2em;*/
  padding: 10px;
  margin-bottom: 2em;
}
dl.checkPoint dt {
  margin: 0.5em 0;
  font-family: Midashi Go MB31;
  font-size: 1.1em;
  color: #351000;
}
dl.checkPoint dd::before {
  content: "◎ ";
}
dl.checkPoint dd.minus:before {
  content: "△ ";
}
ul.checkPoint {
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 3px, #fff 0, #fff 6px);
  border: dotted 1px #666666;
  font-size: 1.2em;
  margin-bottom: 2em;
}
ul.checkPoint li {
  margin: 1em;
  padding: 0;
  border-bottom: none;
}
.checkPoint > li:before {
  background: url(../img/icon_good@2x.png) no-repeat center center / contain;
  content: "";
  display: inline-block;
  height: 1em;
  margin: 0 .25em 0 0;
  width: 1em;
  vertical-align: middle;
}
.checkPoint > li.good:before {
  background: url(../img/icon_good@2x.png) no-repeat center center / contain;
}
ul.checkPoint li.bad:before {
  background: url(../img/icon_bad@2x.png) no-repeat center center / contain;
}
/*clearfix*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix:before {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  display: block;
}
/* リスト チェックボックス */
.list_check > li {
  position: relative;
}
.list_check > li::before, .list_check > li::after {
  position: absolute;
  top: 50%;
  height: 1em;
  content: "";
}
.list_check > li::before {
  left: 0px;
  transform: translateY(-50%);
  width: 1em;
  border: 1px solid #333;
}
.list_check > li::after {
  left: 0.5em;
  transform: translateY(-75%) rotate(45deg);
  width: 0.5em;
  border-bottom: 3px solid #23ac38;
  border-right: 3px solid #23ac38;
}
/* リンクボタン */
a.btn_01, a.btn_02, a.btn_03 {
  display: block;
  font-family: Shuei NijimiMGo B;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn_01 {
  width: 70%;
  margin: 3em auto;
  padding: 1em 2em;
  border: 2px solid #27acd9;
  background: #27acd9;
  font-size: 1.3em;
  line-height: 1em;
}
a.btn_01:hover {
  color: #27acd9;
  background: #fff;
}
a.btn_02, a.btn_03 {
  border: 2px solid #ea5413;
  background: #ea5413;
}
a.btn_02 {
  margin: 5px auto;
  padding: 5px;
  font-size: 1.1em;
}
a.btn_03 {
  width: 90%;
  margin: 1.5em auto 5em;
  padding: 1rem 2rem;
  font-size: 1.5em;
}
a.btn_02:hover, a.btn_03:hover {
  color: #ea5413;
  background: #fff;
}
/* ボタンエフェクト shine */
.btn_shine {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.btn_shine::after {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  animation: animation01 3s ease-in-out infinite;
}
@keyframes animation01 {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}
/* ボタンエフェクト move */
.btn_move {
  animation: animation02 1.0s ease 0s infinite alternate;
  transform-origin: center;
}
@keyframes animation02 {
  from {
    transform: scale(0.95, 0.95);
  }
  to {
    transform: scale(1.05, 1.05);
  }
}
/* 矢印 */
.arrow01 {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid currentColor;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  margin-right: 0.7em;
  margin-bottom: 0.1em;
}
.arrow01::before {
  content: '';
  color: #27acd9;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.36em 0.62354em;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
a.btn_01:hover .arrow01 {
  color: #27acd9;
}
a.btn_01:hover .arrow01::before {
  color: #fff;
  background: #27acd9;
}
/* 調整用 */
.font-s {
  font-size: 0.8em;
}
.font-m {
  font-size: 1.3em;
}
.font-l {
  font-size: 1.8em;
}
.font-bold {
  font-weight: bold;
}
.font-red {
  color: #ff0000;
}
.marker {
  background: #fcfada;
}
.bg01 {
  background: #fafafa;
}
.pt1em {
  padding-top: 1em;
}
.mR1em {
  margin-right: 1em;
}
.mT3em {
  margin-top: 3em;
}
.aCenter {
  text-align: center;
}
.aRight {
  text-align: right;
}
.fLeft {
  float: left;
}
.fRight {
  float: right;
}
.width70per {
  width: 70%;
}