/**
 * WP-Members向けカスタムスタイル
 * SWELLテーマに合わせたWP-Membersプラグインのスタイル調整
 * プラグインの基本スタイルを活かしつつ、フォントとパーツ間の余白を調整
 */

/* カスタムプロパティ（CSS変数）の定義 */
:root {
    --color_main_rgb: 63, 163, 255; /* メインカラーのRGB値 */
}

/* フォームコンテナの調整 */
#wpmem_login,
#wpmem_reg {
    max-width: 600px;
    /*
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background-color: var(--color_bg_content, #fff);
    border-radius: var(--swl-radius--4, 4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    */
}

/* フォームタイトル（legend）のスタイリッシュ化 */
#wpmem_login legend,
#wpmem_reg legend {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color_main, #3fa3ff);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color_border, #ededed);
}

/* ラベルのスタイリッシュ化 */
#wpmem_login label,
#wpmem_reg label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--color_text, #333);
}

/* 入力フィールドの調整 */
#wpmem_login input[type="text"],
#wpmem_login input[type="password"],
#wpmem_login input[type="email"],
#wpmem_reg input[type="text"],
#wpmem_reg input[type="password"],
#wpmem_reg input[type="email"],
#wpmem_reg input[type="url"],
#wpmem_reg input[type="number"],
#wpmem_reg input[type="date"],
#wpmem_reg textarea,
#wpmem_reg select {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color_border, #ddd);
    border-radius: var(--swl-radius--4, 4px);
    font-size: 16px; /* モバイルでの自動ズームを防ぐため16px以上に設定 */
    line-height: 1.5;
    margin-bottom: 1.2rem;
    transition: all 0.3s ease;
    -webkit-appearance: none; /* iOSでのデフォルトスタイルを無効化 */
    appearance: none;
    height: auto; /* 高さを自動調整に */
    min-height: 2.5rem; /* 最低高さを設定 */
}

/* フォーカス時のスタイル */
#wpmem_login input:focus,
#wpmem_reg input:focus,
#wpmem_reg textarea:focus,
#wpmem_reg select:focus {
    border-color: var(--color_main, #3fa3ff);
    box-shadow: 0 0 0 2px rgba(63, 163, 255, 0.15);
    outline: none;
    font-size: 16px; /* フォーカス時にもフォントサイズを維持 */
    transform: none; /* 変形を無効化 */
    zoom: 1; /* ズームを無効化 */
}

/* iPhoneのdate型入力フィールド特有のスタイル */
#wpmem_reg input[type="date"] {
    min-height: 2.8rem; /* iPhoneでの高さ問題を解決 */
    line-height: 1.5;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* 必須マークのスタイリッシュ化 */
#wpmem_reg .req {
    color: #e25c5c;
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.25rem;
}

#wpmem_reg .req-text {
    font-size: 0.8rem;
    font-weight: 400;
}

/* ボタンのスタイリッシュ化 */
#wpmem_login input[type="submit"],
#wpmem_reg input[type="submit"] {
    background: var(--color_main, #3fa3ff);
    color: #fff;
    border: none;
    border-radius: var(--swl-radius--4, 4px);
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.03em;
}

#wpmem_login input[type="submit"]:hover,
#wpmem_reg input[type="submit"]:hover {
    background: var(--color_main_dark, #2d88e3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ボタン領域の調整 */
.button_div {
    margin-top: 1.5rem;
    text-align: center;
}

/* セクション間の余白調整 */
.div_text,
.div_textarea,
.div_select,
.div_checkbox,
.div_radio,
.div_multicheckbox,
.div_image,
.div_file {
    margin-bottom: 1.2rem;
}

/* リンクスタイル */
#wpmem_login a,
#wpmem_reg a {
    color: var(--color_link, #3fa3ff);
    text-decoration: none;
    transition: color 0.3s;
}

/*
#wpmem_login a:hover,
#wpmem_reg a:hover {
    color: var(--color_link_hover, #2d88e3);
    text-decoration: underline;
}
*/

/* パスワードリセットリンクのスタイリッシュ化 */
.link-text {
    margin: 1rem 0;
    text-align: center;
    font-size: 0.85rem;
}

/* 連続する.link-textの場合、2つ目以降は非表示に */
.link-text + .link-text {
    display: none;
}

.link-text-forgot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(var(--color_main_rgb, 63, 163, 255), 0.05);
    border-radius: var(--swl-radius--4, 4px);
    transition: all 0.3s ease;
}

.link-text-forgot:hover {
    background-color: rgba(var(--color_main_rgb, 63, 163, 255), 0.1);
}

.link-text-forgot a {
    font-weight: 500;
    position: relative;
}

.link-text-forgot a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color_link, #3fa3ff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.link-text-forgot a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* モバイル対応 */
@media screen and (max-width: 599px) {
    /*
    #wpmem_login,
    #wpmem_reg {
        padding: 1rem;
    }
    */
    
    /* フォームコンテナの調整 */
    #wpmem_login,
    #wpmem_reg {
        width: 100%;
        /*
        margin: 0 auto 2rem;
        padding: 1.5rem;
        background-color: var(--color_bg_content, #fff);
        border-radius: var(--swl-radius--4, 4px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        */
    }

    #wpmem_login input[type="submit"],
    #wpmem_reg input[type="submit"] {
        width: 100%;
        padding: 0.7rem 1rem;
    }
    
    /* モバイルでのリンクスタイル調整 */
    .link-text {
        margin: 1.2rem 0;
    }
    
    .link-text-forgot {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.6rem 0.5rem;
    }
    
    /* iPhoneでのdate型入力フィールドのスタイル調整 */
    #wpmem_reg input[type="date"] {
        min-height: 3rem;
        line-height: 1.6;
    }
}

/* iOS特有のスタイル調整 */
@supports (-webkit-touch-callout: none) {
    #wpmem_reg input[type="date"] {
        min-height: 3rem;
        padding: 0.8rem;
        display: block;
    }
}

/* トップページCTA（会員登録促進）セクションのスタイル */
.cc-cta-section {
    /* padding: 4rem 0; */
    /* position: relative; */
    /* overflow: hidden; */
    margin: 0;
    width: 100%;
    /* border-radius: var(--swl-radius--4, 4px); */
}

/* .cc-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(63, 163, 255, 0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
} */

.cc-cta-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

.post_content div > h2.cc-cta-title {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: var(--color_text, #333);
    margin-top: 0;
    margin-bottom: 2.2rem !important;
    letter-spacing: 0.03em;
    line-height: 1.4 !important;
    border-left: none !important;
    position: relative;
    padding: 0 0 2.2rem 0;
}

.cc-cta-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.1rem;
    height: 3px;
    max-width: 4rem;
    width: 30%;
    background: var(--color_main, #3fa3ff);
    transform: translateX(-50%);
    transition: all 0.5s;
}

.cc-cta-subtitle {
    display: none;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color_main, #3fa3ff);
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

.cc-cta-text {
        font-size: var(--swl-fz--xs);
    line-height: 1.8;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cc-cta-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.cc-cta-feature {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border-radius: 50px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
    box-shadow: var(--swl-box_shadow);
    font-weight: bold;
}

.cc-cta-feature i,
.cc-cta-feature [class^="icon-"],
.cc-cta-feature [class*=" icon-"],
.cc-cta-feature span::before {
    margin-right: 0.5rem;
    color: var(--color_main, #3fa3ff);
    font-size: 1.2rem;
}

.cc-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.cc-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: var(--swl-radius--4, 4px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cc-cta-button-primary {
    background-color: var(--color_main, #3fa3ff);
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--color_main_rgb, 63, 163, 255), 0.3);
}

.cc-cta-button-primary:hover {
    background-color: var(--color_main_dark, #2d88e3);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--color_main_rgb, 63, 163, 255), 0.4);
}

.cc-cta-button-secondary {
    background-color: #fff;
    color: var(--color_main, #3fa3ff);
    border: 1px solid var(--color_main, #3fa3ff);
}

.cc-cta-button-secondary:hover {
    background-color: rgba(var(--color_main_rgb, 63, 163, 255), 0.05);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cc-cta-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 1.5rem;
    opacity: 0.85;
}



.wpmem-ul-block ul {
  list-style: none;
  padding-left: 0;
}

.wpmem-ul-block ul li {
  position: relative;
  margin: .6em 0;
  padding-left: 1.5em; /* アイコンの分だけスペースを確保 */
}

.wpmem-ul-block ul li a {
  color: #333;
  font-size: var(--swl-fz--small);
}

.wpmem-ul-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%2315469a' d='M535.1 342.6C547.6 330.1 547.6 309.8 535.1 297.3L375.1 137.3C362.6 124.8 342.3 124.8 329.8 137.3C317.3 149.8 317.3 170.1 329.8 182.6L467.2 320L329.9 457.4C317.4 469.9 317.4 490.2 329.9 502.7C342.4 515.2 362.7 515.2 375.2 502.7L535.2 342.7zM183.1 502.6L343.1 342.6C355.6 330.1 355.6 309.8 343.1 297.3L183.1 137.3C170.6 124.8 150.3 124.8 137.8 137.3C125.3 149.8 125.3 170.1 137.8 182.6L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}



/* モバイル対応 */
@media screen and (max-width: 767px) {
    .cc-cta-section {
        padding: 3rem 1rem;
        margin: 3rem 0;
    }
    
    .cc-cta-title {
        font-size: 1.5rem;
    }
    
    .cc-cta-subtitle {
        font-size: 1rem;
    }
    
    .cc-cta-features {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .cc-cta-buttons {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    
    .cc-cta-button {
        width: 100%;
    }
}