@charset "UTF-8";
/* 斜めgrad */
/*ALL Settings*/
/*-----------------------------------------------*/
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.sp-none {
  display: block;
}

.pc-none {
  display: none;
}

/*-----------------------------------
    header
-----------------------------------*/
header {
  width: 100%;
}

.kv {
  width: 100%;
}

.kv img {
  width: 100%;
}

.kv-sp {
  width: 100%;
  display: none;
}

.kv-sp img {
  width: 100%;
}

main {
  width: 100%;
  margin-bottom: 40px;
}

/*-----------------------------------
    content-style
-----------------------------------*/
.content-style {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 130px;
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
}

.content-style h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content-style h1:after {
  font-size: 50px;
}

.content-style span {
  font-size: 10px;
  display: block;
  letter-spacing: 2.0px;
  margin-bottom: 40px;
}

.content-style p {
  font-size: 14px;
  line-height: 2.0;
  margin-bottom: 30px;
}

.content-style img {
  margin-bottom: 30px;
}

.content-style a {
  font-weight: bold;
  color: #e150a3;
}

.content-style .special-bn {
  width: 200px;
  margin: 0 auto;
}

.content-style .special-bn img {
  margin-bottom: 10px;
}

/*-----------------------------------
    before-after
-----------------------------------*/
.before-after {
  width: 100%;
  margin-bottom: 80px;
}

.before-after-wrap {
  width: 100%;
  background-color: #fed100;
}

.before-after-base {
  max-width: 1000px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.before-after-title {
  width: 55%;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.before {
  width: 35%;
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.before img {
  width: 100%;
  max-width: 337px;
}

.before-sp {
  display: none;
}

.arrow {
  margin: 100px 0 40px;
  text-align: center;
}

.after {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.after img {
  width: 100%;
  max-width: 978px;
  margin-bottom: 60px;
}

.after a {
  max-width: 460px;
  margin: 0 auto;
  margin-bottom: 60px;
  padding: 26px 40px;
  font-size: 18px;
  text-align: center;
  background-color: #efeeee;
  border-radius: 40px;
  display: block;
}

.after-sp {
  display: none;
}

.be-af-bn {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 20px;
  text-align: center;
}

.be-af-bn img {
  max-width: 100%;
}

.etc-bn {
  max-width: 690px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 12px;
  text-align: right;
}

.etc-bn a {
  padding: 10px 36px 10px 20px;
  background-color: #efeeee;
  border-radius: 50px;
}

.etc-bn span {
  margin-right: 14px;
}

.application-wrap {
  width: 100%;
  padding: 80px 0 20px;
  background-color: #efeeee;
}

.application {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 80px;
  padding: 0 20px;
  font-size: 13px;
}

.application dl {
  max-width: 870px;
  margin: 0 auto;
  margin-bottom: 70px;
}

.application dl dt {
  margin-bottom: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  font-weight: bold;
}

.application dl dd {
  padding: 0 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px dotted #3e3a39;
}

.application dl dd span {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.application dl dd.none-border {
  border-bottom: 0;
  margin-bottom: 0;
}

.application a.btn {
  max-width: 360px;
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 70px;
  padding: 20px 0;
  background-color: #fed100;
  display: block;
  border-radius: 40px;
}

.notes {
  max-width: 870px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  background-color: #d2d2d2;
  border-radius: 10px;
}

.notes p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.notes ul {
  margin-left: 1em;
}

.notes li {
  font-size: 12px;
  margin-bottom: 4px;
  text-indent: -1.0em;
}

.notes a {
  font-size: 12px;
  text-decoration: underline;
}

.notes span {
  font-size: 12px;
  margin-bottom: 4px;
}

/*-----------------------------------
    footer
-----------------------------------*/
footer {
  padding-bottom: 40px;
}

.footer-banner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 40px;
}

.footer-banner img {
  margin: 0 10px;
}

.copylight {
  font-size: 10px;
  letter-spacing: 2.0px;
  text-align: center;
}

.copylight p {
  color: #a6a5a5;
}