@charset "UTF-8";
/*
Description:LP04
Author: Ann Tachibana
Version: 1.0
*/
/*-------------------------------------*/
/*default-setting*/
/*-------------------------------------*/
#content-area {
  padding: 0;
}
#menu #content-area {
  padding: 6em 0 3em;
}
h1.h1-img {
  text-align: center;
  max-width: 400px;
  margin: 0 auto 30px auto;
}
/*-------------------------------------*/
/*plugin*/
/*-------------------------------------*/
/*original page-top js*/
#page-top a {
  background: rgba(29, 213, 236, .7);
}
/*======================================
CTA
/*======================================*/
.CTA-Btn {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 10px;
  margin: 2em auto;
  border: 3px solid rgba(0, 160, 0, 1);
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  background: #fff;
  animation: CTABtn 1s ease 0s infinite alternate;
  transform-origin: center;
  position: relative;
  z-index: 99;
}
.CTA-Btn a {
  display: block;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-width: 0px;
  height: 0;
  line-height: 0;
  font-size: 0;
  width: 100%;
  margin: 0 auto;
  background: url(../img/LP05-CTAbtn.jpg) no-repeat center;
  background-size: 100% 100%;
  padding-top: 19%;
}
/*======================================
header
/*======================================*/
header .CTA-Btn {
  margin: 1em auto 3em;
}
@keyframes CTABtn {
  from {
    transform: scale(0.9, 0.9);
  }
  to {
    transform: scale(1, 1);
  }
}
/*bg-fb2:::::::::::::*/
header .bg-fb2 .CTA-Btn {
  margin: 1.5em auto;
}
/*bg-fb3:::::::::::::*/
.bg-fb3 {
  background: rgb(3 3 3);
  padding: 1px;
}
header .bg-fb3 .CTA-Btn {
  margin: .5em auto 1.5em;
}
/*======================================
footer
/*======================================*/
footer {
  background: rgb(225, 245, 250);
  color: rgba(73, 75, 80, 1);
  padding: 20px 0 0 0;
  text-align: center;
}
footer img {
  display: inline-block;
}
footer h1, footer h5 {
  font-family: A1 Mincho;
}
footer aside {
  text-align: left;
  font-size: 90%;
  line-height: 1.6em;
  margin-bottom: 2em;
}
footer aside h5 {
  font-size: 140%;
  margin-bottom: 20px;
  text-align: center;
}
footer aside ol {
  font-size: 90%;
  margin-top: 20px;
}
footer aside ol li {
  font-size: 100%;
  text-align: justify;
  line-height: 1.5em;
  margin-bottom: 1em;
  position: relative;
  text-indent: 0;
  padding-left: 1em;
  font-feature-settings: "palt";
}
footer aside ol li:before {
  display: block;
  content: "○";
  position: absolute;
  left: 0em;
  top: 0;
}
footer aside ol li ul {
  margin-top: 1em;
}
footer aside ol li ul {
  display: block;
}
footer aside ol li ul li:before {
  display: block;
  content: "・";
  position: absolute;
  left: 0em;
  top: 0;
}
footer img:first-of-type {
  width: 100px;
  height: auto;
  text-align: center;
  margin-bottom: 30px;
}
footer img:last-of-type {
  max-width: 140px;
  height: auto;
  text-align: center;
  margin-bottom: 15px;
}
footer p#copy-right {
  padding: 16px 0;
  font-size: 11px;
  line-height: 1.5em;
  text-align: center;
  color: #555;
  border-top: 2px solid rgba(246, 241, 247, 1);
}
footer h1 span {
  font-size: 50%;
}
footer p#copy-right br {
  display: block;
}
/*======================================
worry
/*======================================*/
#worry .title-img {
  width: 90%;
  max-width: none;
  margin: 2em 0 2em 1em;
}
#worry .inner {
  width: 100%;
  max-width: 500px;
}
#worry ol > li {
  display: inline-block;
  font-size: 130%;
  color: rgba(30, 215, 235, 1);
  line-height: 1.3em;
  background: rgba(255, 255, 255, .9);
  padding: .5em .5em .3em .5em;
  margin-bottom: .5em;
}
/*======================================
lede
/*======================================*/
#lede .title-img.in {
  animation: commonFadeIn .5s ease-in-out 0s 1 forwards;
}
#lede .title-img.out {
  animation: commonFadeOut .5s ease-in-out 0s 1 forwards;
}
#lede {
  position: relative;
  overflow: hidden;
}
#lede .title-img {
  width: 90%;
  max-width: 400px;
  margin-bottom: 2em;
  transform: translateX(1em);
}
#lede .wrap {
  position: relative;
}
#lede p {
  font-size: 110%;
  line-height: 1.8em;
}
#lede p:not(:last-of-type) {
  margin-bottom: 1em;
}
/*======================================
present
/*======================================*/
#present .bg {
  padding: 11em 0 5em;
}
#present .lede-h1-title {
  position: relative;
  margin: -7em auto 3em;
}
#present h3 {
  font-size: 150%;
  line-height: 1em;
  margin: 1em auto 0;
  text-align: left;
}
#present h3 span {
  display: inline-block;
  background: rgba(230, 55, 40, .7);
  color: #fff;
  padding: .3em .3em .2em .3em;
  margin-bottom: .2em;
}
#present .desc {
  text-align: justify;
  margin-top: 1em;
  letter-spacing: 0;
  text-align: left;
  display: inline-block;
}
#present ol > li {
  position: relative;
  margin-bottom: 5em;
  text-align: center;
}
#present ol > li:last-of-type {
  margin-bottom: 0;
}
#present ol > li.wrap {
  width: 100%;
}
#present ol > li .inner {
  width: 100%;
}
#present ol > li .present-img {
  width: 70%;
  margin: 0 auto;
}
#present ol > li .present-title {
  max-width: 230px;
  position: absolute;
  top: -1.5em;
  left: -1em;
  width: 50%;
}
#present ol > li:nth-of-type(3) .present-title {
  left: auto;
  right: -1em;
}
#present ol > li .desc p {
  font-size: 120%;
}
#present .CTA-Btn {
  margin-bottom: 0;
}
/*======================================
works
/*======================================*/
#works {
  position: relative;
  margin-top: -5%;
}
/*======================================
change
/*======================================*/
#change .change-title {
  margin-bottom: 1em;
}
#change .change-title01, #change .change-title02 {
  width: 50%;
}
#change .change-title02 {
  transform: translateY(-1em);
}
#change li:not(:last-of-type) {
  margin-bottom: 5em;
}
#change li .change-img {
  width: 90%;
  margin: 0 auto 2em;
}
#change li .before, #change li .after {
  position: relative;
  width: 50%;
}
#change li .before:before, #change li .after:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 0;
  padding-top: calc(100px*.56);
  bottom: 1em;
}
#change li .before:before {
  background: url(../img/LP05-change-before.png) no-repeat center;
  background-size: cover;
  left: -2em;
}
#change li .after:before {
  background: url(../img/LP05-change-after.png) no-repeat center;
  background-size: cover;
  right: -2em;
}
#change li h2 {
  font-size: 180%;
  color: rgba(230, 55, 40, .7);
}
#change li h3 {
  font-size: 150%;
  margin: .3em auto;
}
#change li h3 span {
  margin-right: .5em;
}
#change li h3 small {
  font-size: 70%;
  display: inline-block;
  line-height: 1.5em;
}
#change li p {
  font-size: 110%;
  text-align: justify;
}
#change .lede {
  margin-top: 2em;
}
#change .lede p {
  text-align: center;
  font-size: 120%;
  line-height: 1.5em;
}
/*======================================
method
/*======================================*/
#method .wrap {
  width: 100%;
}
#method .flex {
  align-items: flex-start;
}
#method .method-copy {
  width: 25%;
  margin-top: -1em;
}
#method .method-BoxWrap {
  position: relative;
  width: calc(100% - 25% - 1em);
  margin-right: 1em;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
/*
#method .method-BoxWrap:before {
  position: absolute;
  content: "";
  background: url(../img/LP05-method-point.png) no-repeat center;
  background-size: cover;
  width: 45%;
  padding-top: calc(45%*.33);
  top: -7%;
  left: 0;
}
*/
#method .CTA-Btn {
  width: 90%;
  margin: 1.5em auto 0;
}
/*======================================
voice
/*======================================*/
#voice {
  position: relative;
}
#voice .wrap {
  position: relative;
}
#voice .voice-title-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  z-index: 0;
}
#voice .voice-title {
  width: 70%;
  margin-bottom: 3em;
  z-index: 1;
  position: relative;
}
#voice li:not(:last-of-type) {
  margin-bottom: 1em;
}
#voice .img {
  width: 60%;
  margin: 0 auto;
}
#voice h2 {
  line-height: 1em;
  margin-bottom: .3em;
  font-size: 170%;
}
#voice h2 span {
  display: inline-block;
  background: rgba(230, 55, 40, .7);
  color: #fff;
  padding: .3em .3em .2em .3em;
  margin-bottom: .2em;
}
#voice h3 {
  font-size: 160%;
}
#voice h3 span {
  display: block;
  font-size: 70%;
  line-height: 1.5em;
}
#voice .desc {
  background: rgba(255, 255, 255, .8);
  padding: 1.5em;
}
#voice .desc p {
  font-size: 110%;
  text-align: justify;
}
#voice .title {
  margin-bottom: 1em;
}
/*======================================
profile
/*======================================*/
#profile .inner {
  width: 100%;
}
#profile .desc {
  margin-top: -1em;
}
#profile li br, #profile .desc p br {
  display: none;
}
#profile p, #profile li {
  line-height: 1.8em;
  margin-bottom: 1em;
  text-align: justify;
}
#profile p {
  font-size: 110%;
}
#profile li:last-of-type {
  margin-bottom: 0;
}
#profile ol {
  padding: 1.5em;
  margin: 2em auto 0;
}
#profile dl {
  clear: both;
}
#profile dt, #profile dd:first-of-type {
  float: left;
}
#profile dt {
  clear: left;
  width: 5em;
}
#profile dd:not(:first-of-type) {
  clear: left;
  margin-left: 4em;
}
/*======================================
message
/*======================================*/
#message {
  position: relative;
}
#message:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 50%;
  z-index: 1;
  background: url(../img/LP05-message-bg.png) no-repeat center;
  background-size: cover;
  padding-top: calc(50%*1.927259887);
}
#message .title-img {
  width: 55%;
  max-width: 400px;
  margin-bottom: 2em;
  transform: translateX(-1em);
}
#message .wrap {
  position: relative;
}
#message .desc {
  margin: 3em auto;
  position: relative;
  overflow: hidden;
}
#message .desc:first-of-type {
  margin-top: 0;
}
#message h1 {
  margin-bottom: .7em;
  font-size: 300%;
}
#message p {
  font-size: 115%;
  line-height: 1.8em;
  text-align: justify;
}
#message p.top {
  margin-top: 1.5em;
}
#message .desc .strong {
  margin: 1em auto;
}
#message .desc .strong div {
  line-height: 1em;
  font-size: 120%;
}
#message .desc strong {
  display: inline-block;
  background: rgba(230, 55, 40, .7);
  color: #fff;
  padding: .3em .3em .2em .3em;
  margin-bottom: .2em;
}
#message .img {
  position: absolute;
}
#message .desc .img {
  width: 55%;
  max-width: 700px;
}
#message .right {
  position: relative;
  z-index: 0;
}
#message .right .img {
  left: 0;
}
#message .left .img {
  right: 0;
  width: 47%;
}
#message .desc .img .img-02 {
  width: 40%;
  margin: 2em auto 2em 0;
}
#message .desc .img .img-03 {
  width: 50%;
}
#message .inner {
  position: relative;
  display: inline-block;
  width: 75%;
  padding: 1em;
  margin: 5em 0 0 auto;
}
#message .left {
  margin-top: 0;
}
#message .left .desc {
  margin-top: 2em;
}
#message .left .wrap {
  margin-top: 3em;
}