/*=====================================
初期設定
=====================================*/
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	color: #414141;
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    letter-spacing: .05em
}
html {
	font-size: 62.5%
}
body * {
	box-sizing: border-box;
	word-wrap: break-word
}
h1, h2, h3, h4, h5, h6, p, address, ul, li, dl, dt, dd, caption, img, form, blockquote, label, figure {
	padding: 0;
	margin: 0;
	border: none;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	line-height: 100%;
	list-style-type: none
}
img {
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
	-webkit-backface-visibility: hidden;
}

/*=====================================
共通
=====================================*/
a:link,
a:hover {
    text-decoration: none!important
}
main {
    margin: 0 auto;
    width: 100%;
    max-width: 780px
}
main img {
    width: 100%
}
.lp2204 h2, .lp2204 p {
    max-width: 100%;
}
small {
    display: block;
    font-size: 2.4vw;
    font-size: clamp(.9rem, 2.4vw, 1.1rem);
    line-height: 1.4
}
.ttl-cmn {
    margin-bottom: 2.5%;
    font-size: 5.6vw;
    font-size: clamp(2.2rem, 5.6vw, 2.8rem);
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}
.txt-r {
    text-align: right
}
.dsno {
    display: none
}

/*=====================================
コンテンツ
=====================================*/
.mv {
    position: relative
}
.mv img {
    width: 100%
}
/*CTA*/
.cta {
    padding: 7.5% 4.74% 10%
}
.cta h1 {
    margin-bottom: 5%
}
.cta__inner {
    padding: 0 4.1% 5%;
    background: #fff;
    border: 2px solid #dfdfdf
}
.ctaBtn {
    display: block;
    margin: 0 auto;
    width: 100%;
    -webkit-animation: btnAnime 1.5s ease infinite forwards;
    animation: btnAnime 1.5s ease infinite forwards
}
@keyframes btnAnime {
    0% {
        transform: scale(1,1)
    }
    90% {
        transform: scale(1,1)
    }
    100% {
        transform: scale(1.1,1.1)
    }
}
.problem > div * + * {
    margin-top: 5%
}
.bg1 {
    background: url("img/bg1.webp") no-repeat center center / cover
}
.bg1::before,
.bg1::after {
    content: "";
    display: block;
    width: 100%;
    height: 7.4vw;
    max-height: 52px
}
.bg1::before {
    margin-bottom: 7.5%;
    transform: translateY(-1px);
    background: url("img/bg1-top.png") no-repeat center top / 100% auto
}
.bg1::after {
    margin-top: 20%;
    transform: translateY(1px);
    background: url("img/bg1-btm.png") no-repeat center bottom / 100% auto
}
.bg2 {
    background: url("img/bg2.jpg") no-repeat center center / cover
}
.bg3 {
    background: url("img/bg3.jpg") no-repeat center center / cover
}
.bg4 {
    background: url("img/bg4.jpg") no-repeat center bottom / 100% auto
}
.bg5 {
    background: url("img/bg5.webp") no-repeat center center / cover
}
.bg-beige {
    background: #f8f3e9
}
.bg-gray {
    background: #eee
}
.mgEq > * + * {
    margin-top: 7.5%
}
.btm05 {
    margin-bottom: 5%
}
.btm10 {
    margin-bottom: 10%
}
.problemTxt {
    margin-bottom: -10%;
    transform: translateY(-45%)
}
.problem h2 {
    margin-bottom: 4%
}
.point01-main {
    margin-bottom: -1.4%;
    transform: translateY(-1.4%)
}
.point01-ratio {
    margin: 0 auto 10%;
    width: 88%
}
.point01-ratio li {
    margin-bottom: 5%
}
.cmn {
    padding: 10% 0
}
.compare {
    padding: 10% 0
}
.compare.mgbtm {
    padding-bottom: 17.5%
}
.compare figure {
    padding: 0 6%
}
.compare-lead {
    margin-bottom: -2.5%;
    transform: translateY(-7.5%)
}
.point02 {
    padding-bottom: 7.5%
}
.step li {
    margin-top: 7.5%
}
.successVoice + * {
    transform: translateY(-4%)
}
.success .notes {
    margin: 7.5% 2.5% 10%
}
.satis {
    padding: 10% 0 0
}
.insta > div {
    margin: 0 auto;
    max-width: 88%
}