/*
Theme Name: NeoHuman WBT
Theme URI:
Author: Becky
Description: The Core of NeoHuman WBT
Version: 1.0.0
Text Domain: neohuman-wbt
*/

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, code, del, em, img, ins, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, article, aside, figcaption, figure, footer, header, nav, section, summary { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, figcaption, figure, footer, header, nav, section { display: block; }
* { box-sizing: border-box; }
ol, ul { list-style: none; }
img { border-style: none; margin: 0; padding: 0; vertical-align: top; max-width: 100%; height: auto; display: block; }

/* Base */
body { background-color: #fff; color: #1a1a1a; line-height: 1.7; font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; word-break: break-all; }
a:link { color: #1a1a1a; text-decoration: none; }
a:visited { color: #1a1a1a; }
a:hover { opacity: 0.8; transition: all 350ms; }
a:active, a:focus { text-decoration: none; outline: none; }

/* Utility */
.is_locked { opacity: 0.45; }
.is_active { background: #1a1a1a; color: #fff; }
.is_special { border-color: rgba(0,0,0,0.2); }

/* =============================
   Login / Lost Password / Reset
   ============================= */
body.login { }
body.login #login { }
body.login #login h1 a { background-image: url(/img/login_logo.png); no-repeat; 
width: 160px; height: 84px; background-size:100% auto; }
body.login #loginform { }
body.login .button-primary { }
body.login #nav, body.login #backtoblog { }

/* ============================================
   Layout
============================================ */
#site_content { padding-top: 55px; }
.site_header__inner, .page__inner, .lesson_page__inner { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.my_page__inner { max-width: 720px; margin: 0 auto; padding: 0 20px 60px; }

/* ============================================
   Header
============================================ */
#site_header { height: 55px; padding: 0; display: flex; align-items: center; position: fixed; width: 100%; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); }
.site_header__inner { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.site_header__logo a { font-size: 14px; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.site_header__nav { display: flex; gap: 20px; align-items: center; }
.site_header__nav a { font-size: 13px; color: #1a1a1a; text-decoration: none; }
.site_header__nav a:hover { opacity: 0.6; transition: opacity 350ms; }

/* ============================================
   Footer
============================================ */
#site_footer { padding: 40px 20px; border-top: 1px solid rgba(0,0,0,0.08); }
.site_footer__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.site_footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.site_footer__nav a { font-size: 12px; color: #888; text-decoration: none; }
.site_footer__nav a:hover { opacity: 0.6; transition: opacity 350ms; }
.site_footer__copy { font-size: 11px; color: #aaa; }

/* ============================================
   front_page
============================================ */

#front_page { padding: 60px 0; }

/* ============================================
   Page
============================================ */

.page { padding: 60px 0; }

.page__title { font-size: 22px; font-weight: 700; margin-bottom: 40px; }
.page__content { font-size: 15px; line-height: 1.9; }
.page__content p { margin-bottom: 1.5em; }

/* ============================================
   My Page
============================================ */
#my_page { padding: 40px 0; }
.my_page__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.my_page__name { font-size: 16px; font-weight: 500; }
.my_page__logout { font-size: 12px; color: #aaa; text-decoration: none; }
.my_page__logout:hover { opacity: 0.6; transition: opacity 350ms; }

/* progress */
.my_page__progress { display: flex; align-items: center; gap: 16px; background: #f7f7f7; border-radius: 12px; padding: 16px 20px; margin-bottom: 40px; }
.my_page__progress_bar_wrap { flex: 1; }
.my_page__progress_label { font-size: 11px; color: #aaa; margin-bottom: 8px; }
.my_page__progress_bar_bg { height: 4px; background: #e0e0e0; border-radius: 2px; }
.my_page__progress_bar_fill { height: 4px; background: #1a1a1a; border-radius: 2px; transition: width 0.4s ease; }
.my_page__progress_num { font-size: 20px; font-weight: 500; white-space: nowrap; }
.my_page__progress_num span { font-size: 12px; font-weight: 400; color: #aaa; }

/* section */
.my_page__section { margin-bottom: 40px; }
.my_page__section_label { font-size: 11px; font-weight: 500; color: #aaa; letter-spacing: 0.08em; margin-bottom: 12px; }

/* lesson card */
.lesson_list { display: flex; flex-direction: column; gap: 8px; }
.lesson_card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 16px 20px; transition: border-color 350ms; }
.lesson_card__num { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #aaa; flex-shrink: 0; }
.lesson_card__info { flex: 1; min-width: 0; }
.lesson_card__title { font-size: 14px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson_card__sub { font-size: 12px; color: #aaa; }
.lesson_card__btn { font-size: 12px; padding: 8px 16px; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; background: transparent; color: #1a1a1a; text-decoration: none; white-space: nowrap; transition: background 350ms; }
.lesson_card__btn:hover { background: #f0f0f0; }
.lesson_card__locked { font-size: 12px; color: #aaa; white-space: nowrap; }

/* my page nav */
.my_page__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.my_page__nav a { font-size: 13px; color: #888; padding: 10px 16px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; text-decoration: none; }
.my_page__nav a:hover { background: #f7f7f7; transition: background 350ms; }

/* ============================================
   Lesson Page
============================================ */
#lesson_page { padding: 40px 0 80px; }
.lesson_page__back { font-size: 13px; color: #aaa; text-decoration: none; display: inline-block; margin-bottom: 24px; }
.lesson_page__back:hover { opacity: 0.6; transition: opacity 350ms; }
.lesson_page__title { font-size: 20px; font-weight: 700; margin-bottom: 28px; }
.lesson_page__video { position: relative; padding-top: 56.25%; width: 100%; background: #000; border-radius: 8px; overflow: hidden; }
.lesson_page__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ============================================
   Responsive
============================================ */
@media (max-width: 480px) {
.site_header__logo a { font-size: 12px; }
.my_page__progress_num { font-size: 16px; }
.lesson_card { padding: 14px 16px; gap: 12px; }
.lesson_card__title { font-size: 13px; }
.lesson_card__btn { padding: 6px 12px; }
}

/* ============================================
   購入手続き
============================================ */

.wp-block-edd-checkout #edd_purchase_form .edd-blocks-form {
    display: flex;
    flex-direction: column;
}

.edd-blocks-form__group-edd_last  { order: 1; }
.edd-blocks-form__group-edd_first { order: 2; }
.edd-blocks-form__group-edd_email { order: 3; }

.edd-description { display: none !important; }


.u-mt-5 { display: none !important; }