/*============================================================
# 共通スタイル
============================================================ */

html {
	height: 100%;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
	font-size: 24px;
	line-height: 1.5;
	color: #444444;
}

a {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 0.7;
}

@media screen and (max-width: 599px) {
a:hover {
    opacity: unset;
}
}

span {
	display: inline-block;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

li {
	list-style: none;
}

.container {
    max-width: 750px;
    margin: 0 auto;
    background-color: #fff;
}

@media screen and (max-width: 820px) {
.container {
    max-width: 100%;
}
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* FV
---------------------------------------------*/
.fv {
    margin-bottom: -1px;
}

.fv-image {
    width: 750px;
    height: 1020px;
}

.fv-image img {
    aspect-ratio: 750/1020;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 599px) {
.fv-image {
    width: 100%;
    height: 100vh;
}

.fv-image img {
    aspect-ratio: auto;
}
}

/* CTA
---------------------------------------------*/
.cta-01 {
    position: relative;
}

.cta-01-image {
    width: 750px;
    height: 1140px;
}

.cta-01-image img {
    aspect-ratio: 750/1140;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.cta-btn {
    width: 550px;
    border-radius: 999px;
    padding: 11px 15px 15px;
    font-size: 45px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom,
    #ffb866 0%,
    #ffa136 50%,
    #f29933 100%
    );
    text-align: center;
    position: absolute;
    bottom: 10.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:  5px 5px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.05em;
}

.cta-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 3%;
}

.cta-link img {
	width: 100%;
	height: 100%;
    aspect-ratio: 1;
	object-fit: cover;
}

@media screen and (max-width: 820px) {
.cta-01-image {
    width: 100%;
    height: auto;
}

.cta-btn {
    width: 73.3vw;
    padding: 1.47vw 2vw 2vw;
    font-size: 6vw;
    box-shadow:  0.67vw 0.67vw 1.33vw rgba(0, 0, 0, 0.2);
    bottom: 10.1%;
}

.cta-icon {
    width: 8vw;
    height: 8vw;
}
}

/* 悩みエリア
---------------------------------------------*/
.problem {
    position: relative;
    z-index: 5;
}

.problem-image img {
    aspect-ratio: 750/963;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* 補足エリア
---------------------------------------------*/
.detail {
    position: relative;
    margin-top: -250px;
    z-index: 4;
}

.detail-image img {
    aspect-ratio: 750/1019;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
.detail {
    margin-top: -33.3vw;
}
}

/* おすすめエリア
---------------------------------------------*/
.recommend {
    position: relative;
    margin-top: -182px;
    z-index: 3;
}

.recommend-image img {
    aspect-ratio: 750/983;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
.recommend {
    margin-top: -24.3vw;
}
}

/* 反発エリア
---------------------------------------------*/
.objection {
    position: relative;
    margin-top: -311px;
    z-index: 2;
}

.objection-image img {
    aspect-ratio: 750/1032;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
.objection {
    margin-top: -41.5vw;
}
}

/* 解決策（商品紹介）エリア
---------------------------------------------*/
.solution {
    position: relative;
    margin-top: 25px;
    z-index: 2;
}

.solution-image img {
    aspect-ratio: 750/1370;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
.solution {
    margin-top: 3.33vw;
}
}

/* 特徴エリア
---------------------------------------------*/
.feature {
    background-color: #efffeb;
    padding: 100px 40px;
}

.feature-title {
    width: 372px;
    height: 112px;
    margin: 0 auto;
    margin-bottom: 64px;
}

.feature-title img {
    aspect-ratio: 372/112;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.feature-items {
    padding: 70px 35px;
    background-color: #fff;
}

.feature-item {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 8px dotted rgba(158, 199, 147, 0.3);
}

.feature-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.feature-item img {
    aspect-ratio: 600/565;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.feature-item:nth-child(4) img {
    aspect-ratio: 600/567;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
    .feature {
    padding: 13.3vw 5.3vw;
}

.feature-title {
    width: 49.6vw;
    height: 14.9vw;
    margin-bottom: 8.53vw;
}

.feature-items {
    padding: 9.33vw 4.67vw;
}

.feature-item {
    padding-bottom: 6.67vw;
    margin-bottom: 6.67vw;
    border-bottom: 1.07vw dotted rgba(158, 199, 147, 0.3);
}
}

/* 実績・お客様の声
---------------------------------------------*/
.users-voice {
    padding: 100px 0;
    background-color: #efffeb;
}

.users-voice-image {
    position: relative;
    width: 697px;
    height: 758px;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 100px;
}

.users-voice-image img {
    aspect-ratio: 697/758;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.users-voice-items {
    width: 670px;
    margin: 0 auto;
}

.users-voice-item {
    margin-bottom: 50px;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.15));

}

.users-voice-item:last-child {
    margin-bottom: 0;
}

.users-voice-item img {
    aspect-ratio: 670/415;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 820px) {
    .users-voice {
    padding: 13.3vw 0;
}

.users-voice-image {
    width: 92.9vw;
    height: 101.07vw;
    margin-bottom: 13.3vw;
}

.users-voice-items {
    width: 89.3vw;
}

.users-voice-item {
    margin-bottom: 6.67vw;
    filter: drop-shadow(0.4vw 0.4vw 0.67vw rgba(0, 0, 0, 0.15));

}
}

/* よくある質問
---------------------------------------------*/
.faq {
    padding: 100px 0;
}

.fap-container {
    max-width: 670px;
    margin: 0 auto;
}

.faq-title {
    font-size: 48px;
    font-weight: 700;
    color: #5aa046;
    text-align: center;
    margin-bottom: 80px;
    line-height: 1;
}

.faq-title span {
    letter-spacing: -0.1em;
}

.faq-item {
    margin-bottom: 50px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-q {
    display: flex;
    background-color: #9ec793;
    padding: 19px 30px;
}

.faq-q img {
    width: 46px;
    height: 35px;
    margin-right: 15px;
}

.faq-q-text {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.faq-a {
    display: flex;
    background-color: #efffeb;
    padding: 20px 30px 21px;
}

.faq-a img {
    width: 42px;
    height: 33px;
    margin-right: 15px;
}

.faq-a-text {
    margin-top: 3px;
    text-align: justify;
    letter-spacing: -0.04em;
}

.faq-a-text a {
    font-weight: 400;
    color: #5aa046;
    text-decoration: underline;
}

@media screen and (max-width: 820px) {
.faq {
    padding: 13.3vw 0;
}

.fap-container {
    max-width: 89.3vw;
}

.faq-title {
    font-size: 6.4vw;
    margin-bottom: 10.7vw;
}

.faq-item {
    margin-bottom: 6.67vw;
}

.faq-q {
    padding: 2.53vw 4vw;
}

.faq-q img {
    width: 6.13vw;
    height: 4.67vw;
    margin-right: 2vw;
}

.faq-a {
    padding: 2.67vw 4vw 2.8vw;
}

.faq-a img {
    width: 5.6vw;
    height: 4.4vw;
    margin-right: 2vw;
}

.faq-q-text {
    font-size: 3.2vw;
}

.faq-a-text {
    font-size: 3.2vw;
    margin-top: 0.4vw;
}
}

@media screen and (max-width: 599px) {
.faq-a-text {
    font-weight: 400;
}
}

/* CTA 02
---------------------------------------------*/
.cta-02 {
    position: relative;
}

.cta-02-image {
    width: 750px;
    height: 1140px;
}

.cta-02-image img {
    aspect-ratio: 750/1140;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.cta-02 .cta-btn {
    bottom: 10.4%;
}

@media screen and (max-width: 820px) {
.cta-02-image {
    width: 100%;
    height: auto;
}

.cta-02 .cta-btn {
    bottom: 10%;
}
}

/* フッター
---------------------------------------------*/
.footer {
    background-color: #5aa046;
    color: #fff;
    padding: 20px;
}

.footer-text-wrap1 {
    text-align: center;
    margin-bottom: 30px;
    line-height: 1;
}

.footer-text-wrap1 p {
    font-size: 14px;
}

.footer-text-wrap1 p:first-child {
    margin-bottom: 6px;
}

.footer-text-wrap2 {
    text-align: center;
}

.footer-links {
    font-size: 12px;
    margin-bottom: 3px;
}

.footer-link {
    text-decoration: underline;
}

.footer-link + .footer-link {
    margin-left: 12px;
}

.footer-copyright {
    display: block;
    font-size: 12px;
}

@media screen and (max-width: 820px) {
.footer {
    padding: clamp(15px, 2.67vw, 20px);
}

.footer-text-wrap1 {
    margin-bottom: 4vw;
}

.footer-text-wrap1 p {
    font-size: clamp(12px, 1.87vw, 14px);
}

.footer-text-wrap1 p:first-child {
    margin-bottom: 0.8vw;
}

.footer-links {
    font-size: clamp(10px, 1.6vw, 12px);
    margin-bottom: 0.4vw;
}

.footer-link + .footer-link {
    margin-left: 1.6vw;
}

.footer-copyright {
    font-size: clamp(10px, 1.6vw, 12px);
}
}