@charset "UTF-8";

/* CSS Document */

/*----------------------------------------
PC用レイアウト(768px以上スクリーン)
----------------------------------------*/

/* body全体の初期スタイル調整 */

html,
body {
    width: 100%;
}

body {
    font-size: 62.5%;
    /*emの計算をしやすくするための定番設定*/
    font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
    font-weight: normal;
    color: #000;
}

/* リンク文字の設定 */

a {
    text-decoration: underline;
}

a:link,
a:visited {
    color: #39f;
}

a:hover,
a:active {
    color: #f60;
}

/* ブラウザのCSSをリセット */

p {
    margin: 0 !important;
    margin: 0 !important;
}

section {
    clear: both;
    overflow: auto;
}

/*----------------------------------------
全体レイアウト/背景設定(PC)
----------------------------------------*/

/* 全体エリア(全体背景を設定するにはここ) */

.main {
    background-image: url(../images/pc_bg.jpg);
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center
}

/*カラム内部のサイズ*/
#main-contents .contents {
    margin-bottom: 0em;
}

/* カラム全体の幅を変更する */

.fv {
    width: 700px;
    margin: 0 auto;
    /*真ん中に要素を置きたい時に使う*/
}

#main-contents {
    width: 700px;
    margin: 0 auto;
    /*真ん中に要素を置きたい時に使う*/
}

/*----------------------------------------
よくある質問
----------------------------------------*/

.box_qa {
    background-image: url(../images/qa.jpg);
    background-repeat: no-repeat;
    background-size: cover;

}

.accordion_wrap {
    padding-top: 90%;
    padding-bottom: 20%;
}

.accordion {
    margin: 0 auto;
    margin-bottom: 3%;
    width: 90%;
    position: relative;
}

.accordion__btn {
    cursor: pointer;
    position: relative;
}

.accordion__btn::before {
    content: '';
    display: inline-block;
    border-radius: 20%;
    width: 4%;
    height: 3px;
    background-color: #f28b40;
    position: absolute;
    right: 3.97%;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 1s;
}

.accordion__btn::after {
    content: '';
    display: inline-block;
    border-radius: 20%;
    width: 4%;
    height: 3px;
    background-color: #f28b40;
    position: absolute;
    right: 3.97%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 1s;
}

.accordion__btn.show::before {
    opacity: 0;
}

.accordion__btn.show::after {
    transform: translateY(-50%) rotate(180deg);
}

.accordion__content {
    display: none;
}


/*----------------------------------------
CTAエリア01
----------------------------------------*/

.cta_area_01 {
    position: relative;
}

.cta_btn_01 {
    position: absolute;
    left: 4%;
    top: 68.5%;

}

.cta_btn_01 img {
    width: 96%;
    transition: 0.3s;
}

.cta_btn_01 img:hover {
    opacity: 0.6;
}

.cta_area_01 .anim-box {
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}


/*----------------------------------------
CTAエリア02
----------------------------------------*/

.cta_area_02 {
    position: relative;
}

.cta_btn_02 {
    position: absolute;
    left: 4%;
    top: 68.5%;
}

.cta_btn_02 img {
    width: 96%;
    transition: 0.3s;
}

.cta_btn_02 img:hover {
    opacity: 0.6;
}

.cta_area_02 .anim-box {
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

/*----------------------------------------
CTAエリア03
----------------------------------------*/

.cta_area_03 {
    position: relative;
}

.cta_btn_03 {
    position: absolute;
    left: 4%;
    top: 68.5%;
}

.cta_btn_03 img {
    width: 96%;
    transition: 0.3s;
}

.cta_btn_03 img:hover {
    opacity: 0.6;
}


.cta_area_03 .anim-box {
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

/*----------------------------------------
フッター部分
----------------------------------------*/

.footer {
    background-color: #d97a76;
    padding: 2em 0em;
    text-align: center;
    font-size: 1.4em;
    color: #fff;
}

.footer a {
    color: #fff;
}