@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/*---------------------------------------------------------
    Theme Name: RVC Theme
    Description: LP用 wordpressテーマ
    Theme URI: https://realvalueclub.com
    Version: 1.1
---------------------------------------------------------*/

/* =============================================
    # reset
============================================= */

html, body, footer, header,
div, section, article, aside, nav,
object, iframe, video, address, img,
h1, h2, h3, h4, h5, h6, p,
small, strong, b, i, span,
dl, dt, dd, ol, ul, li,
table, tr, th, td, form, label {
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    margin: 0;
    padding: 0;
}

body {
    line-height: 1;
}

footer, header, div, section, article, aside, nav {
    display: block;
}

a {
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select, textarea, img, th, td {
    vertical-align: middle;
}

ul, dl, ol {
    list-style: none;
}

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

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-appearance: none;
            appearance: none;
    -webkit-text-size-adjust: 100%;
            text-size-adjust: none;
}

html {
    height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Roboto', 'Noto Sans JP', Meiryo, sans-serif;
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 2.0;
    background: #000;
}

@media (width < 840px) {

body {
    font-size: 2.4vw;
}

}

@media (width < 480px) {

body {
    font-size: 3.8vw;
}

}

h1, h2, h3, h4, h5, h6, strong, th {
    font-weight: 600;
}

a {
    color: #05d;
    text-decoration: none;
    transition: .3s;
}

a:hover {
    text-decoration: underline;
}

img, video, object {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border: none;
    transition: .3s;
}

table {
    table-layout:fixed;
}

table th,
table td {
    vertical-align: middle;
}

/* =============================================
    # フッター
============================================= */

footer {
    font-size: 75%;
    color: #fff;
    text-align: center;
    background: #111;
    margin: 4em 0 0;
    padding: 4em 0;
}

footer div {
    width: 16%;
    max-width: 200px;
    min-width: 140px;
    margin: 0 auto;
}

footer a {
    display: inline-block;
    color: #fff;
    text-decoration: underline;
    margin: 1.5em 0;
    padding: 0 0 0 1.5em;
    position: relative;
}

footer a:hover {
    text-decoration: none;
}

footer a::after {
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: calc(50% - 4px);
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .3s;
}

footer a:hover::after {
    left: 5px;
}

@media (width < 480px) {

footer {
    padding: 4em 0 12em;
}

}

/* =============================================
    # 見出し
============================================= */

.hl-01 {
    font-size: clamp(22px, 1.66vw, 32px);
}

.hl-02 {
    font-size: clamp(18px, 1.38vw, 26px);
}

@media (width < 840px) {

.hl-01 {
    font-size: 3.4vw;
}

.hl-02 {
    font-size: 2.8vw;
}

}

@media (width < 480px) {

.hl-01 {
    font-size: 5.2vw;
}

.hl-02 {
    font-size: 4.4vw;
}

}

/* =============================================
    # ラベル
============================================= */

.label-01 {
    font-family: "Lora", serif;
    font-size: clamp(18px, 1.38vw, 26px);
    text-align: left;
    margin: 0 0 1em;
    position: relative;
}

.label-01::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    position: absolute;
    top: 50%;
    left: 0;
}

.label-01 strong {
    display: inline-block;
    background: #000;
    position: relative;
}

.label-01 span {
    display: inline-block;
    background: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 1em 0 0;
    position: relative;
}

.label-01 span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 .5em 0 0;
}

/* =============================================
    # CTAボタン
============================================= */

.btn-01 {
    display: block;
    width: 90%;
    max-width: 640px;
    animation: anime 1s ease 0s infinite alternate;
    transform-origin:center;
    margin: 1em auto 0;
}

#subPage .btn-01 {
    max-width: 480px;
}

@keyframes anime {
    0% {transform: scale(0.96,0.96);}
    100% {transform: scale(1,1);}
}

/* =============================================
    # リスト
============================================= */

.list-decimal {
    list-style: decimal;
    margin: 0 0 0 1.5em;
}

.list-lower-roman {
    list-style: lower-roman;
    margin: 0 0 0 1.5em;
}

.list-disc {
    list-style: disc;
    margin: 0 0 0 1.5em;
}

/* =============================================
    # 戻るボタン
============================================= */

.backBtn {
    display: block;
    font-family: 'Roboto', 'Noto Sans JP', Meiryo, sans-serif;
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.06em;
    color: #fff;
    border: none;
    outline: none;
    background: #333;
    margin: 2em auto 0;
    padding: .75em 2.5em;
    cursor: pointer;
    border-radius: 5px;
    transition: .3s;
}

.backBtn:hover {
    background: #555;
}

@media (width < 840px) {

.backBtn {
    font-size: 2.4vw;
}

}

@media (width < 480px) {

.backBtn {
    font-size: 3.8vw;
}

}

/* =============================================
    # サブページ
============================================= */

#subPage {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2em 2em 4em;
    overflow: hidden;
}

@media (width < 840px) {

#subPage {
    padding: 2em 1.5em;
}

}

@media (width < 480px) {

}

/* =============================================
    # ヘッダー
============================================= */

header {
    padding: 2em 1em;
}

header h1 {
    width: 20%;
    max-width: 240px;
    min-width: 160px;
}

@media (width < 480px) {

header h1 {
    margin: 0 auto;
}

}

/* =============================================
    # ダウンロードページ
============================================= */

.download {
    text-align: center;
}

.thankyou {
    width: 75%;
    max-width: 320px;
    margin: 2em auto;
}

.download .label-01 span::before {
    content: "\f1c1";
}

.download p {
    margin: 1em 0;
}

.benefit {
    text-align: center;
    margin: 4em 0 0;
}

.benefit h3 span {
    display: inline-block;
    border: 2px solid;
    border-image: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    border-image-slice: 1;
    padding: .5em 2em;
    background: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.benefit h4 {
    background: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 1em 0;
}

.benefit .label-01 span::before {
    content: "\f559";
}

.benefit ul {
    max-width: 480px;
    margin: 1em auto;
}

.benefit ul li {
    text-align: left;
    background: linear-gradient(90deg, #222, #000);
    margin: 5px 0;
    padding: .5em 1em;
}

.benefit li:before {
    display: inline-block;
    content: "";
    width: 12px;
    height: 6px;
    border-top: 3px solid #ffda71;
    border-right: 3px solid #b38b1d;
    margin: 0 .5em 0 0;
    position: relative;
    top: -5px;
    transform: rotate(135deg);
}

.benefit p {
    margin: 1em 0;
}

/* =============================================
    # 食事会リクエストフォーム
============================================= */

.invite {
    text-align: center;
}

.invite .label-01 span::before {
    content: "\f2e7";
}

.invite h3 {
    background: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 1em 0;
}

.invite p {
    margin: 1em 0;
}

/* =============================================
    # 食事会リクエスト完了
============================================= */

.thanks {
    text-align: center;
}

.thanks .label-01 span::before {
    content: "\f46c";
}

.thanks h4 {
    background: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: .5em 0 0;
}

.thanks p {
    margin: 1em 0;
}

/* =============================================
    # プライバシーポリシー
============================================= */

.privacy {}

.privacy .label-01 span::before {
    content: "\f3ed";
}

.privacy h3,
.privacy p {
    margin: 1em 0;
}

/* =============================================
    # LP
============================================= */

#LP {
    max-width: 800px;
    margin: 0 auto;
}

.lp-inner {
    display: none;
}

/* =============================================
    # CTA
============================================= */

.cta {
    margin: 40px 0 0;
}

.cta-container {
    text-align: center;
    border: 5px solid;
    border-image: linear-gradient(45deg, #f7e882, #b9904e);
    border-image-slice: 1;
    background: url(images/cta-bg_01.webp) no-repeat center center / cover;
    margin: 20px;
    padding: 60px 0;
}

.cta-container h2 {
}

@media (width < 480px) {

.cta-container {
    border: 3px solid;
    border-image: linear-gradient(45deg, #f7e882, #b9904e);
    border-image-slice: 1;
    margin: 10px;
    padding: 30px 0;
}

.cta-container h2 {
    margin: 0 10px 10px;
}

}

/* =============================================
    # 追従CTA
============================================= */

.floating-cta {
    display: none;
}

@media (width < 480px) {

.floating-cta {
    display: block;
    width: 100%;
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition-duration: 1s;
}

.floating-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-duration: 1s;
}

}

/* =============================================
    # メールフォーム
============================================= */

#mailform {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
    padding: 1em 0;
    overflow: hidden;
}

@media (width < 480px) {

    #mailform {
        margin: 0 -.5em;
    }

    #LP #mailform {
        margin: 0 1em;
    }

}

#mailform .label-01 span::before {
    content: "\f1c1";
}

/* =============================================
    # フォームレイアウト
============================================= */

#mailform #survey,
#mailform form {
    display: flex;
    flex-flow: wrap;
    text-align: left;
    position: relative;
}

#LP #mailform #survey {
    border-bottom: 1px dashed;
    margin: 2em 0 3em;
    padding: 0 0 2em;
}

#LP #mailform form {
    margin: 2em 0;
}

#mailform #survey dl,
#mailform form dl {
    width: 50%;
    padding: .5em;
}

#mailform #survey dl.textbox,
#mailform form dl.textbox {
    width: 100%;
}

#mailform #survey dl dt,
#mailform form dl dt {
    font-weight: 600;
    position: relative;
    margin: 0 0 .5em;
}

#mailform #survey dl dt span,
#mailform form dl dt span {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    margin: 0 1em 0 0;
    padding: .5em .75em;
    position: relative;
    top: -3px;
}

#mailform #survey dl dt span.must,
#mailform form dl dt span.must {
    border: 1px solid;
    border-image: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    border-image-slice: 1;
    background: linear-gradient(
        45deg,
        #755d11 0%,
        #ffda71 25%,
        #b38b1d 50%,
        #ffeead 75%,
        #755d11 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#mailform form dl dt span.any {
    background: #aaa;
}

#mailform form dl dd {
}

#mailform form .submitWrap {
    width: 100%;
    text-align: center;
    margin: 1.5em 0;
}

@media (width < 480px) {

#mailform form,
#mailform #survey {
    display: flex;
    flex-flow: wrap;
    position: relative;
}

#mailform form dl,
#mailform #survey dl {
    width: 100%;
    padding: .5em;
}

}

/* # フォームパーツ
============================ */

::-webkit-input-placeholder {
    color: #444;
}

.subject {
    display: none;
}

#mailform form input,
#mailform form textarea,
#mailform form select,
#mailform #survey select {
    width: 100%;
    font-family: 'Noto Sans JP', Meiryo, sans-serif;
    font-size: 16px;
    color: #fff;
    border: 2px solid #666;
    background: #111;
    padding: 1em;
    outline: none;
}

#mailform form input:focus,
#mailform form textarea:focus {
    border-image: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    border-image-slice: 1;
    background: #000;
}

#mailform form select,
#mailform #survey select {
    color: #fff;
    background: url("images/form-select.svg") no-repeat right center #111;
    background-size: 50px 35px;
    cursor: pointer;
}

#mailform form select:focus,
#mailform #survey select:focus {
    border-image: linear-gradient(
        45deg,
        #888 0%,
        #ddd 45%,
        #fff 50%,
        #ddd 55%,
        #888 100%
    );
    border-image-slice: 1;
    background: url("images/form-select.svg") no-repeat right center #000;
    background-size: 50px 35px;
}

#mailform form input[type="submit"] {
    display: inline-block;
    width: 360px;
    color: #fff;
    font-family: 'Noto Sans JP', Meiryo, sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 3px solid #081;
    background: linear-gradient(135deg, #2a3, #081);
    padding: 1em;
    position: relative;
    top: 0;
    border-radius: 5em;
    -webkit-transition-duration:0.3s;
    transition-duration: 0.3s;
    cursor: pointer;
    text-shadow: 4px 4px 4px rgba(0,85,0,.5);
    box-shadow:
    inset 10px 10px 10px rgba(255,255,255,.3),
    inset -10px -10px 10px rgba(0,0,0,.2),
    inset 2px 2px 1px rgba(255,255,255,.3),
    inset -2px -2px 1px rgba(0,0,0,.1)
    ;
}

#mailform form input[type="submit"]:hover {
    background: linear-gradient(135deg, #3b4, #081);
}

@media (width < 480px) {

#mailform form input[type="submit"] {
    width: 86%;
    font-size: 18px;
    padding: 1em;
}

}

/* # その他
============================ */

.wpcf7-spinner,
.grecaptcha-badge {
    display: none!important;
}

.is-sending {
    filter: grayscale(100%);
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}

/* # 個人情報同意ボタン
============================ */

.agree {
    margin: 1em auto 0;
    padding: .5em;
    position: relative;
}

form input[type="checkbox"] {
    opacity : 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
}

form input[type="checkbox"] + span {
    display: block;
    width: 100%;
    font-family: 'Noto Sans JP', Meiryo, sans-serif;
    font-weight: 500;
    color: #fff;
    background: url("images/form-check_off.svg") no-repeat left center;
    background-size: 50px 35px;
    padding: 0 20px 0 50px;
}

form input[type="checkbox"]:checked + span {
    background: url("images/form-check_on.svg") no-repeat left center;
    background-size: 50px 35px;
}

/* =============================================
    #
============================================= */

.h-job,
.h-sales {
    display: none !important;
}