@charset "UTF-8";

/* CSS Document */

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

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

a {
    text-decoration: none;
}

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

.gnav-pc {
    display: block !important;
}

.gnav-sp {
    display: none !important;
}

.sp {
    display: none !important;
}

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

#main {
    width: 100%;
    background-image: url(../images/pc_bg.png);
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
}

#main-contents {
    max-width: 550px;
    margin: 0 auto;
}

#home {
    width: 100%;
}

/*----------------------------------------
header
----------------------------------------*/

.gnav-pc {
    position: absolute;
    height: 100%;
    left: 6%;
    max-width: 20em;
}

.gnav-pc ul {
    position: sticky;
    align-items: center;
    top: 8%;
    padding-bottom: 15px;
}

@media only screen and (max-width:1100px) {
    .gnav-pc ul{
        display: none;
    }
}

.gnav-pc ul li {
    margin-bottom: 15%;
}

ul li a {
    color: #693303;
    text-decoration: none;
    font-size: 1.5em;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.2em;
}

.menu {
    position: relative;
}

.menu ::before {
    background: #f59400;
    content: '';
    width: 100%;
    height: 1.5px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 10%;
    margin: auto;
    margin-bottom: -0.5%;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}

.menu :hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.en {
    font-size: 2em;
    font-family: "josefin-sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.1em;
}

ul li a:hover {
    color: #f59400;
    animation: beside 2s linear infinite;
}

.menu-logo{
    width: 60%;
}

.menu-logo a:hover{
    opacity: 0.5;
}


/*----------------------------------------
FV/CVエリア01
----------------------------------------*/
.cv-area{
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv2nd_btn {
    position: absolute;
    bottom: 6%;
}

.cv2nd_btn img{
    width: 85%;
}

.cv2nd_btn:hover {
    opacity: 0.6;
}

.cv_btn_01 {
    position: absolute;
    top: 63%;
    transition-duration: .4s;
}

.cv_btn_01 img {
    width: 90%;
}

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

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

/*----------------------------------------
trouble
----------------------------------------*/

.trouble{
    margin-top: -1px;
}

/*----------------------------------------
solution/CVエリア02
----------------------------------------*/

.solution{
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_btn_02 {
    position: absolute;
    transition-duration: .4s;
    bottom: 1.5%;
}

.cv_btn_02 img{
    width: 100%;
}

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

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

/*----------------------------------------
features
----------------------------------------*/

#features1 {
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_btn_03 {
    position: absolute;
    transition-duration: .4s;
    bottom: 0.4%;
}

.cv_btn_03 img{
    width: 100%;
}

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

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

.features2 {
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
    margin-top: -1px;
}


/*----------------------------------------
CVエリア
----------------------------------------*/

.cv-area1{
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_membership_btn_01 {
    position: absolute;
    bottom: 6%;
}

.cv_membership_btn_01 img{
    width: 85%;
}

.cv_membership_btn_01:hover {
    opacity: 0.6;
}

.cv_btn_04 {
    position: absolute;
    transition-duration: .4s;
    bottom: 34%;
}

.cv_btn_04 img{
    width: 90%;
}

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

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

/*----------------------------------------
story
----------------------------------------*/

#story{
    margin-top: -1px;
}


/*----------------------------------------
voice
----------------------------------------*/

.voice {
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_btn_05 {
    position: absolute;
    transition-duration: .4s;
    bottom: 0%;
}

.cv_btn_05 img{
    width: 100%;
}

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

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


/*----------------------------------------
CVエリア
----------------------------------------*/

.explanation{
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_btn_06 {
    position: absolute;
    transition-duration: .4s;
    bottom: 0.2%;
}

.cv_btn_06 img{
    width: 100%;
}

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

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


/*----------------------------------------
how_to_eat
----------------------------------------*/

.howtoeat{
    margin-top: -1px;
}


/*----------------------------------------
privilege/CVエリア
----------------------------------------*/

.privilege{
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.cv_membership_btn_02 {
    position: absolute;
    top: 68%;
}

.cv_membership_btn_02 img{
    width: 85%;
}

.cv_membership_btn_02:hover {
    opacity: 0.6;
}

.cv_btn_07 {
    position: absolute;
    top: 56%;
    transition-duration: .4s;
}

.cv_btn_07 img{
    width: 90%;
}

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

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


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

#faq {
    background-image: url(../images/faq.jpg);
    background-repeat: no-repeat;
    background-size: 100%;

}

.accordion_wrap {
    padding: 65% 4% 5% 4%;
    width: 100%;
    margin: 0 auto;
}

.accordion {
    margin-bottom: 3%;
    position: relative;
}

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

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

.accordion__btn::after {
    content: '';
    display: inline-block;
    border-radius: 10%;
    width: 4%;
    height: 3px;
    background-color: #fff;
    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;
}

/*----------------------------------------
inquiry
----------------------------------------*/

#inquiry{
    margin: 0 auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
    margin-top: -1px;
}

.inquiry_btn {
    position: absolute;
    transition-duration: .4s;
    bottom: 33%;
}

.inquiry_btn img{
    width: 90%;
}

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

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

/*----------------------------------------
購入ボタンのスタイル
----------------------------------------*/

.purchase-btn {
    position: fixed;
    bottom: 20px;  /* 画面下部から20px */
    right: 20px;   /* 画面右側から20px */
    background-color: #FF6347;  /* オレンジ色 */
    color: white;
    padding: 15px 30px;
    font-size: 21px;
    border-radius: 50px; /* 丸みを帯びたボタン */
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影をつける */
    transition: background-color 0.3s ease;
  }
  
  .purchase-btn:hover {
    background-color: #F59502; /* ホバー時に色を変更 */
  }

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

.footer {
    background-color: #693303;
    padding: 2em 0em;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}

.small {
    font-size: 1em;
    padding-top: 0.3%;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #fff;
}

.footer a {
    color: #fff;
}

.footer a:hover{
    color: #f59400;
}

@media only screen and (max-width : 768px) {
    .information p{
        font-size: 1em;
        }
    }

    .purchase-btn {
        font-size: 18px;
    }