@charset "UTF-8";
/* CSS Document */

.btn-form{ color: #FFFFFFF; font-size: 158%; padding: 0.5em 2.5em 0.5em 1.0em; font-weight: bold; background: #1EA739 url("../index/ic-arrow-right.png") no-repeat right 0.7em center; border-radius: 0.5em;}
.btn-form-close{ background-color: #a8a8a8;}

.lead{ margin:0; padding: 2.0em 0 0 0; background: #E7F2F9;}
.lead h1{ text-align: center; margin: 0 1.0em;}

nav{ margin:2.0em 0 0 0; padding: 0;}
nav *{ margin-top: 0;}
nav .mb{ background: none;}
nav ul{ display: flex; justify-content:space-between; flex-wrap: wrap; }
nav li{ flex: 0 0 19%;}
nav li a{ display: block; background: #FFFFFF; border: solid 2px #DA535B; border-radius: 5px; text-align: center; padding: 0.5em; color: #DA535B; font-size: 128%; font-weight: bold; text-decoration: none;}
nav li a img{ width: 24px; height: 24px; vertical-align: middle; margin-left: 0.5em;}

.prize_list{ display: flex; justify-content: space-between;}
.prize_list li{ }
.prize_list img{ display: block; border-radius: 1.0em;}

.method{ background: #FFF8C6; }
.method *{ margin-top: 0;}
.method .mb{ padding-left: 0; padding-right: 0;}
.method .items{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.method .items article{ flex: 0 0 300px; margin: 1.5em 0 0 0; padding: 0 0 0.5em 0; border: solid 4px #25AAA7; border-radius: 2.0em; overflow: hidden; background: #FFFFFF;}
.method .items article .step{ background: #25AAA7; text-align: center; color: #FFFFFF; font-size: 228%; font-weight: bold;}
.method .items article h3{ margin: 0.5em 0 0 0; color: #25AAA7; text-align: center; font-size: 156%; font-weight: bold;}
.method .items article .body{ margin: 0.5em 1.0em 0 1.0em; color: #DA535B; line-height: 1.5; font-size: 108%; font-weight: bold;}

.phototerm{ margin: 0 0 0 0; padding: 0 0 2.0em 0; background: #FFFFFF; border-radius: 1.0em; overflow: hidden;}
.phototerm h2{ margin:0; padding: 0; background: #FFD200;  text-align: center; font-size: 258%; display: flex; align-items: center; justify-content: center; font-weight: bold;}
.phototerm h2 img{ margin-right: 1.0em;}
.phototerm .text-copy{ text-align: center; margin: 1.0em 0 0 0; font-weight: bold; font-size: 200%; line-height: 1.5;}
.phototerm .text-copy strong{ color: #DC161D; }
.phototerm h3{ margin:1.0em 0 0 0; padding: 0; background: #E5E5E5;  text-align: center; font-size: 258%; display: flex; align-items: center; justify-content: center; font-weight: bold;}
.phototerm ul{ display: flex; margin: 2.0em 54px 0 54px; justify-content: space-between;}
.phototerm .text-sub{ margin: 1.0em 0 0 0; text-align: center; font-size: 172%; font-weight: normal;}
.phototerm .note{ margin:2.0em 54px 0 54px;}

.shops{ background: #F5F5F5;}
.shops h2{ margin-top:0;}
.shops .note01{ text-align: center;}
.shops .note01 span{ display: inline-block; padding: 0 1.0em; background: #00693E; color: #FFFFFF; font-size: 128%; text-align: center; border-radius: 1.0em;}
.shops .note02{ margin: 0; text-align: center; font-size: 128%; color: #DA535B;}

.shoplist{ display: flex; margin: 0; justify-content: space-between; flex-wrap: wrap; font-family: 'M PLUS Rounded 1c', sans-serif;}
.shoplist article{ margin: 2.0em 0 0 0; flex: 0 0 24%; background: #FFE5D3; border-radius: 0.5em; overflow: hidden; color: #82161D;}
.shoplist figure{ display: block; margin: 0; padding: 0;}
.shoplist h3{ margin:0; height: 3.0em; display: flex; align-items: center; justify-content: center; padding: 0 0.3em; font-size: 128%;  font-weight: bold; flex-direction: column; line-height: 1.2;}
.shoplist h3 span{ display: block; font-size: 66%;}
.shoplist .sub{  margin:0; height: 3.0em; display: flex; align-items: center; justify-content: center; padding: 0 0.3em; color: #82161D; flex-direction: column; line-height: 1.5; text-align: center;}
.shoplist .title{ margin: 1.0em 0.5em 0 0.5em; background: #DA535B; text-align: center; color: #FFFFFF; border-radius: 1.0em;}
.shoplist h4{  margin:0.5em 0 0 0; height: 3.0em; display: flex; align-items: center; justify-content: center; padding: 0 1.0em; color: #82161D; flex-direction: column; line-height: 1.5; text-align: center; font-size: 93%; letter-spacing: -0.1em;}
.shoplist .body{ margin: 0.5em 0.5em 1.0em 0.5em; padding: 0.5em 0 0 0; line-height: 1.5; font-size: 93%; border-top: solid 2px #DA535B;}

.outline{ background: #FFF8C6; margin: 0;}
.outline *{ margin-top: 0;}
.outline .section-title{ margin-top: 0;}
.outline table{ margin: 2.0em 0 0 0; border-top: solid 1px #DA535B;}
.outline table th,
.outline table td{ padding: 0.7em 1.0em; border-bottom: solid 1px #DA535B; text-align: left;}
.outline table th{ white-space: nowrap; font-weight: bold;}
.outline .ouline_prize_list{ display: flex;}
.outline .ouline_prize_list figcaption{ display: block; padding: 0 2.0em;}

.list-maru{}
.list-maru li{ padding-left: 1.0em; text-indent: -1.0em;}
.list-maru li:before{ content:'○';}

.terms{}
.terms *{ margin-top: 0;}
.terms h3{ margin-top: 1.0em; font-weight: bold;}
.terms h3::first-letter{ color: #DA535B;}
.terms p{ margin-top: 1.0em;}
.terms hr{ margin: 1.0em 0 1.0em 0; border: 2px #DA535B; border-style: solid none none none;}


.contact{ margin: 0; padding: 0;}
.contact article{ background: #DA535B; color: #FFFFFF; padding: 2.0em 50px; border-radius: 1.0em; text-align: center; }
.contact .section-title{ background: #FFFFFF; color: #DA535B; margin: 0;}
.contact .text01{ font-size: 172%; line-height: 1.2; font-weight: bold;}
.contact .text01 .text-caption{ font-size: 66%; font-weight: normal;}
.contact .text02{ font-size: 172%; line-height: 1.2; font-weight: bold;}
.contact .text02 a{ color: #FFFFFF;}
.contact .text03{ margin:0; font-size: 128%;}
.contact .text-block{ width: 70%; margin-left: auto; margin-right: auto; text-align: left;}

.ftform{ background: #FFFFFF;}

.sns{ background: #EEDCBE; margin: 0;}
.sns .mb{ background: none; padding: 1.0em 0;}
.sns .mb div{ margin: 0; display: flex; justify-content: center;}
.sns .mb div figure{ display: block; margin: 0 1.0em;}
.sns .mb div figure img{ display: block;}

@media screen and ( max-width: 480px ) {
  
  .btn-form{ width: 100%;}
  
  nav ul{ justify-content: space-between; margin: 0;}
  nav li{ flex: 0 0 48%; margin-top: 1.0em;}
  
  .prize_list{ display: block;}
  .prize_list li{ teex-align: center;}
  .prize_list li img{ display: block; margin: 0 auto;}
  
  .product .items article{ flex: 0 0 100%;}
  
  .method .items{ display: block;}
  .phototerm h2{ font-size: 182%;}
  .phototerm .text-copy{ font-size: 150%; text-align: left; padding: 0 0.5em;}
  .phototerm h3{ font-size: 182%;}
  .phototerm ul{ margin: 2.0em 1.0em 0 1.0em; flex-wrap: wrap;}
  .phototerm ul li{ flex: 0 0 48%;}
  .phototerm ul.badlist li{ flex: 0 0 32%;}
  .phototerm .text-sub{ font-size: 128%; padding: 0 0.5em; text-align: left;}
  .phototerm .note{ margin:2.0em 0.5em 0 0.5em;}
  
  .shoplist article{ flex: 0 0 49%;}
  
  .shoplist .sub{ line-height: 1.2; font-size: 93%;}
  .shoplist h4{ line-height: 1.2; height: 3.5em;}
  .outline table,
  .outline table tr,
  .outline table th,
  .outline table td{ display: block;}
  .outline table th{ border-bottom: none; font-weight: bold; padding-bottom: 0; padding-left: 0; padding-right: 0;}
  
  .outline .ouline_prize_list{ display: block; }
  .outline .ouline_prize_list figcaption{ display: block; text-align: center;}
  
  .contact article{ padding: 1.0em; }
  .contact .text01{ font-size: 128%; line-height: 1.2; font-weight: bold;}
  .contact .text01 .text-caption{ font-size: 86%; font-weight: normal;}
  .contact .text02{ font-size: 128%; line-height: 1.2; font-weight: bold;}
  .contact .text02 a{ color: #FFFFFF;}
  .contact .text03{ margin:0; font-size: 108%;}
  .contact .text-block{ width: 100%;}
}