@charset "utf-8";

* { margin: 0; }

body {
    margin: 0 auto;
    text-align: center;
 }

section, footer {
    text-align: center;
    margin: 0 auto;
}

ul { list-style: none; }

img {
    width: 100%;
    max-width: 750px;
    vertical-align: top;
}

section,
footer {
    max-width: 750px;
    margin: 0 auto;
}

main,
footer {
    margin: 0 auto;
    max-width: 750px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1) ; 
}

/* リンク */
a, a:hover, a:visited{ text-decoration: none; }
a:hover { opacity: 0.7; }

/*************************/
/******** ボタン *********/
/************************/
/*** ボタン ***/
/* 共通 */
.btn_back {
    position: relative;
    width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}
.btn_back .cta,
.btn_back .btn_sel,
.btn_back .btn_line {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translate(-50%);
} 
.btn_back .cta { 
    width: 70.9%;
    z-index: 10; 
}
.btn_back .btn_sel,
.btn_back .btn_line {
    width: 98.3%; 
    z-index: 5; 
}
/* セクション1　FV */
#sec01_fv .btn_back {
    height: 96.7vw;
    max-height: 725px;
    background-image: url(../img/01-2_fv_cta.png);
 
}
#sec01_fv .cta { bottom: 22.5%; }
#sec01_fv .btn_sel { bottom: 4.6%; } 
#sec01_fv .btn_sel::before {
    bottom: 0%;
}

/* セクション8　お客様の声 */
#sec08_voice .btn_back {
    height: 69.5vw;
    max-height: 521px;
    background-image: url(../img/08-2_voice-btn.png);
}
#sec08_voice .cta { bottom: 34.4%; }
#sec08_voice .btn_sel { bottom: 9.0%; } 

/* セクション10　お客様の声 */
#sec10_price .btn_back {
    height: 80.8vw;
    max-height: 606px;
    background-image: url(../img/10-2_price_btn.png);
}
#sec10_price .cta { bottom: 84.8%; }
#sec10_price .btn_sel { bottom: 63%; } 

/* セクション13　メッセージ */
#sec13_message .btn_back {
    height: 71.7vw;
    max-height: 538px;
    background-image: url(../img/13-2_aboutme_btn.png);
}
#sec13_message .btn_line { 
    bottom: 4.5%; 
    overflow: hidden; 
    outline: none;
    display: inline-block;
}

/* アニメーション */
.btn_sel {
    display: inline-block;
    overflow: hidden;
}

.btn_sel::before {
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
    content: '';
	top: 10%;
	left: -75%;
    /*キラッと光る形状*/
    width: 80%;
	height: 70%;
    background-color: red;
    z-index: 50;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5) );
    background: -webkit-gradient(linear, left, right, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.5)));
    transform: skewX(-25deg);

    animation: shine 1.0s;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
@keyframes shine {
    0% { opacity: 1; }
    100% { 
        left: 50%; 
        opacity: 0;
    }
}


/***** セクション11 よくある質問 *****/
/* LINEリンク用 */
#sec11_faq .qa1-wrapper { position: relative; }
#sec11_faq .line {
    position: absolute;
    bottom: 7.7%;
    left: 14.0%;
    width: 30.5%; 
}

/***** フッター *****/
#footer {
    background-color: #6d8c25;
}
#footer div {
    padding: 5.2% 0;
}
#footer div p {
    margin: 0 auto;
    width: 64.5%;
    max-width: 484px;
}