@charset "UTF-8";
.sp {
  display: block!important
}

.pc {
  display: none!important
}

body {
  font-size: 14px;
  font-size: 1.4rem
}

img {
  width: 100%
}

article {
  min-width: 100%
}

header>.inner {
  height: 50px;
  min-width: 100%
}

header>.inner>.logo {
  width: 82px;
  margin-top: 12px;
  margin-left: 20px
}

header>.inner>.menu {
  display: none
}

header>.inner .spMenu {
  display: block;
  float: right
}

header>.inner .spMenuBtn {
  width: 50px;
  height: 50px;
  background: #fbec7a;
  position: relative
}

header>.inner .spMenuBtn>span {
  position: absolute;
  left: 50%;
  margin-left: -10px;
  display: block;
  width: 20px;
  height: 2px;
  background: #000;
  border-radius: 1px;
  transition: .3s
}

header>.inner .spMenuBtn>span:first-child {
  top: 17px
}

header>.inner .spMenuBtn>span:nth-child(2) {
  top: 50%;
  margin-top: -1px
}

header>.inner .spMenuBtn>span:last-child {
  bottom: 17px
}

header>.inner .spMenuBtn.jsActive>span:first-child {
  top: 24px;
  transform: rotate(45deg)
}

header>.inner .spMenuBtn.jsActive>span:nth-child(2) {
  opacity: 0
}

header>.inner .spMenuBtn.jsActive>span:last-child {
  bottom: 24px;
  transform: rotate(-45deg)
}

header>.inner .spMenu>.menu {
  display: none;
  position: absolute;
  left: 0;
  top: 51px;
  z-index: 100;
  width: 100%;
  background: #fff;
  padding: 30px 20px
}

header>.inner .spMenu>.menu>ul {
  list-style: none
}

header>.inner .spMenu>.menu>ul>li {
  border-top: 1px solid #d1d1d1
}

header>.inner .spMenu>.menu>ul>li:last-child {
  border-bottom: 1px solid #d1d1d1
}

header>.inner .spMenu>.menu>ul>li>a {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 15px 0;
  background: url(../img/ico_header_arrow_sp.svg) no-repeat right center
}

footer {
  border-top: 1px solid #d5d5d5
}

footer>.inner {
  min-width: 100%
}

footer>.inner p {
  font-size: 1rem
}

footer .contactBtn {
  width: 90%
}

footer .contactBtn>a {
  font-size: 2rem
}

footer .contactBtn>a>span {
  position: static;
  font-size: 1.4rem
}

footer .pageTopBtn {
  right: 20px;
  bottom: 90px
}

.bgYellow {
  background: #fff07c
}

.bgYellow>.roundCont {
  padding: 50px 20px 50px
}

.bgYellow>.roundCont:after {
  height: 9px;
  background-size: 62px auto
}

.bgYellow>.roundCont .round {
  width: 168px;
  height: 168px
}

.bgYellow>.roundCont .round01 {
  top: 7px;
  left: -52px
}

.bgYellow>.roundCont .round02 {
  top: 120px;
  left: 111px
}

.bgYellow>.roundCont .round03 {
  top: -29px;
  right: -32px
}

.bgYellow>.roundCont .round04 {
  top: 444px;
  right: -28px
}

.bgYellow>.roundCont .round05 {
  bottom: -25px;
  left: -64px
}

.bgYellow>.roundCont .round06 {
  bottom: -73px;
  right: -47px
}

.bgYellow>.roundCont>.inner {
  width: 100%;
  margin: 0 auto;
  position: relative
}

.btn {
  margin-top: 20px
}

.btn button, .btn>a {
  font-size: 1.4rem;
  padding: 5px 10px 5px
}

.mainVisual {
  min-height: 760px;
  height: auto!important;
  margin-top: 50px
}

.mainVisual .pageTitleBox {
  width: 100%;
  height: 100%;
  float: none
}

.mainVisual .pageTitleBox>.roundBox {
  display: none
}

.mainVisual .pageTitleBox>.inner {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  transform: none;
  width: 100%;
  padding: 55px 20px 34px;
  background: #fff;
  transform: skewY(-7deg);
  margin-top: -33px;
  overflow: hidden
}

.mainVisual .pageTitleBox>.inner>* {
  transform: skewY(7deg)
}

.mainVisual .pageTitleBox>.inner>.spRoundBox {
  display: block;
  width: 100%;
  height: calc(100% + 64px);
  position: absolute;
  top: -32px;
  left: 0
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  display: none;
  position: absolute
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round01 {
  background: rgba(52, 157, 216, .2);
  top: 196px;
  left: -43px
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round01.jsActive {
  animation: roundAnime01 10s linear infinite
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round02 {
  background: rgba(255, 136, 20, .2);
  top: 33px;
  right: -20px
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round02.jsActive {
  animation: roundAnime02 10s linear infinite
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round03 {
  background: rgba(57, 165, 0, .2);
  bottom: 48px;
  left: 97px
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round03.jsActive {
  animation: roundAnime03 10s linear infinite
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round04 {
  background: rgba(231, 59, 23, .2);
  bottom: 123px;
  right: -44px
}

.mainVisual .pageTitleBox>.inner>.spRoundBox>.round04.jsActive {
  animation: roundAnime04 10s linear infinite
}

.mainVisual .pageTitleBox>.inner .title {
  font-size: 1.4rem
}

.mainVisual .pageTitleBox>.inner .title>.startImg {
  width: 142px;
  right: 0;
  top: -60px
}

.mainVisual .pageTitleBox>.inner .title>.catchcopy {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  font-size: 18px;
  font-size: 1.8rem
}

.mainVisual .pageTitleBox>.inner .title>.catchcopy span.line {
  background: linear-gradient(transparent 80%, #edb90b 80%)
}

.mainVisual .pageTitleBox>.inner .title>.catchcopy+img {
  display: block;
  width: 88%;
  margin: 0 auto
}

.mainVisual .pageTitleBox>.inner .title+p {
  margin-top: 30px;
  font-size: 1.4rem
}

.mainVisual .pageTitleBox>.spSliderBox {
  height: 208px;
  position: relative;
  overflow: hidden
}

.mainVisual .pageTitleBox>.spSliderBox .bgImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: bgImgAnimeSp 15s infinite;
  width: 100%;
  height: 100%
}

.mainVisual .pageTitleBox>.spSliderBox01 .bgImg.slide01 {
  background: url(../img/img_main_sp_01.jpg) no-repeat center top/cover
}

.mainVisual .pageTitleBox>.spSliderBox01 .bgImg.slide02 {
  background: url(../img/img_main_sp_03.jpg) no-repeat center top/cover;
  animation-delay: 5s
}

.mainVisual .pageTitleBox>.spSliderBox01 .bgImg.slide03 {
  background: url(../img/img_main_sp_05.jpg) no-repeat center top/cover;
  animation-delay: 10s
}

.mainVisual .pageTitleBox>.spSliderBox02 {
  margin-top: -33px
}

.mainVisual .pageTitleBox>.spSliderBox02 .bgImg.slide04 {
  background: url(../img/img_main_sp_02.jpg) no-repeat center top/cover
}

.mainVisual .pageTitleBox>.spSliderBox02 .bgImg.slide05 {
  background: url(../img/img_main_sp_04.jpg) no-repeat center top/cover;
  animation-delay: 5s
}

.mainVisual .pageTitleBox>.spSliderBox02 .bgImg.slide06 {
  background: url(../img/img_main_sp_06.jpg) no-repeat center top/cover;
  animation-delay: 10s
}

@keyframes bgImgAnimeSp {
  0% {
    opacity: 0
  }
  10% {
    opacity: 1
  }
  50% {
    opacity: 1
  }
  90% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.mainVisual .sliderBox {
  display: none
}

main>section h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1.2
}

main>section h2>span {
  font-size: 2rem
}

main>section h2+p {
  font-size: 1.4rem
}

#worries>.inner {
  width: 100%;
  margin: 0 auto;
  padding: 50px 20px
}

#worries>.inner .worriesCont {
  margin-top: 30px;
  padding: 20px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  border: 2px solid #d5d5d5;
  border-radius: 15px;
  position: relative
}

#worries>.inner .worriesCont>.item {
  margin-left: 0;
  margin-top: 20px
}

#worries>.inner .worriesCont>.item:first-child {
  margin-left: 0
}

#worries>.inner .worriesCont>.item p {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem
}

#worries>.inner .worriesCont>.item:first-child p {
  position: absolute;
  top: 78px;
  left: 152px
}

#worries>.inner .worriesCont>.item:nth-child(2) p {
  position: absolute;
  top: 236px;
  left: 148px
}

#worries>.inner .worriesCont>.item:nth-child(3) p {
  position: absolute;
  top: 403px;
  left: 138px
}

#worries>.inner .worriesCont>.item>div.img {
  width: 100%
}

#solve {
  position: relative
}

#solve>.img {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%)
}

#solve>.roundCont>.inner {
  max-width: 100%;
  margin: 0 auto;
  position: relative
}

#solve>.roundCont>.inner .colBox {
  margin-top: 30px;
  display: flex;
  flex-flow: column;
  justify-content: space-between
}

#solve>.roundCont>.inner .colBox>.col {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #d5d5d5;
  border-radius: 10px;
  background: #fff;
  overflow: hidden
}

#solve>.roundCont>.inner .colBox>.col:last-child {
  margin-bottom: 0
}

#solve>.roundCont>.inner .colBox>.col .tag {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 6px 10px
}

#solve>.roundCont>.inner .colBox>.col .tag.blue {
  background: #0459a7
}

#solve>.roundCont>.inner .colBox>.col .tag.red {
  background: #e73b17
}

#solve>.roundCont>.inner .colBox>.col .tag.orange {
  background: #fe8814
}

#solve>.roundCont>.inner .colBox>.col .detail {
  display: flex;
  padding: 20px
}

#solve>.roundCont>.inner .colBox>.col .detail .img {
  width: 74px;
  margin-right: 20px
}

#solve>.roundCont>.inner .colBox>.col .detail p {
  padding-top: 0;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 700;
  text-align: left
}

#set>.inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 20px;
  position: relative
}

#set>.inner .setContent {
  border-radius: 10px;
  margin-top: 50px;
  position: relative
}

#set>.inner .setContent>.setDetail {
  position: relative
}

#set>.inner .setContent>.setDetail {
  padding: 40px 20px 20px;
  border-radius: 10px;
  border: 2px solid #d5d5d5
}

#set>.inner .setContent>.setDetail>.heading {
  position: absolute;
  width: 252px;
  top: -22px;
  left: 50px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: 30px
}

#set>.inner .setContent>.setBox>.heading {
  background: #fff07c;
  border: 2px solid #d5d5d5
}

#set>.inner .setContent>.setDetail:first-child .colBox {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between
}

#set>.inner .setContent>.setDetail:first-child .colBox>p {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400
}

#set>.inner .setContent>.setDetail:first-child .colBox>.img {
  margin-left: 0;
  margin-top: 20px
}

#set>.inner .setContent>.setDetail:first-child .colBox>.img img {
  width: 275px
}

#set>.inner .setContent>.setDetail:nth-child(2) {
  margin-top: 50px
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox {
  margin-top: 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox>.promoCont {
  width: 280px;
  margin-left: 0;
  margin-top: 20px;
  border: 2px solid #d5d5ca;
  border-radius: 10px;
  text-align: center
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox>.promoCont:first-child {
  margin-left: 0;
  margin-top: 0
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox>.promoCont>p {
  padding: 20px 20px 15px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0659a7;
  text-align: center
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox>.promoCont>.img {
  padding: 0 25px 20px
}

#set>.inner .setContent>.setDetail:nth-child(2) .promoBox>.promoCont>.img img {
  width: 220px
}

#set>.inner .setContent>.setDetail:nth-child(3) {
  margin-top: 50px
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox {
  margin-top: 20px;
  display: flex;
  flex-flow: column;
  justify-content: space-between
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont {
  display: flex;
  flex-flow: column;
  align-items: center
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>p {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>p span {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>p.tex {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 70px;
  border-radius: 10px
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>p.bgOrange {
  color: #fff;
  background: #fe8814
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>p.bgWhite {
  color: #0659a7;
  background: #fff;
  border: 2px solid #d5d5d5
}

#set>.inner .setContent>.setDetail:nth-child(3) .productionBox>.productionCont>.arrow {
  margin-left: 0;
  margin: 10px 0
}

#set>.inner .setContent>.setDetail:nth-child(3) .annotation {
  margin-top: 8px;
  margin-right: 0;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center
}

#set>.inner .setArrow {
  margin: 15px 0;
  text-align: center
}

#set>.inner .setArrow img {
  width: 35px
}

#set>.inner .goalCont {
  padding: 20px 20px 0;
  background: url(../img/bg_sp_confetti.svg) no-repeat center top 5px #fff
}

#set>.inner .goalCont p {
  width: 275px;
  margin: 0 auto 20px;
  padding: 6px;
  font-size: 18px;
  font-size: 1.8rem;
  border-radius: 50px
}

#efficacy>.roundCont>.inner {
  max-width: 100%;
  margin: 0 auto
}

#efficacy>.roundCont>.inner .efficacyCont {
  margin-top: 30px;
  padding: 20px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #d5d5d5;
  border-radius: 20px;
  position: relative
}

#efficacy>.roundCont>.inner .efficacyCont>.item {
  margin-left: 0;
  margin-top: 20px
}

#efficacy>.roundCont>.inner .efficacyCont>.item:first-child {
  margin-left: 0;
  margin-top: 0
}

#efficacy>.roundCont>.inner .efficacyCont>.item>div.img {
  width: 100%
}

#pricePlan .pricePlanTop>.inner {
  padding: 50px 20px
}

#pricePlan .pricePlanTop>.inner .planDetail {
  margin-top: 30px
}

#pricePlan .pricePlanTop>.inner .setOrder>p {
  font-size: 1.6rem;
  font-weight: 700
}

#pricePlan .pricePlanTop>.inner .setOrder>.offTxt {
  font-size: 2rem
}

#pricePlan .pricePlanTop>.inner .setOrder>.offTxt>span {
  font-size: 3rem
}

#pricePlan .pricePlanTop>.inner .setOrder>.offTxt>span.small {
  font-size: 2rem
}

#pricePlan .pricePlanTop>.inner .setOrder>.notes {
  position: static;
  text-align: center;
  font-weight: 400
}

#pricePlan .pricePlanTop>.inner .planDetail {
  margin-top: 30px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box.border .priceTable {
  margin-top: 20px;
  overflow: auto;
  position: relative
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable .swipeInfo {
  display: block;
  transition: .3s;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: rgba(0, 0, 0, .7);
  border-radius: 50%;
  text-align: center
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable .swipeInfo.jsScrollIn {
  animation: swipeInfoAnime 1.5s
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable .swipeInfo>img {
  width: 63px;
  margin-top: 31px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table {
  width: 1000px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr.con th.heading {
  width: 50px;
  padding: 10px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.tRed {
  height: 200px;
  font-size: 18px;
  font-size: 1.8rem;
  padding: 10px 5px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.tBlue {
  height: 146px;
  font-size: 18px;
  font-size: 1.8rem;
  padding: 10px 5px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.tOrange {
  height: 276px;
  font-size: 18px;
  font-size: 1.8rem;
  padding: 10px 5px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr td.bgRed {
  font-size: 16px;
  font-size: 1.6rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr td.bgBlue {
  font-size: 16px;
  font-size: 1.6rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr td.bgOrange {
  font-size: 16px;
  font-size: 1.6rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th {
  padding: 10px
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr td {
  padding: 15px 10px;
  text-align: center
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th {
  font-size: 18px;
  font-size: 1.8rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.plan .tex {
  font-size: 14px;
  font-size: 1.4rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.plan .big {
  font-size: 22px;
  font-size: 2.2rem
}

#pricePlan .pricePlanTop>.inner .planDetail>.box .priceTable table tr th.plan .small {
  font-size: 12px;
  font-size: 1.2rem
}

#pricePlan .pricePlanTop>.inner p.annotation {
  font-size: 14px;
  font-size: 1.4rem
}

@keyframes swipeInfoAnime {
  0% {
    opacity: 0
  }
  33% {
    opacity: 1
  }
  66% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

#flow>.inner {
  padding: 50px 20px
}

#flow>.inner .flowList {
  margin-top: 30px
}

#flow>.inner .flowList>.item {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 30px
}

#flow>.inner .flowList>.item>div {
  display: table-cell;
  vertical-align: top
}

#flow>.inner .flowList>.item>div.img {
  width: 40px
}

#flow>.inner .flowList>.item>div.txt {
  padding-left: 15px
}

#flow>.inner .flowList>.item>div.txt>.heading {
  font-size: 2rem
}

#flow>.inner .flowList>.item>div.txt>.heading+p {
  margin-top: 5px;
  line-height: 1.5
}

.contact {
  padding-bottom: 50px;
  margin-top: 50px
}

.contact h1 {
  font-size: 3rem;
  padding: 45px 0
}

.contact>.inner {
  width: 100%;
  padding: 0 20px
}

.contact>.inner .form .btn {
  width: 80%;
  margin: 30px auto 0
}

.contact>.inner .form table {
  width: 100%
}

.contact>.inner .form table tr:first-child td {
  border-top: none
}

.contact>.inner .form table tr.required th {
  position: relative
}

.contact>.inner .form table tr.required th:after {
  top: 17px;
  right: 15%;
  font-size: 1rem
}

.contact>.inner .form table tr td, .contact>.inner .form table tr th {
  display: block;
  width: 100%
}

.contact>.inner .form table tr th {
  padding: 15px 0 10px 0;
  width: 100%;
  border-bottom: none
}

.contact>.inner .form table tr th>span {
  font-size: 1.2rem
}

.contact>.inner .form table tr td {
  padding: 0 0 20px;
  border-bottom: 1px solid #ededed
}

.contact>.inner .form table tr td .input input[type=email], .contact>.inner .form table tr td .input input[type=number], .contact>.inner .form table tr td .input input[type=tel], .contact>.inner .form table tr td .input input[type=text], .contact>.inner .form table tr td .input textarea {
  width: 100%
}

.contact>.inner .form table tr td .input input[type=text]#email {
  width: 100%
}

.contact>.inner .form table tr td .input textarea#content {
  width: 100%;
  min-height: 200px
}

.contact>.inner .form table tr td .input>ul>li {
  display: block;
  margin-right: 0;
  margin-top: 10px
}

.contact.confirm>.inner .form table tr td {
  padding: 0 0 20px
}

.contact.complete>.inner .completeContents {
  padding-top: 50px
}

.contact.complete>.inner .completeContents h2 {
  font-size: 2rem
}

.contact.complete>.inner .completeContents h2+p {
  margin-top: 20px
}

.contact.complete>.inner .completeContents .btn {
  margin: 30px auto 0;
  width: 80%
}