/*######################################################################
共通設定
######################################################################*/

:root {
    --width__main-content: min(35%, 375px);
    /* --width__main-content: min(100%, 1440px); */
    --color__accent: #FF7BAC;
}

/* コンテンツ全体の調整 */
body {
    width: 35%;
    margin-inline: auto;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 0;
}

/* スマホ向け */
@media (max-width: 767px) {
  body {
    width: 100%;
  }
}


h1 {
    margin: 0;
}

p, a, ul, ol, table {
    /* 400-768 */
    font-size: clamp(0.875rem, 0.739rem + 0.543vw, 1rem);
}

/* imgタグの調整 */
img {
    vertical-align: top;
    width: 100%;
    margin-top: -1px;
}

.sp {
    display: none;
}

@media (max-width: 767px) {
    .pc {
        display: none;

    }
 }



/*------------------------------------------------------------
スクロールアニメーション
------------------------------------------------------------*/
/* フェードイン */
/* 初期状態：非表示＋下にずらす */
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* 表示されたときの状態 */
.fadein.show {
  opacity: 1;
  transform: translateY(0);
}

/*------------------------------------------------------------
ボタンアニメーション
------------------------------------------------------------*/
/* 発光/キラーン */
.bright {
    position: relative;
    overflow: hidden;

    &::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #fbfbfb;
        animation: bright 2.5s ease-in-out infinite;
    }
}

@-webkit-keyframes bright {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/*######################################################################
コンテンツ
######################################################################*/
/*------------------------------------------------------------
merit01
------------------------------------------------------------*/
.merit01 {
    position: relative;
}
.merit01__text {
    position: absolute;
    top: 2%;
    left: 13%;
    z-index: 2;
}
.merit01__title {
    width: 84%;
    height: auto;
    display: block;
}

/*------------------------------------------------------------
merit02
------------------------------------------------------------*/
.merit02 {
    position: relative;
}
.merit02__text {
    position: absolute;
    top: 1.5%;
    left: 12%;
    z-index: 2;
}
.merit02__title {
    width: 87%;
    height: auto;
    display: block;
}

/*------------------------------------------------------------
trouble
------------------------------------------------------------*/
.trouble {
    position: relative;
}
.trouble__text {
    position: absolute;
    top: 7%;
    left: 23%;
    z-index: 2;
}
.trouble__title {
    width: 70%;
    height: auto;
    display: block;
}

/*------------------------------------------------------------
reason
------------------------------------------------------------*/
.reason {
    position: relative;
}
.reason__text {
    position: absolute;
    top: 2%;
    left: 4%;
    z-index: 2;
}
.reason__title {
    width: 97%;
    height: auto;
    display: block;
}

/*------------------------------------------------------------
voice
------------------------------------------------------------*/
.voice {
    position: relative;
}
.voice__text {
    position: absolute;
    top: 8%;
    left: 25%;
    z-index: 2;
}
.voice__title {
    width: 67%;
    height: auto;
    display: block;
}

/*------------------------------------------------------------
faq
------------------------------------------------------------*/
.faq {
    position: relative;
}
.faq__text {
    position: absolute;
    top: 7.5%;
    left: 33%;
    z-index: 2;
}
.faq__title {
    width: 57%;
    height: auto;
    display: block;
}


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

.cta__text {
    position: absolute;
    top: 17%;
    left: 15%;
    z-index: 2;
}
.cta__title {
    width: 82%;
    height: auto;
    display: block;
}

.cta__btn,
.cta__btn01,
.cta__btn02,
.cta__btn03 {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}
.cta__btn {
    top: 86%;
}
.cta__btn01 {
    top: 62%;
}
.cta__btn02 {
    top: 73%;
}
.cta__btn03 {
    top: 80%;
}


/*------------------------------------------------------------
access
------------------------------------------------------------*/
.access {
    position: relative;
}
.access__map {
    position: absolute;
    width: 92%;
    top: 19%;
    left: 50%;
    transform: translate(-50%);
}

/*------------------------------------------------------------
footer
------------------------------------------------------------*/
.footer {
    background: #fff;
    color: #343434;
    font-style: normal;
}

.copyright__p {
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.6px;
    font-size: 10px;
}