/*
Theme Name: lalapink-japan.com
*/

/*
destyle.css
*/
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}/*button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}*/button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

a {
	display: block;
}

a:hover {
	opacity: 0.7;
	transition: 0.2s;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

html {
	font-size: 62.5%;
}

body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
  	font-size: 1.4rem;
	background: #eee;
	color: #666;
	line-height: 1.6;
	overflow-x: hidden;
}

main {
	max-width: 830px;
	margin: 0 auto;
	padding: 2em 0;
}

/*
header
*/
#header {
	padding: 1em;
	background: #F8B9C4;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-logo {
	display: inline-block;
}

.header-logo img {
	width: 120px;
}
.register-link a {
	padding: 6px 10px;
	color: #555;
	background: #fff;
	border-radius: 7px;
	font-weight: 500;
}

@media screen and (min-width: 768px) {
	.header-logo img {
		width: 150px;
	}	
}

/*
UM
*/
.um-header {
	border-bottom: none;
}

.um-login, .um-register,
div.uimob500 .um-profile-body {
	padding-left: 1em;
	padding-right: 1em;
}

div.uimob500 .um-profile-body {
	padding-left: 0;
	padding-right: 0;
}

.um-field-user_institution .um-field-area .um-clear:not(:last-of-type) {
	display: none;
}

div.uimob960 .um-profile-photo a.um-profile-photo-img {
	top: 0 !important;
}

.um-login.um-logout,
.wrapper {
	width: auto;
	max-width: 100% !important;
	padding-left: 1em;
	padding-right: 1em;
}

.um-form,
.main-box {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	padding: 1em;
	border-radius: 10px;
}

.um-login.um-logout .um-misc-img img {
	max-width: 80px;　
}

.um-profile,
.um-account,
.um-password {
	padding-left: 1em;
	padding-right: 1em;
}

.um-password .um-field {
	padding-top: 0;
}

.um-account-meta-img img {
	max-width: 200px;
}

div.uimob800 .um-account-main {
	max-width: 100%;
}

.um-profile .photo-text {
	margin-top: -2em;
	font-size: 90%;
	text-align: center;
}

.um_account_content_body section {
	padding-top: 15px;
}

.um_account_content_body .certificate .um_link_button:nth-child(3) {
	margin-top: 15px;
}

.um_account_content_body section .title {
	margin-bottom: 8px;
	font-weight: 600;
	line-height: 22px;
}

.um_link_button a,
.exam-password .pw-submit input,
.agreement-submit input {
	display: inline-block;
	padding: 16px 20px;
	line-height: 1em;
	transition: 0.25s;
	background: #3ba1da;
	border-radius: 4px;
	color: #fff;
}

.um_link_button a:hover {
	opacity: 1;
	background: #44b0ec;
}

.um_account_content_body .movie span {
	display: block;
	margin-top: 5px;
	font-size: 13px;
}

.um-login .um-col-alt,
.um-register .um-col-alt {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.um-login .um-col-alt .um-field-c {
}

.um-col-alt .btn-text {
	margin: 1.5em 0 0.5em;
	font-weight: 500;
}

@media screen and (min-width: 531px) {
	.um-account .um-form > form {
		display: flex;
		justify-content: center;
	}
}

.page-course-video h2 {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5em;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    z-index: 0;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.um-tip-text {
	margin-top: 3px;
}

.page-course-video .notice {
	margin-top: 1.5em;
}

.page-course-video .notice p {
	color: #c75050;
	font-weight: 500;
}
.page-course-video .notice p:not(:first-of-type) {
	margin-top: 1em;
}

.page-course-video .notice ul li {
	padding-left: 1em;
	text-indent: -1em;
	margin-top: 0.5em;
}

.page-course-video .notice ul li::before {
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	background: #666;
	border-radius: 50%;
	margin-right: 0.5em;
	vertical-align: 1px;
}

@media screen and (min-width: 531px){
	.video-wrapper .user_name {
		font-size: 18px;
	}
}

/*パスワード入力欄*/
.um-field-area {
	position: relative;
	display: flex;
	align-items: center;
}
.um-field-area .password-toggle {
	cursor: pointer;
	user-select: none;
	position: absolute;
	right: 8px;
}


/*受講済みフォーム*/
.class-done .wp-block-heading {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.5em;
}
.class-done .wp-block-heading + p {
	max-width: 450px;
	margin: 0 auto 1.5em;
	padding: 0 1em;
	text-align: center;
}

.um-24 .um-col-alt {
	display: flex;
	justify-content: center;
}

.um-24 .um-col-alt .um-right {
	display: none;
}

/* 認定試験 */
.mlw_qmn_message_before {
	font-weight: 600;
	text-align: center;
}

.qsm-quiz-container {
	padding: 0 1em;
}

.qmn_pagination {
	justify-content: center !important;
}

.exam-password .input-block {
	padding-top: 15px;
}

.exam-password label {
	display: inline-block;
	line-height: 22px;
	font-weight: 600;
	margin-bottom: 8px;
	color: #555;
}

.exam-password .pw-input input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border-radius: 2px;
	background: #fff;
	border: 1px solid #ddd;
	color: #666;
	outline: 0;
}

.exam-password .pw-input input:focus {
	border-color: #bbb;
}

.exam-password .pw-submit {
	padding-top: 20px;
	margin-top: 15px;
}

.qmn_btn {
	padding: 16px 20px !important;
	line-height: 1em !important;
	font-size: 15px !important;
	transition: 0.25s;
	background: #3ba1da !important;
	border-radius: 4px !important;
	border: none !important;
}

/*動画視聴同意書*/
.video-agreement-area h2 {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}

.agreement-content {
	border: 1px solid #ddd;
	border-radius: 4px;
	height: 600px;
	overflow-y: scroll;
	padding: 1em;
}

.agreement-content section {
	margin-top: 1em;
}

.agreement-content h3 {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.agreement-content ol {
	counter-reset: num;
}

.agreement-content ol li {
	counter-increment: num;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.agreement-content ol li::before {
	content: counter(num)"）";
}

.custom-checkbox {
	justify-content: center;
}
.agreement-submit {
	margin-left: auto;
	margin-right: auto;
}

.agreement-submit input.disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

/* ===== チェックボックス全体 ===== */
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  position: relative;
}

/* ===== 実際のチェックボックスは非表示に ===== */
.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
}

/* ===== カスタムチェックボックス部分 ===== */
.custom-checkbox .checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px; /* 角丸でUMっぽく */
  background-color: #fff;
  transition: all 0.25s ease;
  position: relative;
}

/* ===== チェックされたときの見た目 ===== */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  border-color: #3ba1da;
  /*background-color: #3ba1da;*/
}

/* ===== チェックマーク描画 ===== */
.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 8px;
  height: 12px;
  border: solid #3ba1da;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* チェックされたときに表示 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
  display: block;
}

/* ===== テキスト部分 ===== */
.custom-checkbox .label-text {
  font-size: 15px;
  color: #333;
}

/* ===== フォーカス時のアクセント ===== */
/*.custom-checkbox input[type="checkbox"]:focus + .checkmark {
  box-shadow: 0 0 0 2px rgba(76, 139, 245, 0.3);
}*/

/* ===== ホバー時 ===== */
.custom-checkbox:hover .checkmark {
  border-color: #666;
}


@media screen and (min-width: 531px){
	.video-agreement-area h2 {
		font-size: 1.8rem;
	}
}
