@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;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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


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

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

section {
    clear: both;
    overflow: auto;
}

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

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

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

/*カラム内部のサイズ*/
#main-contents {
    width: 700px;
    margin: 0 auto;
}

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

.fv {
    width: 700px;
    margin: 0 auto;
}



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

.cta_area_01 {
    position: relative;

}

.cta_btn_01 {
    position: absolute;
    left: 10%;
    top: 64%;
}

.btn_01 {
    width: 90%;
    transition-duration: .4s;
}

.btn_01 img {
    margin: 0 auto;
}

.btn_01:hover {
    transform: scale(1.1);
    opacity: 0.6;
}

.btn_02 {
    width: 90%;
    transition-duration: .4s;
}

.btn_02:hover {
    transform: scale(1.1);
    opacity: 0.6;
}

.btn_03 {
    width: 90%;
    transition-duration: .4s;
}

.btn_03:hover {
    transform: scale(1.1);
    opacity: 0.6;
}


/*----------------------------------------
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);
    }
}

/*----------------------------------------
スライドショー
----------------------------------------*/

/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}

.slide_show1 {
    margin: 0 auto;
    background-image: url(../images/choice3.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
}

.thumbnail {
    padding: 43% 0 7% 2%;
}

/*strawberry_card_btn*/

.strawberry_card_btn {
    position: absolute;
    bottom: 10%;
    margin-left: 43%;
}

.strawberry_card_btn img {
    width: 90%;
    transition: 0.3s;
}

.strawberry_card_btn img:hover {
    opacity: 0.6;
}

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

/*matcha_card_btn*/

.matcha_card_btn {
    position: absolute;
    bottom: 10%;
    margin-left: 43%;
}

.matcha_card_btn img {
    width: 90%;
    transition: 0.3s;
}

.matcha_card_btn img:hover {
    opacity: 0.6;
}

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

/*cocoa_card_btn*/

.cocoa_card_btn {
    position: absolute;
    bottom: 10%;
    margin-left: 43%;
}

.cocoa_card_btn img {
    width: 90%;
    transition: 0.3s;
}

.cocoa_card_btn img:hover {
    opacity: 0.6;
}

.cocoa_card .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);
    }
}



.gallery li {
    list-style: none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;
    /*絶対配置にする*/
    content: "" !important;
    width: 5% !important;
    height: 5% !important;
    z-index: 3;
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: 2.5%;
    background: url(../images/arrow_left.png);
    background-size: contain !important;
    background-repeat: no-repeat;

}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: 2.5%;
    background: url(../images/arrow_right.png);
    background-size: contain !important;
    background-repeat: no-repeat;

}



/*選択するサムネイル画像の設定*/

.choice-btn li {
    cursor: pointer;
    outline: none;
    width: calc(100%/3);
    list-style: none;
    box-sizing: border-box;
    padding-right: 2%;
}

.choice-btn .slick-track {
    transform: unset !important;
    /*画面幅サイズ変更に伴うサムネイル固定*/
}

/*----------------------------------------
スライドショー2
----------------------------------------*/

/*==================================================
スライダーのためのcss
===================================*/

.diet_foods_choice {
    position: relative;
}

.slide_show2 {
    position: absolute;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    bottom: 64%;
}

.slide_show2 img {
    opacity: .3;
    transform: scale(.8);
    transition: opacity .5s, transform .5s;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 100%;
    height: auto;
}

.slide_show2 .slick-center img {
    opacity: 1;
    transform: scale(1);
}

.slide_show2 button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.slide_show2 button:focus {
    outline: none;
}

.slide_show2 button.arrow-common {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    width: 14%;
    padding-top: 6%;
    cursor: pointer;
    z-index: 5;
}

.slide_show2 button.arrow-prev {
    background-image: url(../images/arrow_left.png);
    left: 4%;
    width: 4%;
}

.slide_show2 button.arrow-next {
    background-image: url(../images/arrow_right.png);
    right: 4%;
    width: 4%;
}

/*----------------------------------------
SNS口コミ
----------------------------------------*/

.sns_voice {
    position: relative;
}

/*----------------------------------------
無限ループスライダー
----------------------------------------*/

.loop {
    max-width: 700px;
    margin: 0 auto;
    position: absolute;
    bottom: 42.5%;
}

.loop_box {
    display: flex;
    width: 30%;
}

.loop_box img {
    min-width: 190vw;
}

.loop_box img:first-child {
    animation: loop 100s -50s linear infinite;
}

.loop_box img:last-child {
    animation: loop2 100s linear infinite;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

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

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

.accordion_wrap {
    padding-top: 70%;
    padding-bottom: 5%;
}

.accordion {
    margin: 0 auto;
    margin-bottom: 3%;
    width: 85%;
    position: relative;
    box-shadow: 0px 0px 28px -11px #3c2f20;

}

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

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

.accordion__btn::after {
    content: '';
    display: inline-block;
    border-radius: 20%;
    width: 4%;
    height: 3px;
    background-color: #81ad17;
    position: absolute;
    right: 6.2%;
    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;
}



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

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

.footer a {
    color: #fff;
}