/*-------------------------------------------------------*/
/* settings style
/*-------------------------------------------------------*/
.page_wrap--settings .page_inner {
	width: 100%;
	max-width: 100%;
}
.page_wrap--settings .container{
	padding: 24px 40px 48px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}
/*----------------------------------------------*/
/* nav_settings
/*----------------------------------------------*/
.page_wrap--settings .nav_settings{
	margin-bottom: 30px;
}
.page_wrap--settings .nav_settings li{
	display: inline-block;
	text-align: center;
	letter-spacing: normal;
	margin-left: 12px;
}
.page_wrap--settings .nav_settings li:first-child{
	margin-left: 0;
}
.page_wrap--settings .nav_settings a{
	display: block;
	width: 160px;
	padding: 12px;
	font-size: 16px;
	font-size: 1.6rem;
	background: #999;
	color: #fff;
	font-weight: bold;
	border-radius: 8px;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.page_wrap--settings .nav_settings a:hover{
	background: #aaa;
}
.page_wrap--settings .nav_settings a.on{
	background: #16a9b2;
	cursor: default;
}

/*----------------------------------------------*/
/* account_area
/*----------------------------------------------*/
.page_wrap--settings .account_area {
	display: table;
	width: 100%;
}
.page_wrap--settings .account_area .col_left,
.page_wrap--settings .account_area .col_right {
	display: table-cell;
	vertical-align: top;
}
.page_wrap--settings .account_area .col_left{
	text-align: center;
	width: 142px;
}
.page_wrap--settings .account_area .col_right {
	width: auto;
	padding-left: 50px;
}
.page_wrap--settings .account_area .thumb {
	margin-bottom: 15px;
}
.page_wrap--settings .account_area .thumb img {
	display: block;
	width: 108px;
	height: 108px;
	margin: 0 auto;
	border-radius: 6px;
	object-fit: cover;
}
.page_wrap--settings .account_area .data > div {
	padding: 15px 0 15px 0;
}
.page_wrap--settings .links {
	line-height: 2;
	text-align: right;
}

/*-------------------------------------------------------*/
/* account table
/*-------------------------------------------------------*/
.page_wrap--settings .account_table{
	width: 100%;
}
.page_wrap--settings .account_table th,
.page_wrap--settings .account_table td{
	min-height: 50px;
	vertical-align: middle;
	border-bottom: 1px dashed #eee;
	padding: 5px 0 5px 30px;
}
.page_wrap--settings .account_table th{
	text-align: left;
	font-weight: normal;
	width: 19rem;
	line-height: 1.5;
	position: relative;
	padding-right: 8px;
}
.page_wrap--settings .account_table th:after{
	content: ':';
	vertical-align: middle;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
}
.page_wrap--settings .account_table th:empty + td:before{
	content: '';
}
.page_wrap--settings .account_table td{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.page_wrap--settings .account_table td.justify-end {
	justify-content: flex-end;
}
.page_wrap--settings .account_table td .status_details{
	line-height: 1.5;
	padding: 5px 0;
}
.page_wrap--settings .account_table td a:last-child{
	margin-left: auto;
}
.page_wrap--settings .account_table select{
	display: inline-block !important;
	box-sizing: border-box;
	height: 38px;
}
.page_wrap--settings .account_table select.nc-select2-plugin {
	width: 410px;
}
.page_wrap--settings .account_table.notice_table td{
	justify-content: flex-start;
}
.page_wrap--settings .account_table-2 th,
.page_wrap--settings .account_table-2 td{
	height: 70px;
}
.page_wrap--settings .account_table .tin_links{
	margin-left: auto;
}
.page_wrap--settings .account_table_flex .account_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dashed #eee;
}
.page_wrap--settings .account_table_flex .item_title{
	text-align: left;
	font-weight: normal;
	max-width: 280px;
	line-height: 1.5;
	position: relative;
	padding-right: 8px;
	vertical-align: middle;
	padding: 20px 0 20px 30px;
}
.page_wrap--settings .account_table_flex .item_title:after{
	content: ':';
	vertical-align: middle;
	position: absolute;
	left: calc(100% + 10px);
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
}
.page_wrap--settings .txt_under{
	display: block;
    text-align: center;
    margin-top: 0.5rem;
}
/*-------------------------------------------------------*/
/* settings device
/*-------------------------------------------------------*/
.settings_device_wrap{
	background: #f5f5f5;
	margin: 0 !important;
	padding: 10px 0;
	height: 100% !important;
	box-sizing: border-box;
}
.settings_device_wrap .notice{
	margin-top:35px;
	margin-bottom:10px;
	text-align:center;
	font-size:14px;
	font-size:1.4rem;
	color:#F05444 ;
	line-height:1.5;
}
.settings_device_wrap .page_inner{
	height: 100%;

}
.settings_device_wrap .flex_table{
	width: 100%;
	height: 100%;
}
.settings_device_wrap .flex_table > tr > td{
	height: 100%;
	vertical-align: top;
}
.settings_device_wrap .flex_table .flex_tr_1 .flex_td_1_1{
	padding-top: 10px;
}
.settings_device_wrap .flex_table .flex_tr_2{
	height: 100%;
}
.settings_device_wrap .flex_table .flex_tr_2 .flex_td_2_1{
	height: 100%;
}
.settings_device_wrap .chat_area .screen .screen_obj_wrap{
	width: 381px;
	height: 286px;
}
.settings_device_wrap .chat_area .btn_setting_flash_start{
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	height: 1em;
	background: #000;
	background: rgba(0,0,0,0.7);
	border: #fff solid 2px;
	border-radius: 6px;
	color: #fff;
	padding: 15px 15px;
	text-align: center;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.settings_device_wrap .chat_area .btn_setting_flash_start:hover{
	background: rgba(255,255,255,0.2);
}
.settings_device_wrap .chat_area .btn_setting_flash{
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	background: #000;
	background: rgba(0,0,0,0.7);
	border: #fff solid 2px;
	border-radius: 6px;
	color: #fff;
	padding: 8px 8px;
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.settings_device_wrap .chat_area .btn_setting_flash:hover{
	background: #333;
	background: rgba(0,0,0,0.6);
}
.settings_device_wrap .chat_area .fla_volume_meter{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	height: 94%;
	margin: auto;
}
.settings_device_wrap .chat_area .txt_play_sound{
	position: relative;
	font-size: 14px;
	font-size: 1.4rem;
	color: #fff;
	height: 30px;
	line-height: 30px;
	margin: 0 5px 0 15px;
	z-index: 1001;
}
.settings_device_wrap .chat_area .btn_play_sound{
	position: relative;
	display: inline-block;
	width: 30px;
	height: 24px;
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
	background: #16a9b2;
	border-radius: 4px;
	cursor: pointer;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	z-index: 1001;
	float: right;
	margin-top: 3px;
	margin-left: 3px;
}
.settings_device_wrap .chat_area .btn_play_sound:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-block;
	text-align: center;
	font-family: FontAwesome;
	width: 16px;
	height: 16px;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	color: #fff;
	line-height: 1;
	content: '\f04b';
	vertical-align: middle;
	line-height: 16px;
	text-indent: 2px;
}
.settings_device_wrap .chat_area .btn_play_sound.on{
	background: #F56A6A;
}
.settings_device_wrap .chat_area .btn_play_sound.on:before{
	content: '\f04c';
	text-indent: 0;
}
.settings_device_wrap .chat_area .utility_area .utility_right .screen_utility_note{
	line-height: 30px;
	font-size: 12px;
	font-size: 1.2rem;
}
.settings_device_wrap .help_flash_wrap{
	height: 100%;
	background: #fff;
	font-size: 15px;
	font-size: 1.5rem;
}
.settings_device_wrap .settings_flash_header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #000;
	background: rgba(0,0,0,0.8);
	color: #fff;
	padding: 10px 20px 10px;
	z-index: 1000;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
	min-height: 12px;
}
.settings_device_wrap .settings_flash_header .ttl{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	margin: auto;
	height: 15px;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: normal;
	color: #fff;
}
.settings_device_wrap .settings_flash_header .btn_close{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	height: 20px;
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/icon/close_thin_gray.png') no-repeat center center;
}
.settings_device_wrap .help_flash_wrap .ic_utility{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #000;
	margin-right: 3px;
	top: -2px;
}
.settings_device_wrap .help_flash_wrap .ic_utility:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.settings_device_wrap .help_flash_wrap .ic_camera:before{
	background-image: url('../images/chat/ic_camera_small_on.png');
	background-size: 20px 20px;
}
.settings_device_wrap .help_flash_wrap .ic_camera_off:before{
	background-image: url('../images/chat/ic_camera_small_off.png');
	background-size: 20px 20px;
}
.settings_device_wrap .help_flash_wrap .ic_microphone:before{
	background-image: url('../images/chat/ic_microphone_small_on.png');
	background-size: 18px 18px;
}
.settings_device_wrap .help_flash_wrap .ic_microphone_off:before{
	background-image: url('../images/chat/ic_microphone_small_off.png');
	background-size: 18px 18px;
}
.settings_device_wrap .help_flash_wrap .ic_sound:before{
	background-image: url('../images/chat/ic_sound_on.png');
	background-size: 16px 16px;
}
.settings_device_wrap .help_flash_wrap .row_contents td{
	height:100%;
}
.settings_device_wrap .help_flash_wrap .row_contents td .help_box_wrap{
	position:relative;
	height:100%;
}
.settings_device_wrap .help_flash_wrap .row_contents .help_box_wrap .help_box{
	position:absolute;
	top:0px;
	bottom:0px;
	height:100%;
	box-sizing:border-box;
}

/*-------------------------------------------------------*/
/* settings device iframe
/*-------------------------------------------------------*/
.settings_device_wrap-iframe{
	padding-top: 0;
}
.settings_device_wrap-iframe .chat_area{
	margin-bottom: 0;
}

.connectivity_table{
	border: 1px solid #ddd;
	max-height: 200px;
	overflow-y: scroll;
}
.connectivity_table .message{
	margin: 5px 10px;
	font-size: 15px;
	font-weight: bold;
}
.connectivity_table .success{
	color: blue;
}
.connectivity_table .error{
	color: red;
}
/*-------------------------------------------------------*/
/* credit card notice telecome
/*-------------------------------------------------------*/
.page_wrap--settings .notice_wrap-telecom{
	background: #eee;
	padding: 25px 35px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
}

.page_wrap--settings .notice_wrap-telecom h4{
	font-weight:bold;
}

.page_wrap--settings .notice_wrap-telecom dl{
	margin-top:10px;
}

.page_wrap--settings .notice_wrap-telecom dl dt{
	font-weight: bold;
}
.page_wrap--settings .notice_wrap-telecom p{
	margin-top: 10px;
}
/* monthly speaking test */
.page_wrap--settings .notice_wrap-telecom p a{
	text-decoration: underline;
}
/*-------------------------------------------------------*/
/* campaign invite
/*-------------------------------------------------------*/
/* btn style */
.page_wrap--settings .btn_pink{
	min-width: 40px;
	height: 35px;
	line-height: 35px;
	background: #e8716c;
	text-shadow: none;
	box-shadow: none;
}
.page_wrap--settings input.invite_id{
	width: 250px;
	background: #fff;
	border: #cdcdcd 1px solid;
	height: 16px;
}
/*-------------------------------------------------------*/
/* coin / coupon
/*-------------------------------------------------------*/
.page_wrap--settings .setting-coin-coupon-display {
	padding: 20px 0 20px 190px;

}
.page_wrap--settings .coin-coupon-list,
.page_wrap--settings .coin-coupon-list *,
.page_wrap--settings .coin-coupon-list *:before,
.page_wrap--settings .coin-coupon-list *:after {
	box-sizing: border-box;
}
.page_wrap--settings .coin-coupon-list {
	display: flex;
	align-items: stretch;
	margin-left: -20px;
	margin-right: -20px;
}
.page_wrap--settings .coin-coupon-list > li {
	width: 100%;
	padding: 0 20px;
}
.page_wrap--settings .coin-coupon-list .single-box {
	font-size: 15px;
	text-align: center;
	height: 100%;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title {
	position: relative;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title .title-text {
	font-weight: bold;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title .title-text > .icon-question {
	display: inline-block;
	color: #aaa;
	font-size: 18px;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title > .box-tooltip {
	position: absolute;
	display: none;
	background-color: #fff;
	width: calc(100% - 20px);
	top: calc(100% + 15px);
	left: 50%;
	transform: translateX(-50%);
	padding: 15px 10px;
	border: 3px solid #eee;
	border-radius: 5px;
	filter: drop-shadow(0 0 3px rgba(0,0,0,.05));
}
.page_wrap--settings .coin-coupon-list .single-box .box-title > .box-tooltip:before {
	content: '';
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 3px solid transparent;
	border-top-color: #eee;
	border-left-color: #eee;
	top: 0;
	right: 30%;
	transform: translateY(-50%) rotateZ(45deg);
}
.page_wrap--settings .coin-coupon-list .single-box .box-title > .box-tooltip > .tooltip-title {
	text-align: center;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title > .box-tooltip > .tooltip-title > .title-text {
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	display: inline-block;
	color: #555;
	background-color: #eee;
	padding: 1rem;
}
.page_wrap--settings .coin-coupon-list .single-box .box-title > .box-tooltip > .tooltip-body {
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	margin-top: 10px;
}
.page_wrap--settings .coin-coupon-list .single-box .t-main {
	margin-top: 30px;
}
.page_wrap--settings .coin-coupon-list .single-box .t-main > b {
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	margin-right: 5px;
}
.page_wrap--settings .coin-coupon-list .single-box.box-coin .t-main > b {
	color: #16A9B2;
}
.page_wrap--settings .coin-coupon-list .single-box .t-main > b {
	color: #f1890e;
}
.page_wrap--settings .coin-coupon-list .single-box .box-link {
	margin-top: 30px;
}
/* family plan switch account */
.page_wrap--settings .account_table .family_switch_area > th{
	vertical-align: top;
	padding-top: 17px;
}
.page_wrap--settings .account_table .family_switch_area > th:after{
	top: -92px;
}
.page_wrap--settings .account_table .family_switch_area > td{
	display: block;
}
.page_wrap--settings .account_table .family_switch_area > td .switch_wrap{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	height: 45px;
}
/* account-linkage */
.linkage-check .switch{
	padding: 10px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	border-radius: 3px;
	transition: .2s all linear;
	cursor: pointer;
}
.linkage-check .switch-on{
	background: #19CAFA;
	color: #FFF;
}
.linkage-check .switch-off{
	background: #F5F5F5;
	color: #565656
}
.linkage-check input:not(:checked) + .switch-on{
	display: block;
}
.linkage-check input:not(:checked) + .switch + .switch-off{
	display: none;
}
.linkage-check input:checked + .switch-on{
	display: none;
}
.linkage-check input:checked + .switch + .switch-off{
	display: block;
}
.page-linkage .account-table th{
	width: 192px;
	padding-left: 0;
}
.page_wrap--settings.page-linkage .account_table-2 tr:nth-child(2) th,
.page_wrap--settings.page-linkage .account_table-2 tr:nth-child(2) td{
	padding-left: 0;
	padding-bottom: 0;
}
.page-linkage .account-table td{
	justify-content: flex-end;
}
.page-linkage .account-table .ic{
	display: flex;
	align-items: center;
}
.page-linkage .account-table .ic:before{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 20px;
}
.page-linkage .account-table .ic-google:before{
	background-image: url('../images/account/ic-google.jpg');
}
.page-linkage .account-table .ic-fb:before{
	background-image: url('../images/account/ic-fb.png');
}
.page-linkage .account-table .ic-apple:before{
	background-image: url('../images/account/ic-apple.svg');
}
.page-linkage .account-table .ic-line:before{
	background-image: url('../images/account/ic-line.png');
}
.page_wrap--settings.page-linkage .account_table th:after{
	content: "";
}
/* HeyNC  */
.page_wrap--settings .account_table.hey-nc input {
	height: 3.8rem;
}
.page_wrap--settings .account_table.hey-nc textarea {
	min-height: 8.7rem;
	max-height: 8.7rem;
}
.page_wrap--settings .account_table.hey-nc th, .page_wrap--settings .account_table.hey-nc td{
	height: auto;
	min-height: inherit;
	padding-top: 15px;
	padding-bottom: 15px;
}
.page_wrap--settings .account_table.hey-nc tr.border-none th, .page_wrap--settings .account_table.hey-nc tr.border-none td{
	border: none;
}
.page_wrap--settings .account_table.hey-nc tr th {
	width: 22rem;
	vertical-align: baseline;
}
.page_wrap--settings .account_table.hey-nc tr th::after{
	position: absolute;
	top: 50%;
	bottom: unset;
	transform: translateY(-50%);
}
.page_wrap--settings .account_table.hey-nc tr.large th::after{
	top: 18%;
	transform: inherit;
}
.page_wrap--settings .account_table.hey-nc tr td{
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: flex-end;
	gap: 1rem;
}
.page_wrap--settings .account_table.hey-nc input[type="text"]::placeholder{
	color: #AAAAAA;
}
/* .page_wrap--settings .account_table.hey-nc tr:nth-child(2) td{
	height: 12.6rem;
}
.page_wrap--settings .account_table.hey-nc tr:last-child td{
	height: 10.9rem;
} */
/* End HeyNC  */

/* NJ-9969 */

.soc_med li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0 0;
}

/* NJ-9969 End */

/* NJ-23803 Start */
.contract_information_page .m_t12{
	margin-top: 12px !important;
}

.contract_information_page .m_t14{
	margin-top: 14px !important;
}

.contract_information_page .m_t16{
	margin-top: 16px;
}

.contract_information_page .m_t30{
	margin-top: 30px;
}

.contract_information_page .m_t3{
	margin-top: 3px;
}

.contract_information_page .t_14{
	font-size: 14px;
}

.contract_information_page .t_right{
	text-align: right;
}

.contract_information_page .t_w500{
	font-weight: 500;
}

.contract_information_page .c_blue{
	color: #01ACEE;
}

.contract_information_page  .t_link_v1{
	display: block;
    text-decoration: underline;
    font-weight: 500;
}

.contract_information_page{
	font-family: 'Noto Sans', sans-serif;
	color: #555555;
}

.contract_information_page .width_780{
	width: 780px;
    max-width: 100%;
	margin: 0 auto;
}

.contract_information_page .contract_information_boxes{
	width: 780px;
    max-width: 100%;
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    column-gap: 20px;
    margin: 56px auto 0;
}

.contract_information_page .contract_information_boxes section{
	width: 376px;
    height: 225px;
    border: 2px solid #949494;
    text-align: center;
    padding: 0 10px 10px;
    box-sizing: border-box;
}

.contract_information_page .contract_information_boxes section h4{
	height: 52px;
    background: #949494;
    color: white;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 10px;
    box-sizing: border-box;
    position: relative;
    width: calc(100% + 20px);
    left: -10px;
}

.contract_information_page .contract_information_boxes section .main_con{
	font-size: 48px;
    font-weight: bold;
}

.contract_information_page .contract_information_boxes section .main_con span{
	font-size: 24px;
}

.contract_information_page .contract_information_boxes section .sub_con{
    font-weight: bold;
}

.contract_information_page .contract_information_boxes section .sub_con span{
    font-size: 24px;
}

.contract_information_page .contract_information_boxes section .lower_con{
    font-size: 20px;
}

.contract_information_page .t_link_v1{
    position: relative;
	margin: 0 14px 0 0;
}

.contract_information_page .t_link_v1::before{
	content: ">";
    position: absolute;
    right: -13px;
    font-weight: bold;
}

.contract_information_page .change_plan{
	text-align: center;
    margin: 27px 0 0;
}

.contract_information_page .change_plan h4{
	font-size: 20px;
    font-weight: 500;
}

.contract_information_page .change_plan p{
	margin: 14px 0 0;
}

.contract_information_page .change_plan .change_plan_btn{
	display: flex;
    justify-content: center;
    margin: 23px 0 0;
    column-gap: 20px;
}

.contract_information_page .change_plan .change_plan_btn a{
    width: 300px;
    height: 50px;
    border-radius: 2px;
    color: #fff;
    font-size: 20px;
    padding: 17px 10px;
    box-sizing: border-box;
}

.contract_information_page .change_plan .change_plan_btn a:first-child{
	background: #737373;
}

.contract_information_page .change_plan .change_plan_btn a:first-child:hover{
	opacity: .7!important;
}

.contract_information_page .change_plan .change_plan_btn a:nth-child(2){
	 background: #F4F4F4;
	 color: #CCCCCC;
}

.contract_information_page .change_plan .change_plan_btn .active{
	background: #F1890E !important;
	color: #fff !important;
}

.contract_information_page .change_plan .change_plan_btn .active:hover{
	opacity: .7!important;
}

.contract_information_page .contract_information_boxes .clicked{
    border: 2px solid #F1890E;
}

.contract_information_page .contract_information_boxes .clicked h4{
	background: #F1890E !important;
}


.contract_information_page .contract_information_boxes.v2 #plan5_con.clicked {
    border: 2px solid #537CCE;
}

.contract_information_page .contract_information_boxes.v2 #plan5_con.clicked h4 {
    background: #537CCE !important;
}

.contract_information_page .contract_information_boxes.v2 #chocotto_plan.clicked {
    border: 2px solid #EFAE00;
}

.contract_information_page .contract_information_boxes.v2 #chocotto_plan.clicked h4 {
    background: #EFAE00 !important;
}

.contract_information_page .contract_information_boxes .clicked p{
	color: #000 !important;
}

.contract_information_page .contract_information_boxes .current{
	position: relative;
}

.contract_information_page .contract_information_boxes .current::before{
	content: "現在のプラン";
    width: 150px;
    height: 28px;
    background: #EF1717;
    border-radius: 5px 5px 0px 0px;
    position: absolute;
    top: -30px;
    color: white;
    box-sizing: border-box;
    left: -2px;
    text-align: center;
    padding: 7px 5px;
}

.contract_information_page .contract_information_boxes .radio_container {
    display: block;
    position: absolute;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 50%;
    transform: translatey(-50%);
    width: 22px;
    height: 22px;
	left: 20px;
  }
  
  .contract_information_page .contract_information_boxes .radio_container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  .contract_information_page .contract_information_boxes .radio_container .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  .contract_information_page .contract_information_boxes .radio_container:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  .contract_information_page .contract_information_boxes .radio_container input:checked ~ .checkmark {
	background-color: #EEEEEE;
  }
  
  .contract_information_page .contract_information_boxes .radio_container .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  .contract_information_page .contract_information_boxes .radio_container input:checked ~ .checkmark:after {
	display: block;
  }

  .contract_information_page .contract_information_boxes .radio_container .checkmark:after {
	   top: 4px;
	  left: 4px;
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background: #4EA7B0;
  }

/* NJ-23803 End */

/* NJ-28441 Start */

.contract_information_page .contract_information_boxes.v2{
	width: 900px;
    column-gap: 37px;
	color: #949494;
	align-items: flex-start;
}

.contract_information_page .contract_information_boxes.v2 section{
	width: 400px;
    height: auto;
    padding: 0 10px 40px;
	max-width: 100%;
	cursor: pointer;
	margin: 0 0 2rem;
}

.contract_information_page .contract_information_boxes.v2 section h4 {
    height: 65px;
    font-size: 28px;
    padding: 18px 10px;
}

.contract_information_page .contract_information_boxes.v2.one-box section h4 {
    height: 100%;
}

.contract_information_page .contract_information_boxes.v2 section .main_con span{
	font-weight: bold;
}

.contract_information_page .m_t_28{
	margin-top: 28px;
}

.contract_information_page .m_t_55{
	margin-top: 55px;
}

.contract_information_page .change_plan.v2 .change_plan_btn a:nth-child(2){
	background: #ffe7cb;
	color: #fff;
}

.contract_information_page .change_plan.v2 .change_plan_btn a:first-child {
    background: #959191;
}

.contract_information_page .change_plan.v2 .change_plan_btn {
    margin: 46px 0 0;
    column-gap: 40px;
}

.contract_information_page .contract_information_boxes.v2 .radio_container .checkmark:after {
    background: #F1892B;
}

.contract_information_page .contract_information_boxes.v2 #plan1_con.clicked {
    border: 2px solid #00B199;
}

.contract_information_page .contract_information_boxes.v2 #plan1_con.clicked h4 {
    background: #00B199 !important;
}

.contract_information_page .contract_information_boxes.v2 #plan2_con.clicked {
    border: 2px solid #F16297;
}

.contract_information_page .contract_information_boxes.v2 #plan2_con.clicked h4 {
    background: #F16297 !important;
}

.contract_information_page .contract_information_boxes.v2 #plan3_con.clicked {
    border: 2px solid #00B199;
}

.contract_information_page .contract_information_boxes.v2 #plan3_con.clicked h4 {
    background: #00B199 !important;
}

.contract_information_page .contract_information_boxes.v2 .current_plan_active {
	display: none;
    width: 200px;
    height: 44px;
    position: absolute;
    bottom: -25px;
    background: #F1892B;
    border-radius: 100px;
    font-size: 17px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
	padding: 15px 10px;
    box-sizing: border-box;
}

.contract_information_page .contract_information_boxes.v2 .current_plan_active p{
	color: #fff !important;
}

.contract_information_page .contract_information_boxes.v2 .current .current_plan_active {
	display: block;
}

.contract_information_page .contract_information_boxes.v2 .current::before{
	display: none;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted{
    background: #949494;
    padding: 0 19px 31px;
    width: 400px;
    box-sizing: border-box;
	margin: 4rem 0;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted .header{
	padding: 20px 10px 18px;
    font-size: 28px;
	color: #fff;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted section{
	border: none !important;
    background: #fff;
    padding: 31px 31px 30px;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted section h4 {
    height: 45px;
    font-size: 22px;
    padding: 11px 10px;
    width: 100%;
    left: 0;
}

.contract_information_page .contract_information_boxes.v2 .radio_container{
	height: 18px;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted .save_up_to{
	width: 300px;
	height: 43px;
	background: #949494 ;
	color: #fff;
	border-radius: 100px;
	margin-top: 23px;
	padding: 10px;
	box-sizing: border-box;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted #plan3_con.clicked .save_up_to{
	background: #FF3661 ;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted .save_up_to p{
	color: #fff !important;
}

.contract_information_page .contract_information_boxes.v2 .premium_discounted #plan1_con{
	min-height: 265px;
}

/* NJ-28441 End */

/* NJ-27262 [start] */
.contract_information_page .title_top{
	max-width: 900px;
	margin-inline: auto;
}
.contract_information_page .contract_information_boxes.v2{
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: 400px;
}
.contract_information_page .contract_information_boxes.v2 section{
	position: relative;
}
.contract_information_page .contract_information_boxes.v2 section#plan1_con{
	margin-bottom: 0;
}
.contract_information_page .contract_information_boxes.v2 section#chocotto_plan{
	margin-top: 0;
	min-height: auto;
}
.contract_information_page .contract_information_boxes.v2 > a{
	align-self: flex-end;
	font-size: 16px;
	line-height: 24px;
	color: #00ACEE;
	text-decoration: underline;
}
/* NJ-27262 [end] */

/* NJ-47682 */
.contract_information_page .about-plan-link-container {
	width: 870px;
	max-width: 400px;
	margin: 14px auto 0;
}
.contract_information_page #plan2_con .is-lite-plan-link {
	position: absolute;
	right: -1px;
	bottom: -69px;
}
.contract_information_page .lite-plan-link-hidden {
	visibility:hidden;
	padding-bottom:30px;
}
/* NJ-47682 [end] */

/* NJ-37571 Start */
.contract_information_page .q-a-border {
	display: flex;
    gap: 0.5rem;
	border-top: 1px solid #EEEEEE;
}

.contract_information_page .q-a-border span {
	font-weight: bold;
}

.contract_information_page .q-a-border.q-a-border-ans {
	border: none;
}

.contract_information_page .q-a-border-faq {
	justify-content: flex-end;
}

.contract_information_page p.q-a-border-ans span {
    font-weight: normal;
}

.contract_information_page .contract_information_boxes.v2.bx-flex {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}

.contract_information_page .contract_information_boxes.v2 .bx-grey h4 {
    display: flex;
    align-items: center;
    justify-content: center;
	width: auto;
	height: auto;
	left: 0;
	padding: 11px 10px;
}

.contract_information_page .contract_information_boxes.v2 .bx-grey .bx-title {
	background: #949494;
	color: #fff;
	border: none;
	margin: 0;
	padding: 20px 5px 5px;
}

.contract_information_page .contract_information_boxes.v2 .bx-grey section {
	border: 1.5rem solid #949494;
    padding: 35px;
}

.contract_information_page .contract_information_boxes section .bottom_con {
    font-size: 16px;
    width: 200px;
    background: #F1892B;
    color: #fff !important;
    margin: auto;
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    padding: 14px 5px;
    border-radius: 50px;
}

.contract_information_page .contract_information_boxes section .btm_round_con {
    background: #949494;
	color: #fff;
	padding: 12px 5px;
    border-radius: 50px;
}
.contract_information_page .contract_information_boxes.v2 section.clicked .checkmark:after {
    display: block;
}

/* NJ-45455 */
.kids-disclaimer {
	position: absolute;
	bottom: 8px;
    left: 28px;
	color: #999999;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
}
.page_wrap--settings .account_table tr:nth-child(2) th:after {
	top: 28px;
	bottom: unset;
}
.page_wrap--settings .account_table-2 tr:nth-child(2) th, .page_wrap--settings .account_table-2 tr:nth-child(2) td {
	position: relative;
	padding: 5px 0 5px 30px;
}
.birth_wrap .kids-disclaimer {
	display: block;
	margin: 10px 0 0;
	position: static;
}
/* NJ-45455 End */


/* NJ-64254 */
.page_wrap--settings .account_table-2 .ptbr-lang th, .page_wrap--settings .account_table-2 .ptbr-lang td {
	padding: 5px 0 50px 30px !important;
}
/* NJ-64254 End */

/* NJ-33215 */
.page-payment-v2 .payment-v2-page-content.active {
	display: block;
	opacity: 1;
}
.contract_information_page .btm-back-coupon:after {
	content: url(../images/common/arrow.svg);
	position: absolute;
	margin-left: 0.4rem !important;
	transform: rotate(270deg);
	transition: transform 0.3s ease;
}

.contract_information_page .btm-back-coupon.open:after {
	transform: rotate(0deg);
	margin-top: -0.2rem;
}
.page-payment-v2.coupon .payment-max-width-700 {
	width: 48rem;
}
.page-payment-v2.coupon .box-title {
	padding: 2rem 0 1.3rem 1.2rem;
	margin-bottom: 4.4rem !important;
}
.page-payment-v2.coupon .box-title > p {
	margin: 0;
	font-family: Noto Sans JP;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 100%;
	color: #333333;
	text-align: left;
}
.page-payment-v2.coupon .col--1 > p, .page-payment-v2.coupon .col--2 > p {
	margin: 0 !important;
	color: #333333;
}
.page-payment-v2.coupon .price-row.row-next-payment.row-bb {
	padding: 0;
	margin-bottom: 1.4rem;
	height: 3.8rem;
	align-items: start;
}

.page-payment-v2.coupon .payment-radio .label-text{
	color: #333333;
}
/* NJ-33215 End*/

/* NJ-65174 */
.page-linkage .notice-wrap{
	border: 1px solid #EB4335;
	border-radius: 4px;
	padding: 10px;
	color: #EB4335;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.1;
}
/* NJ-65174 End */

/* NJ-97764 — settings structure foundation */
.page_wrap--settings .settings-structure-state {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-size: 1.4rem;
}
.page_wrap--settings .settings-structure-state--loading {
	background: #f5f5f5;
	color: #666;
}
.page_wrap--settings .settings-structure-state--error {
	background: #fdecea;
	color: #c0392b;
}
.page_wrap--settings .settings-structure-state--partial {
	background: #fff8e6;
	color: #856404;
}
.page_wrap--settings .settings-structure-state--empty {
	background: #f5f5f5;
	color: #666;
}
.page_wrap--settings .settings-structure-section {
	margin-bottom: 40px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e6e6e6;
}
.page_wrap--settings .settings-structure-section:last-of-type {
	border-bottom: none;
}
.page_wrap--settings .settings-structure-nav {
	margin-bottom: 24px;
}
.page_wrap--settings .settings-structure-nav__link {
	text-decoration: none;
}

/* ----------------------------------------------------------
   NJ-97707: Figma redesign — sidebar nav (left) + profile content (right)
   Reference: マイページ（デフォルト）.png
   ---------------------------------------------------------- */

/* Hide legacy monolithic nav + inline sections when Vue hub is active (PC + SP) */
.page_wrap--settings-vue-hub .settings-structure-state,
.page_wrap--settings-vue-hub .settings-structure-nav,
.page_wrap--settings-vue-hub .settings-structure-section,
.page_wrap--settings-vue-hub .page_breadcrumbs_2 {
	display: none !important;
}

/* NJ-97707 PC /account hub — Figma pageLayout (1440×1052) */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) {
	--section-padding-y-platform: 64px;
	--heading-h2-font-size: 32px; /* JP/Heading/H2 */
	--heading-h3-font-size: 24px; /* JP/Heading/H3 */
	--subtitle-lg-font-size: 16px; /* JP/Subtitle/LG */
	--settings-nav-active-bg: rgba(0, 0, 0, 0.08);
	background: #fff;
	padding-top: 0;
	padding-bottom: 0; /* legacy .page_wrap の下30pxを打ち消し */
}
.nc-figma-pc-shell {
	--section-padding-x: 80px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 20px;
	--radius-md: 8px;
	--border-thin: 1px;
	--settings-nav-hover-bg: rgba(0, 0, 0, 0.04);
	--settings-nav-active-bg: rgba(0, 0, 0, 0.08);
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs {
	--section-padding-x: 80px;
	padding: 10px var(--section-padding-x);
	background: #E3E3E3;
	box-sizing: border-box;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__link {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	color: #6B6B6B;
	text-decoration: none;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__link:hover {
	color: #191919;
	text-decoration: underline;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__separator {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__separator svg {
	display: block;
	width: 20px;
	height: 20px;
}
body:has(.nc-figma-pc-shell) .nc-page-breadcrumbs__current {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	color: #191919;
}
body:has(.nc-figma-pc-shell) .footer_breadcrumb {
	display: none;
}
/* design-rules §4.1: 新規ページはデスクトップ固定最小幅（body min-width:1260px）を採用しない — 設定画面のみ解除 */
body:has(.page_wrap--settings-vue-hub),
body:has(.page_wrap--settings-subpage.nc-figma-pc-shell) {
	min-width: 0;
}
/* NJ-97707: header follows deploy/stg (legacy) — the Figma fluid-header override was removed so the
   global header renders identically to deploy/stg / JA across every locale on the settings screen.
   (Body/section layout below is unchanged; only the header width override was dropped.) */
/* section層（design-rules §4.2: 横いっぱい + padding のみ） */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .page_inner {
	width: 100%;
	margin: 0 auto;
	padding: var(--section-padding-y-platform) 80px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .container {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	margin: 0 auto;
	width: 100%;
	max-width: none; /* wrapper責務は .settings-page-layout に一本化 */
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-page-layout {
	display: grid;
	/* Figma wrapper-default: 503 + 80 + 697 = 1280 */
	grid-template-columns: 503px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 80px;
	row-gap: 0;
	width: 100%;
	max-width: 980px; /* wrapper-default: Tablet（design-rules §4.2） */
	height: fit-content;
	margin: 0 auto;
	align-items: start;
	box-sizing: border-box;
}
@media screen and (min-width: 1140px) { /* Desktop トークン（design-rules §4.1） */
	.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-page-layout {
		max-width: 1280px; /* wrapper-default: Desktop */
	}
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-column {
	grid-column: 1;
	grid-row: 1 / -1;
	flex: none;
	width: 503px;
	max-width: 503px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-panel,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-column .settings-banner-wrap {
	max-width: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-panel {
	margin: 0;
	padding: 0;
	width: 100%;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card {
	width: 100%;
	max-width: 503px;
	height: fit-content;
	margin: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background: #E3E3E3;
	border-radius: 32px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__header {
	width: 100%;
	margin: 0 auto;
	padding: 16px 16px 8px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	border-bottom: none;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo {
	margin-bottom: 0;
	width: 80px;
	height: 80px;
	cursor: pointer;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo-edit {
	width: 30px;
	height: 30px;
	left: 56px;
	top: 52px;
	right: auto;
	bottom: auto;
	background: #092846;
	border: none;
	outline: 3px solid #E3E3E3;
	border-radius: 99999px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo-edit img {
	width: 20px;
	height: 20px;
	filter: none;
	opacity: 1;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo-edit:hover img {
	filter: none;
	opacity: 1;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) #profile-photo,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo #profile-photo {
	width: 80px;
	height: 80px;
	border-radius: 9999px;
	object-fit: cover;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__name {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: none;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--heading-h2-font-size, 24px);
	line-height: 130%;
	letter-spacing: -0.005em; /* -0.5% */
	color: #191919;
	box-sizing: border-box;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai {
	width: 100%;
	height: fit-content;
	margin: 0;
	gap: 12px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai-label {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 130%;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge {
	height: fit-content;
	padding: 8px 10px;
	gap: 8px;
	font-size: 14px;
	line-height: 130%;
	border: none;
	border-radius: 8px;
	background: #F5F5F5;
	overflow: visible;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge__type,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge__val {
	display: flex;
	align-items: center;
	padding: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 130%;
	background: transparent;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge__type {
	color: #6B6B6B;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge__val {
	color: #191919;
	font-weight: 500;
}
.settings-ai-badge__val--muted,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__ai .settings-ai-badge__val--muted {
	color: #B3B3B3;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card {
	width: 100%;
	height: fit-content;
	margin: 0 auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	border-radius: 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card__crown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card__name {
	margin: 0;
	width: 100%;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--heading-h3-font-size, 24px);
	line-height: 140%;
	text-align: center;
	color: #F1890E;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card__renewal {
	margin: 0;
	width: 100%;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 130%;
	text-align: center;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card__renewal-date {
	color: #191919;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-left: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card {
	width: 100%;
	max-width: 455px;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	display: block;
	background: #FFFFFF;
	border-radius: 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 16px 16px 10px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__header-title {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	color: #191919;
	flex: 1;
	min-width: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	padding: 0 16px 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__list li {
	padding: 5px 0;
	gap: 6px;
	font-size: 13px;
	line-height: 130%;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__label {
	font-size: 14px;
	font-weight: 400;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__check {
	width: 20px;
	height: 20px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pills {
	width: 100%;
	max-width: 455px;
	min-height: 67px;
	margin: 0 auto;
	gap: 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill {
	padding: 16px;
	gap: 4px; /* 数字と単位の間 */
	border-radius: 16px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill__icon {
	margin-right: 6px; /* gap 4px + 6px = アイコンと数字・単位の間 10px */
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill__num {
	font-size: 18px;
	line-height: 150%;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill--coin .settings-pill__num,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill--coupon .settings-pill__num {
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill__unit {
	font-size: 12px;
	line-height: 130%;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-content {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 790px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-wrap {
	margin-top: 0;
}
/* Figma sidebarNav — 697×790, 32px gap between sections */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-screen-root,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-categories-list {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 790px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
}
/* Figma sidebar section — fluid within settings-content */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-category {
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	box-sizing: border-box;
}
/* Figma sidebar section header — JP/Heading/H3 */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-category__heading {
	width: 100%;
	min-height: 50px;
	height: auto;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 0;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: var(--heading-h3-font-size, 24px);
	font-weight: 700;
	line-height: 140%;
	color: #191919;
	padding: 0 12px 16px;
	margin: 0;
	border-bottom: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-category__list {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Figma sidebar list item — 697×64, space-md padding, 10px gap */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item {
	width: 100%;
	height: 64px;
	min-height: 64px;
	border: none;
	border-bottom: none;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item:last-child {
	border-bottom: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	height: 64px;
	min-height: 64px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	position: relative;
	background: transparent;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link::before,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: transparent;
	z-index: 0;
	pointer-events: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link:hover::before {
	background: var(--settings-nav-hover-bg, rgba(0, 0, 0, 0.04));
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current:hover::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link:hover,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current:hover {
	opacity: 1;
	color: #191919;
	text-decoration: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link:hover .settings-item__icon-wrap,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link > .settings-item__label,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current > .settings-item__label,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link > .settings-item__chevron,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current > .settings-item__chevron {
	position: relative;
	z-index: 1;
}
/* Figma section content row — 40px tall inner content, 10px gap */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link > .settings-item__label,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__link--current > .settings-item__label {
	min-height: 40px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__label {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--subtitle-lg-font-size, 16px);
	line-height: 160%;
	letter-spacing: 0;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: #F5F5F5;
	flex-shrink: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-hub-icon {
	width: 24px;
	height: 24px;
}
/* Figma chevron — 24×24 box, 7×13 vector at top 5.5px / left 9px */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__chevron {
	position: relative;
	width: 24px;
	height: 24px;
	margin-left: auto;
	padding-left: 0;
	flex-shrink: 0;
	font-size: 13px;
	line-height: 1;
	color: #6B6B6B;
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-hub .settings-item__chevron::before {
	position: absolute;
	top: 5.5px;
	left: 9px;
	width: 7px;
	height: 13px;
	font-size: 13px;
	line-height: 13px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card__chevron {
	font-size: 20px;
	color: #6B6B6B;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pill__chev {
	font-size: 20px;
	color: #6B6B6B;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-account-footer {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px; /* settings-content 内のコンテンツとの間隔 */
	padding-bottom: 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-logout {
	grid-column: 2 / 4;
	justify-self: center;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-plan-card,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-options-card {
	margin-top: 0;
}
/* PC: photo preview is SP-only (photo change flow) — hide so the flex gap (16px) applies between plan and options cards */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-profile-card__photo-preview {
	display: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-pills {
	margin-top: 0;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-logout__btn {
	min-width: 120px;
	width: 120px;
	height: 44px;
	padding: 0 24px;
	gap: 6px;
	border-radius: 9999px;
	background: #E3E3E3;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0.005em;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-logout__btn:hover {
	background: #d6d6d6;
	color: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-withdrawal-link {
	grid-column: 1 / -1;
	justify-self: center;
	text-align: center;
	margin-top: 0; /* 行間は .settings-account-footer の gap: 32px に一本化 */
	display: flex;
	justify-content: center;
	gap: 10px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-withdrawal-link a,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-withdrawal-link .settings-withdrawal-link__action {
	width: 224px;
	height: 26px;
	line-height: 160%;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #1E73DC;
	text-decoration: underline;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-withdrawal-link a:hover,
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-withdrawal-link .settings-withdrawal-link__action:hover {
	color: #1E73DC;
	text-decoration: none;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-dot {
	width: 24px;
	height: 24px;
	border-radius: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #CCCCCC;
	display: block;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-dot--active::after {
	background: #191919;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-loading {
	justify-content: flex-start;
	padding: 0;
	min-height: 0;
}

/* ----------------------------------------------------------
   NJ-97707: SP /account hub — Figma 375px (NJ-96194)
   ---------------------------------------------------------- */
.page_wrap--settings-vue-hub.page_wrap--settings-hub {
	--section-padding-x: 20px;
	--section-padding-y-platform: 32px;
	--heading-h2-font-size: 24px;
	--heading-h3-font-size: 20px;
	--subtitle-lg-font-size: 15px;
	--settings-nav-hover-bg: #F2F2F2;
	--settings-nav-active-bg: rgba(0, 0, 0, 0.08);
	background: #fff;
	padding-top: 0;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .page_inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--section-padding-y-platform) var(--section-padding-x) 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .container {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-page-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-column {
	flex: none;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-panel {
	margin: 0;
	padding: 0;
	width: 100%;
	background: transparent;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: #E3E3E3;
	border-radius: 24px;
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo-preview {
	display: none;
	position: absolute;
	left: 50%;
	top: 115px;
	width: 239px;
	max-width: calc(100% - 24px);
	height: 122px;
	transform: translateX(-50%);
	border-radius: 12px;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card--changing-photo .settings-profile-card__photo-preview {
	display: block;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card--changing-photo .settings-profile-card__header {
	position: relative;
	z-index: 0;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card--changing-photo .settings-plan-card {
	position: relative;
	z-index: 1;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card--changing-photo .settings-options-card {
	position: relative;
	z-index: 3;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card--changing-photo .settings-pills {
	position: relative;
	z-index: 4;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__header {
	width: 100%;
	max-width: 311px;
	margin: 0 auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border-bottom: none;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo {
	margin-bottom: 0;
	width: 80px;
	height: 80px;
	cursor: pointer;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo-edit {
	position: absolute;
	width: 24px;
	height: 24px;
	left: 56px;
	top: 56px;
	right: auto;
	bottom: auto;
	background: #092846;
	border: 2px solid #F5F5F5;
	border-radius: 21.5px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo-edit img {
	width: 16px;
	height: 16px;
	filter: none;
	opacity: 1;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub #profile-photo,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__photo #profile-photo {
	width: 80px;
	height: 80px;
	border-radius: 9999px;
	object-fit: cover;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__name {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--heading-h2-font-size, 24px);
	line-height: 130%;
	letter-spacing: -0.005em;
	color: #191919;
	text-align: center;
	white-space: normal;
	overflow: visible;
	overflow-wrap: break-word;
	word-break: break-word;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai {
	width: 100%;
	max-width: 287px;
	min-height: 0;
	height: auto;
	margin: 0;
	gap: 6px 8px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai-label {
	flex: 0 0 100%;
	text-align: center;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	color: #191919;
	white-space: nowrap;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge {
	height: 30px;
	padding: 4px 12px;
	gap: 8px;
	font-size: 14px;
	line-height: 160%;
	border: none;
	border-radius: 4px;
	background: #F5F5F5;
	overflow: visible;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge__type,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge__val {
	display: flex;
	align-items: center;
	padding: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	background: transparent;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge__type {
	color: #6B6B6B;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge__val {
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-profile-card__ai .settings-ai-badge__val--muted {
	color: #B3B3B3;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-plan-card {
	width: 100%;
	max-width: 311px;
	min-height: 128px;
	margin: 0 auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: #FFFFFF;
	border-radius: 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-plan-card__crown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-plan-card__name {
	margin: 0;
	width: 100%;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--heading-h3-font-size, 20px);
	line-height: 140%;
	text-align: center;
	color: #F1890E;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-plan-card__renewal {
	margin: 0;
	width: 100%;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 130%;
	text-align: center;
	color: #191919;
}
/* NJ-101064 SP (owner decision, 2026-09-15, supersedes the 2026-09-15 hide): the card is
   visible again on SP, rendering the pre-ticket __check/__label markup (Account/index.php,
   $isSettingsSpHub branch) rather than this ticket's __row/__row-status redesign. These
   container properties are structure-agnostic (outer <a> wrapper only), so the original
   values apply unchanged to either markup. */
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card {
	width: 100%;
	max-width: 311px;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	display: block;
	background: #FFFFFF;
	border-radius: 16px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 12px 10px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card__list {
	padding: 0 12px 12px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card__header-title {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card__list li {
	padding: 4px 0;
	gap: 6px;
	font-size: 12px;
	line-height: 130%;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-options-card__check {
	width: 20px;
	height: 20px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pills {
	width: 100%;
	max-width: 311px;
	min-height: 80px;
	margin: 0 auto;
	gap: 12px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill {
	flex: 1 1 0;
	min-width: 0;
	min-height: 80px;
	padding: 12px 32px 12px 12px;
	gap: 8px;
	border-radius: 16px;
	background: #FFFFFF;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill__icon {
	margin-bottom: 4px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill__num {
	font-size: 16px;
	line-height: 150%;
	font-weight: 700;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill--coin .settings-pill__num,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill--coupon .settings-pill__num {
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill__unit {
	font-size: 12px;
	line-height: 130%;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-pill__chev {
	position: absolute;
	right: 12px;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-content {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-wrap {
	margin-top: 0;
	width: 100%;
	max-width: 100%;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-section {
	width: 100%;
	min-height: 132px;
	gap: 8px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-viewport {
	width: 100%;
	height: 104px;
	border-radius: 8px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-list {
	height: 104px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-slide {
	height: 104px;
	border-radius: 8px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-slide img {
	width: 100%;
	height: 104px;
	object-fit: cover;
	border-radius: 8px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-dots {
	width: 100%;
	height: 20px;
	gap: 4px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-dot {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #CCCCCC;
	display: block;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-banner-dot--active::after {
	background: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub {
	width: 100%;
	max-width: 100%;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-screen-root,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-categories-list {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-category {
	width: 100%;
	margin-bottom: 0;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-category__heading {
	width: 100%;
	min-height: 40px;
	height: auto;
	padding: 0 0 12px;
	margin: 0;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: var(--heading-h3-font-size, 20px);
	font-weight: 700;
	line-height: 140%;
	color: #191919;
	border-bottom: none;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item {
	width: 100%;
	height: 64px;
	min-height: 64px;
	border: none;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 0;
	min-height: 64px;
	height: 64px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	position: relative;
	background: transparent;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link::before,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: transparent;
	z-index: 0;
	pointer-events: none;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link:hover::before {
	background: var(--settings-nav-hover-bg, rgba(0, 0, 0, 0.04));
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current:hover::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link:hover .settings-item__icon-wrap,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current > .settings-item__icon-wrap,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link > .settings-item__label,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current > .settings-item__label,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link > .settings-item__chevron,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__link--current > .settings-item__chevron {
	position: relative;
	z-index: 1;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__label {
	flex: 1;
	min-width: 0;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: var(--subtitle-lg-font-size, 15px);
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: #F5F5F5;
	flex-shrink: 0;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-hub-icon {
	width: 24px;
	height: 24px;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-hub .settings-item__chevron {
	width: 24px;
	height: 24px;
	margin-left: auto;
	color: #6B6B6B;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-account-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 24px;
	box-sizing: border-box;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-logout {
	margin: 0;
	text-align: center;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-logout__btn {
	min-width: 120px;
	height: 44px;
	padding: 0 24px;
	border-radius: 9999px;
	background: #E3E3E3;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0.005em;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-logout__btn:hover {
	background: #d6d6d6;
	color: #191919;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-withdrawal-link {
	margin-top: 0;
	text-align: center;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-withdrawal-link a,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-withdrawal-link .settings-withdrawal-link__action {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	color: #1E73DC;
	text-decoration: underline;
}
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-withdrawal-link a:hover,
.page_wrap--settings-vue-hub.page_wrap--settings-hub .settings-withdrawal-link .settings-withdrawal-link__action:hover {
	color: #1a5fb0;
	text-decoration: none;
}

/* ----------------------------------------------------------
   NJ-97707: SP settings sub-pages — Figma 375px (profile_edit, etc.)
   ---------------------------------------------------------- */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp {
	--section-padding-x: 20px;
	--section-padding-y-platform: 32px;
	background: #fff;
	padding-top: 0;
	isolation: isolate;
	position: relative;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .page_inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--section-padding-y-platform) var(--section-padding-x) 48px;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .container {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-subpage-nav {
	display: none;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-subpage-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	max-width: 640px;
	width: 100%;
	margin: 0 auto 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-subpage-content {
	width: 100%;
	max-width: 100%;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-subpage-content__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: -0.005em;
	color: #191919;
	margin: 0 0 24px;
	padding: 0;
}
/* Profile edit — section group */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-section {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-section:last-child {
	margin-bottom: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-section__heading {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 140%;
	color: #191919;
	margin: 0;
	padding: 12px 0 8px;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-section + .profile-edit-section .profile-edit-section__heading {
	padding-top: 16px;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
/* Basic info rows — vertical SettingRow */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 0;
	gap: 16px;
	min-height: 0;
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row:last-child {
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__label {
	flex: none;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__value {
	width: 100%;
	flex: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	min-height: 46px;
	align-self: stretch;
	padding: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-nickname,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__value {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-nickname {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row:has(#profile-nickname-display) .profile-edit-row__value {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row:has(#profile-nickname-display) .profile-edit-btn {
	display: none;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select {
	box-sizing: border-box;
	width: 100%;
	min-width: 80px;
	max-width: 360px;
	height: 44px;
	padding: 6px 38px 6px 12px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8L10 12.5L14.5 8' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select:has(option:checked:not([value=""])) {
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select:hover:not(:disabled) {
	background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8L10 12.5L14.5 8' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select:focus {
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 12L10 7.5L14.5 12' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select:focus:hover:not(:disabled) {
	background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 12L10 7.5L14.5 12' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-select:disabled {
	background-color: #F5F5F5;
	color: #B3B3B3;
	cursor: not-allowed;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__value:has(.profile-edit-select--sm) {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
	max-width: 100%;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__value .profile-edit-select--sm {
	flex: 0 0 80px;
	min-width: 80px;
	max-width: 360px;
	width: 80px;
	padding: var(--space-sm, 8px) var(--space-md, 12px);
	background-position: right var(--space-md, 12px) center;
}
/* Privacy rows — horizontal toggle SettingRow */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-card .settings-form-row--toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	gap: 16px;
	min-height: 92px;
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-card .settings-form-row--toggle:last-child {
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-card .settings-form-row--toggle .settings-form-row__label {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-card .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-toggle input:checked + .profile-edit-toggle__slider {
	background: #F1890E;
}
/* SP: boxed form rows only — label above control */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--lesson-preferences .settings-form-row--lesson-time,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--lesson-preferences .settings-form-row--virtual-bg,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--reservation-setting .settings-form-row--google-calendar {
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 0;
	gap: 16px;
	border-bottom-color: #E3E3E3;
}
/* SP: plain settings-form-rows (no bordered box) — single-line rows */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows .settings-form-row--toggle,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row:not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg):not(.settings-form-row--google-calendar) {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	gap: 16px;
	min-height: 56px;
	border-bottom-color: #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows .settings-form-row--toggle .settings-form-row__label,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row:not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg):not(.settings-form-row--google-calendar) .settings-form-row__label {
	flex: 0 1 auto;
	width: auto;
	max-width: 55%;
	min-width: 0;
	white-space: nowrap;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	width: auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg):not(.settings-form-row--google-calendar) .settings-form-row__control {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-section__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 140%;
	color: #191919;
	padding: 16px 0 8px;
	margin: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-card {
	padding: 0;
	margin-bottom: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 24px 0;
	gap: 16px;
	min-height: 0;
	border-bottom: 1px solid #E3E3E3;
	grid-template-columns: unset;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row:last-child {
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__brand img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__status {
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
	text-align: left;
	margin-bottom: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__status--connected {
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__action {
	width: 100%;
	justify-self: unset;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-connect,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-disconnect {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border-radius: 9999px;
	background: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-connect {
	border: 1px solid #092846;
	color: #092846;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-connect:hover {
	background: #fff;
	color: #092846;
	border-color: #092846;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-disconnect {
	border: 1px solid #CCCCCC;
	color: #6B6B6B;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn--linkage-disconnect:hover {
	background: #fff;
	color: #6B6B6B;
	border-color: #CCCCCC;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-linkage-row__action .linkage-check-label[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-btn {
	width: 100%;
	box-sizing: border-box;
}
/* Contract info — SP vertical SettingRow (Figma sp_contract_information) */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info {
	margin-bottom: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 0;
	gap: 16px;
	min-height: 0;
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row:last-child {
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row__label {
	flex: none;
	width: 100%;
	max-width: none;
	min-width: 0;
	white-space: normal;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row > .settings-form-row__value-text,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row__control--split .settings-form-row__value-text {
	width: 100%;
	flex: none;
	min-width: 0;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row__control,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row__control--split {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	flex: none;
	min-width: 0;
	gap: 16px;
	padding: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows--contract-info .settings-form-row .settings-form-btn--outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	flex: none;
	border: 1px solid #092846;
	border-radius: 9999px;
	background: #FFFFFF;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
}

/* SP: shared form rows (non-contract-info) — horizontal single-line rows */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--contract-info) {
	margin-bottom: 0;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--contract-info) .settings-form-row:last-child {
	border-bottom: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row > .settings-form-row__value-text {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	white-space: nowrap;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row__control--split {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	gap: 12px;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row__control--split .settings-form-row__value-text {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	white-space: nowrap;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--contract-info) .settings-form-row .settings-form-btn--outline {
	display: inline-flex;
	width: auto;
	min-width: 120px;
	flex: 0 0 auto;
}

/* SP settings sub-pages — breadcrumbs (Figma 375px) */
body:has(.page_wrap--settings-subpage-sp) .nc-page-breadcrumbs--settings,
body:has(.page_wrap--settings-subpage.nc-figma-pc-shell) .nc-page-breadcrumbs--settings {
	padding: 10px var(--section-padding-x, 20px);
	background: #E3E3E3;
	box-sizing: border-box;
}
body:has(.page_wrap--settings-subpage-sp) .nc-page-breadcrumbs--settings .nc-page-breadcrumbs__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	gap: 8px 16px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}
body:has(.page_wrap--settings-subpage-sp) .footer_breadcrumb {
	display: none;
}

/* SP settings sub-pages — success toast (Figma pill + safe area) */
body:has(.page_wrap--settings-subpage-sp) .settings-toast-container {
	left: 50%;
	right: auto;
	bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	align-items: center;
}
body:has(.page_wrap--settings-subpage-sp) .settings-toast {
	font-size: 14px;
}
body:has(.page_wrap--settings-subpage-sp) .settings-toast__inner {
	gap: 8px;
}

/* SP settings — logged-in mobile header (Figma Frame 3311 / headerWrapper 375px) */
body:has(.page_wrap--settings-hub) .site_header_induce,
body:has(.page_wrap--settings-subpage-sp) .site_header_induce {
	display: none !important;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin .logo::before,
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin .logo::after,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin .logo::before,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin .logo::after {
	display: none !important;
	content: none !important;
}
body:has(.page_wrap--settings-hub) #header.header,
body:has(.page_wrap--settings-subpage-sp) #header.header {
	background: #092846;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 16px;
	row-gap: 4px;
	min-height: 78px;
	height: 78px;
	padding: 16px 20px;
	box-sizing: border-box;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin .logo,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin .logo {
	position: static;
	float: none;
	grid-column: 1;
	grid-row: 1;
	flex: none;
	min-width: 0;
	margin: 0;
	display: block;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin .logo a,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin .logo a {
	display: block;
	line-height: 0;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin .logo img,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin .logo img {
	width: 197px;
	max-width: 100%;
	height: auto;
	max-height: 24px;
}
body:has(.page_wrap--settings-hub) #header .header_inner.header-loggedin h1,
body:has(.page_wrap--settings-subpage-sp) #header .header_inner.header-loggedin h1 {
	position: static;
	float: none;
	grid-column: 1;
	grid-row: 2;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left !important;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 130%;
	color: #fff;
}
body:has(.page_wrap--settings-hub) #header .header_link.header_link-account,
body:has(.page_wrap--settings-subpage-sp) #header .header_link.header_link-account {
	float: none;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	margin: 0;
	width: 92px;
}
body:has(.page_wrap--settings-hub) #header .header_account,
body:has(.page_wrap--settings-subpage-sp) #header .header_account {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border-radius: 9999px;
}
body:has(.page_wrap--settings-hub) #header .header_account .thumb,
body:has(.page_wrap--settings-subpage-sp) #header .header_account .thumb {
	width: 32px;
	height: 32px;
	margin: 0 !important;
	border-radius: 9999px;
	object-fit: cover;
}
body:has(.page_wrap--settings-hub) #header .header_account .user_name,
body:has(.page_wrap--settings-subpage-sp) #header .header_account .user_name {
	display: none;
}
body:has(.page_wrap--settings-hub) #header .func_toggle-global_menu,
body:has(.page_wrap--settings-subpage-sp) #header .func_toggle-global_menu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border-radius: 9999px;
	box-sizing: border-box;
}
body:has(.page_wrap--settings-hub) #header .func_toggle-global_menu .fa-bars,
body:has(.page_wrap--settings-subpage-sp) #header .func_toggle-global_menu .fa-bars {
	font-size: 24px;
	color: #fff;
}

/* ---- GLOBAL HEADER ---- */
/* NJ-97707: The Figma PC-shell header restyle was removed so the settings screen uses the standard
   deploy/stg (legacy) global header on every locale (zh-tw / vi / pt-br / ja render identically).
   Only the new PNG coin-icon sizing is kept so that icon still renders correctly on the legacy header. */
.header-v3 .header_menu-login > ul > li > a[href*="/coin"] .ic_coin,
.header-v3 .header_menu-login > ul > li > a[href*="/coin"] .ic_coin-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* ---- MAIN LAYOUT ---- */
.settings-page-layout {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 920px;
	margin: 0 auto 40px;
	box-sizing: border-box;
}

/* (sidebar removed in NJ-97707 prototype redesign) */

/* ---- RIGHT: Navigation hub area ---- */
.settings-content {
	flex: 1;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-top: 4px;
	box-sizing: border-box;
}

/* ---- Profile (photo + name) — centered, no gray card on PC ---- */
.settings-page-layout .settings-structure-section#section-profile {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 20px !important;
	text-align: center;
}
.settings-page-layout .account_area {
	display: block !important;
	text-align: center;
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.settings-page-layout .account_area .col_left {
	width: 100% !important;
	float: none !important;
	display: block;
	text-align: center;
	margin-bottom: 8px;
}
.settings-page-layout .account_area .thumb img {
	width: 72px !important;
	height: 72px !important;
	border-radius: 50% !important;
	margin: 0 auto 8px !important;
}
.settings-page-layout .btn_change_pic_wrap {
	display: none !important;
}
.settings-page-layout .account_area .col_right {
	width: 100% !important;
	padding-left: 0 !important;
	display: block !important;
	text-align: center;
}
.settings-page-layout .account_area .user_name {
	border-bottom: none !important;
	padding-top: 0 !important;
	text-align: center;
}
.settings-page-layout .account_area .user_name .fw_b {
	font-size: 12px;
	color: #888;
	font-weight: normal;
	margin: 0;
}
.settings-page-layout .account_area .d_table {
	display: block !important;
}
.settings-page-layout .account_area .d_cell {
	display: block !important;
	text-align: center;
}
.settings-page-layout .account_area .user_name .d_cell + .d_cell {
	display: block !important;
}
.settings-page-layout .account_area .user_name .links {
	display: block !important;
	text-align: center;
}
.settings-page-layout .account_area .user_name .links a {
	font-size: 12px;
	color: #16a9b2;
}
.settings-page-layout .account_area .user_name .m_t_20 {
	font-size: 16px !important;
	font-weight: 500;
	color: #1a1a1a;
	margin: 2px 0 0 !important;
}
.settings-page-layout .account_area .email {
	display: none !important;
}
.settings-page-layout .account_area .data > div:not(.user_name) {
	display: none !important;
}

/* ---- Coins/Coupons — Figma: gray-filled rounded cards, centered ---- */
.settings-page-layout .setting-coin-coupon-display {
	padding: 0 !important;
	margin-top: 24px;
}
.settings-page-layout .coin-coupon-list {
	display: flex;
	gap: 20px;
	padding: 0;
	list-style: none;
	margin: 0;
}
.settings-page-layout .coin-coupon-list > li {
	flex: 1;
	padding: 0 !important;
	width: auto !important;
}
.settings-page-layout .single-box {
	padding: 20px 24px 18px !important;
	border: none !important;
	border-radius: 8px;
	background: #f0f1f3 !important;
	text-align: center;
	height: auto !important;
}
.settings-page-layout .box-title .title-text {
	font-size: 13px;
	color: #666;
	font-weight: normal;
	margin: 0;
}
.settings-page-layout .box-title .title-text .icon-question {
	color: #aaa;
	font-size: 14px;
}
.settings-page-layout .t-main {
	font-size: 14px;
	color: #222;
	margin: 12px 0 10px;
}
.settings-page-layout .single-box.box-coin .t-main b {
	color: #16a9b2;
}
.settings-page-layout .single-box.box-coupon .t-main b {
	color: #f1890e;
}
.settings-page-layout .t-main b {
	font-size: 26px;
	font-weight: bold;
}
.settings-page-layout .box-link {
	margin: 6px 0 0;
	line-height: 1.8;
}
.settings-page-layout .box-link a {
	font-size: 12px;
	color: #16a9b2;
}
/* Tooltip stays hidden until hovered (legacy behavior) */
.settings-page-layout .single-box .box-tooltip {
	text-align: left;
}

/* ---- Plan card — white rounded card: crown (top) + orange plan name + gray renewal ---- */
.settings-plan-card {
	display: block;
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 14px 16px 16px;
	margin-top: 14px;
	text-align: center;
	text-decoration: none;
}
.settings-plan-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.settings-plan-card:hover::before {
	opacity: 0.04;
}
.settings-plan-card:hover { text-decoration: none; }
.settings-plan-card > * {
	position: relative;
	z-index: 1;
}
.settings-plan-card__crown {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	line-height: 1;
	margin: 0 auto 6px;
}
.settings-plan-card__crown img {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	object-fit: contain;
}
.settings-plan-card__name {
	display: block;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 140%;
	text-align: center;
	color: #F1890E;
	margin: 0 0 6px;
}
.settings-plan-card__renewal {
	display: block;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 130%;
	text-align: center;
	color: #191919;
	margin: 0;
}
.settings-plan-card__renewal-date {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #191919;
	margin-left: 0;
}

/* ---- section-plan-billing (always hidden) ---- */
#section-plan-billing {
	display: none !important;
}

/* ---- Profile form — hidden on /account (edited on プロフィール設定 sub-page) ---- */
#section-profile-details {
	display: none !important;
}
/* Section heading "プロフィール" sits above the card */
#section-profile-details > h4.ttl {
	font-size: 16px !important;
	font-weight: bold !important;
	color: #1a1a1a !important;
	border-bottom: none !important;
	padding: 0 !important;
	margin: 0 0 14px !important;
}
#section-profile-details > h4.ttl .fr {
	font-weight: normal;
	color: #999;
	font-size: 11px;
}
/* White card wrapper around the form table */
#section-profile-details .p_l_30 {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	padding: 6px 28px !important;
}
/* Row dividers: light solid (Figma) instead of dashed */
#section-profile-details .account_table-2 th,
#section-profile-details .account_table-2 td {
	border-bottom: 1px solid #f0f0f0 !important;
	height: 64px;
}
#section-profile-details .account_table-2 tr:last-child th,
#section-profile-details .account_table-2 tr:last-child td {
	border-bottom: none !important;
}
/* Label column */
#section-profile-details .account_table-2 th {
	font-size: 14px;
	color: #333;
	width: 14rem;
}
/* Hidden rows (e.g. timezone) — kept in DOM for form submission */
#section-profile-details .settings-hide-row {
	display: none !important;
}

/* ---- Legacy sections (always hidden — served by sub-pages) ---- */
#section-notifications,
#section-lesson-environment,
#section-lesson-settings,
#section-options,
#section-options-alt,
#section-account-actions {
	display: none !important;
}

/* Old nav tabs */
.page_wrap--settings .nav_settings {
	display: none !important;
}

/* ---- Mobile hub Vue app (MOBILE ONLY) ---- */
.settings-hub-mobile {
	display: none;
}

/* ---- Mobile logout button (MOBILE ONLY) ---- */
.settings-logout-mobile {
	display: none;
}

/* Save buttons inside hidden form sections */
.page_wrap--settings .btn-save-settings,
.page_wrap--settings .btn_save_all,
.page_wrap--settings .btn_wrap.btn_center.m_b_50 {
	display: none !important;
}

/* ------ Loading/Error states for Vue (mobile only) ------- */
.settings-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 0;
}
.settings-loading__spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid #e0e0e0;
	border-top-color: #16a9b2;
	border-radius: 50%;
	animation: settings-spin 0.7s linear infinite;
}
@keyframes settings-spin {
	to { transform: rotate(360deg); }
}
.settings-empty-state {
	padding: 24px 16px;
	text-align: center;
	color: #666;
}
.settings-empty-state__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.settings-error-state {
	padding: 32px 16px;
	text-align: center;
}
.settings-error-state__message {
	font-size: 14px;
	color: #666;
	margin-bottom: 16px;
}
.settings-error-state__retry-btn {
	display: inline-block;
	padding: 8px 24px;
	font-size: 14px;
	color: #fff;
	background-color: #16a9b2;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s;
}
.settings-error-state__retry-btn:hover { background-color: #138f97; }
.settings-error-state__retry-btn:focus-visible { outline: 2px solid #16a9b2; outline-offset: 2px; }

/* ------ Category/Item styles (Vue hub navigation) ------- */
.settings-category { margin-bottom: 0; }
.settings-sidebar {
	display: flex;
	flex-direction: column;
}
.settings-sidebar .settings-category + .settings-category {
	border-top: 1px solid #E3E3E3;
	margin-top: 12px; /* Figma 3616:12926 — content → 12px → divider */
	padding-top: 20px; /* divider → 20px → next header */
}
.settings-sidebar .settings-category + .settings-category .settings-category__heading {
	padding-top: 0;
}
.settings-category__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: bold;
	color: #1a1a1a;
	padding: 20px 0 10px;
	margin-bottom: 0;
	border-bottom: none;
}
.settings-category__list { list-style: none; margin: 0; padding: 0; }
.settings-sidebar .settings-category__list {
	display: flex;
	flex-direction: column;
	gap: 2px; /* Figma 3616:12926 — Setting Item gap */
}
.settings-category__icon { width: 18px; text-align: center; color: #444; font-size: 15px; flex-shrink: 0; }
/* PC hub: borderless rows (Figma account.png) */
.settings-hub .settings-item { border: none; }
/* Nav row highlight: one layer on .settings-item__link--current::before only */
.settings-hub .settings-item--active,
.settings-sidebar .settings-item--active {
	background: transparent;
}
.settings-hub .settings-item--active .settings-item__link--current {
	background: transparent;
}
.settings-item__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 4px;
	min-height: 48px;
	text-decoration: none;
	color: #333;
	font-size: 14px;
	background-color: transparent;
}
.settings-hub .settings-item__link {
	padding: 0;
}
.settings-item__link:hover { color: #333; text-decoration: none; background-color: transparent; }
.settings-hub .settings-item__link:hover,
.settings-hub .settings-item__link--current:hover,
.settings-sidebar .settings-item__link:hover,
.settings-sidebar .settings-item__link--current:hover {
	opacity: 1;
}
.settings-hub .settings-item__link:hover .settings-item__icon-wrap,
.settings-hub .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
}
.settings-sidebar .settings-item__link > .settings-item__icon-wrap,
.settings-sidebar .settings-item__link--current > .settings-item__icon-wrap,
.settings-sidebar .settings-item__link > .settings-item__label,
.settings-sidebar .settings-item__link--current > .settings-item__label,
.settings-sidebar .settings-item__link > .settings-item__chevron,
.settings-sidebar .settings-item__link--current > .settings-item__chevron {
	position: relative;
	z-index: 1;
}
.settings-sidebar .settings-item__link:hover .settings-item__icon-wrap,
.settings-sidebar .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
	border-radius: 9999px;
}
.settings-hub .settings-item__link:hover .settings-hub-icon,
.settings-sidebar .settings-item__link:hover .settings-hub-icon,
.settings-hub .settings-item__link--current:hover .settings-hub-icon,
.settings-sidebar .settings-item__link--current:hover .settings-hub-icon {
	opacity: 1;
	filter: none;
	mix-blend-mode: normal;
}
.settings-item__link:focus { outline: none; color: #333; }
.settings-item__link:focus-visible { outline: 2px solid #16a9b2; outline-offset: -2px; }
.settings-item__label { flex: 1; line-height: 1.4; font-size: 14px; }
/* Hub nav item name — Subtitle/LG */
.settings-hub .settings-item__label {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0;
	color: #191919;
}
.settings-item__chevron { color: #c8c8c8; font-size: 18px; flex-shrink: 0; font-weight: 300; }
.page_wrap--settings-subpage .settings-item__chevron {
	display: none;
}
.settings-item__external-badge { color: #c0c0c0; font-size: 13px; flex-shrink: 0; }
/* Hub + sidebar nav icons: light gray circle + centered glyph (Figma NJ-96194) */
.settings-hub .settings-item__icon-wrap,
.settings-sidebar .settings-item__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: #F5F5F5;
	color: #092846;
}
.settings-hub-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.settings-withdrawal-block { margin-top: 24px; text-align: center; }
.settings-withdrawal-block__text { font-size: 13px; color: #555; margin: 0 0 4px; }
.settings-withdrawal-block__link { color: #16a9b2; text-decoration: underline; }
.settings-withdrawal-block__link:hover { color: #0e848b; }
.settings-withdrawal-block__note { font-size: 12px; color: #999; margin: 0; line-height: 1.6; }

/* ----------------------------------------------------------
   NJ-96194: Settings sub-page — sidebar nav + profile content
   ---------------------------------------------------------- */
.settings-subpage-layout {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 48px;
	box-sizing: border-box;
}
.settings-subpage-nav {
	flex: 0 0 240px;
	width: 240px;
	min-width: 240px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-subpage-content {
	flex: 1;
	min-width: 0;
}

/* NJ-97707 PC /account/* subpages — flat layout like hub (no grey band / card box) */
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) {
	background: #fff;
	padding-top: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .page_inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .container {
	padding: 24px 0 40px;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	margin: 0 auto;
	max-width: 1200px;
}

/* NJ-97707 PC settings sub-page — Figma NJ-96194 (profile_edit, notification, etc.) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) {
	--section-padding-x: 80px;
	--section-padding-y-platform: 64px;
	--settings-nav-hover-bg: rgba(0, 0, 0, 0.04);
	--settings-nav-active-bg: rgba(0, 0, 0, 0.08);
	background: #fff;
	padding: 0; /* legacy .page_wrap { padding: 10px 0 30px } を打ち消し */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
/* section層（design-rules §4.2: 横いっぱい + padding のみ） */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .page_inner {
	width: 100%;
	max-width: none; /* 旧スコープの1200px指定を打ち消し */
	margin: 0 auto;
	padding: var(--section-padding-y-platform) 80px;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .container {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	margin: 0 auto;
	max-width: 1280px;
	width: 100%;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-layout {
	gap: 80px;
	max-width: 980px; /* wrapper-default: Tablet（design-rules §4.2） */
	margin: 0 auto;
	width: 100%;
}
@media screen and (min-width: 1140px) { /* Desktop トークン（design-rules §4.1） */
	.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-layout {
		max-width: 1280px; /* wrapper-default: Desktop */
	}
}
/* flex layout doesn't need the .cf clearfix — its ::after became a 3rd flex item,
   duplicating the 80px gap and leaving empty space on the right */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-layout::after {
	display: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-nav {
	flex: 0 0 246px;
	width: 246px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-content__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: -0.005em;
	color: #191919;
	margin: 0 0 40px;
	padding: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current {
	min-height: 0;
	padding: 12px 16px;
	gap: 10px;
	border-radius: 12px;
	position: relative;
	background: transparent;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link::before,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: transparent;
	z-index: 0;
	pointer-events: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link:hover::before {
	background: var(--settings-nav-hover-bg, rgba(0, 0, 0, 0.04));
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current:hover::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item--active .settings-item__link--current {
	background: transparent;
	font-weight: 700;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link:hover,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current:hover {
	opacity: 1;
	color: #191919;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link > .settings-item__icon-wrap,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current > .settings-item__icon-wrap,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link > .settings-item__label,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current > .settings-item__label {
	position: relative;
	z-index: 1;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link:hover .settings-item__icon-wrap,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
	border-radius: 9999px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__icon-wrap {
	width: 24px;
	height: 24px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-hub-icon {
	width: 24px;
	height: 24px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-category__heading {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
	padding: 0 16px 12px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section__heading,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-section__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 140%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-btn--outline {
	box-sizing: border-box;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #092846;
	border-radius: 9999px;
	background: #fff;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-subpage-layout {
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto 32px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-subpage-nav {
	flex: 0 0 240px;
	width: 240px;
	min-width: 240px;
}
/* Match header_inner horizontal band (logo left ↔ profile right) below 1260px */
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-category__heading {
	font-size: 16px;
	font-weight: bold;
	padding: 28px 0 10px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
/* Subpage sidebar: plain line icons (no gray circle — Figma NJ-96194) */
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__icon-wrap {
	width: 20px;
	height: 20px;
	background: transparent;
	border-radius: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-hub-icon {
	width: 20px;
	height: 20px;
}
/* Uniform row padding so active highlight does not shift icons/text (legacy PC only — nc-figma has own block) */
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link--current {
	min-height: 44px;
	gap: 12px;
	padding: 0 12px;
	border-radius: 8px;
	box-sizing: border-box;
	position: relative;
	background: transparent;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link::before,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link--current::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: transparent;
	z-index: 0;
	pointer-events: none;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link--current::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link:hover::before {
	background: var(--settings-nav-hover-bg, rgba(0, 0, 0, 0.04));
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item__link--current:hover::before {
	background: var(--settings-nav-active-bg, rgba(0, 0, 0, 0.08));
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .settings-sidebar .settings-item--active .settings-item__link--current {
	background: transparent;
	font-weight: 600;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link:hover,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current:hover {
	opacity: 1;
	color: #333;
	text-decoration: none;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link > .settings-item__icon-wrap,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current > .settings-item__icon-wrap,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link > .settings-item__label,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current > .settings-item__label {
	position: relative;
	z-index: 1;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link:hover .settings-item__icon-wrap,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current:hover .settings-item__icon-wrap {
	background: transparent;
	border-radius: 9999px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-subpage-content__title {
	font-size: 24px;
	font-weight: bold;
	margin: 0 0 24px;
	padding: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row__label,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-row__label {
	font-weight: bold;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row--toggle .settings-form-row__control {
	margin-left: auto;
	flex-shrink: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr); /* 右側のauto列は不要 */
	gap: 20px;
	align-items: center;
	justify-content: stretch;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__label {
	flex: none;
	grid-column: 1;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) > .settings-form-row__value-text {
	grid-column: 2;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__control--split {
	grid-column: 2 / 4;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex: none;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__control:not(.settings-form-row__control--split) {
	grid-column: 3;
	justify-self: end;
	flex: none;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__control--split:has(.settings-form-btn--outline) {
	justify-content: flex-start;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__control--split:has(.settings-form-btn--outline) .settings-form-btn--outline {
	flex: 0 0 120px;
	margin-left: auto;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row:not(.settings-form-row--toggle):not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__control:not(.settings-form-row__control--split):has(.settings-form-btn--outline) {
	grid-column: 2 / 4;
	justify-self: stretch;
	display: flex;
	justify-content: flex-end;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-linkage-row {
	grid-template-columns: minmax(120px, 1fr) minmax(80px, 1fr) auto;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__status {
	text-align: left;
	padding-left: 8px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-section__header {
	margin-bottom: 8px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row__desc {
	padding-left: 0;
	padding-right: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row > .settings-form-row__desc,
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row > .settings-form-row--toggle {
	grid-column: 1 / -1;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .settings-form-row > .settings-form-row--toggle {
	display: flex;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-section {
	margin-bottom: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-section__heading {
	font-size: 15px;
	font-weight: bold;
	margin: 0 0 12px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	overflow: visible;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-row {
	gap: 20px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-row__label {
	flex: 0 0 140px;
	font-size: 14px;
	color: #333;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .profile-edit-row__value:has(.profile-edit-nickname) {
	justify-content: space-between;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-nickname {
	margin-right: 0;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select {
	box-sizing: border-box;
	position: relative;
	min-width: 80px;
	width: 100%;
	max-width: 360px;
	height: 44px;
	padding: 6px 38px 6px 12px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select:has(option:checked:not([value=""])) {
	color: #191919;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select:hover:not(:disabled) {
	background-color: #F5F5F5; /* Figma selectControl hovered */
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select:focus {
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E");
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select:focus:hover:not(:disabled) {
	background-color: #F5F5F5;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-select:disabled {
	background-color: #F5F5F5;
	color: #B3B3B3;
	cursor: not-allowed;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .profile-edit-row__value:has(.profile-edit-select--sm) {
	max-width: 360px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .profile-edit-select--sm {
	width: calc((100% - 20px) / 3);
	min-width: 80px;
	flex: 1 1 0;
	max-width: none;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container,
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .profile-edit-row__value .select2-container {
	width: 100% !important;
	max-width: 360px;
	min-width: 80px;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection--single {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 44px;
	padding: 0;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background: #fff;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection--single::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container:hover .select2-selection--single::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection__rendered {
	padding: 6px 38px 6px 12px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection__placeholder {
	color: #6B6B6B;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection__arrow {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container .select2-selection__arrow b {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	transition: transform 150ms ease;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container--open .select2-selection__arrow b {
	transform: rotate(180deg);
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container--disabled .select2-selection--single {
	background-color: #F5F5F5;
	cursor: not-allowed;
}
.page_wrap--settings-subpage:not(.nc-figma-pc-shell) .profile-edit-row__value .select2-container--disabled .select2-selection__rendered {
	color: #B3B3B3;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .profile-edit-row__value:has(.profile-edit-invite-field) {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 46px;
	align-self: stretch;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp):not(.nc-figma-pc-shell) .profile-edit-row__value:has(.profile-edit-invite-field) .profile-edit-btn--outline {
	flex: none;
	margin-left: auto;
	min-width: 215px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-field {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 6px 12px;
	gap: 6px;
	width: 360px;
	min-width: 80px;
	max-width: 360px;
	height: 44px;
	flex: none;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
	position: relative;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	width: 0;
	height: 26px;
	padding: 0;
	border: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
	position: relative;
	z-index: 2;
	background: transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy {
	flex: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	padding: 0;
	position: relative;
	z-index: 2;
	border: none;
	border-left: none;
	background: transparent;
	color: #6B6B6B;
	cursor: pointer;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 4px;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy:hover::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy:hover {
	background: transparent;
	color: #6B6B6B;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy .fa {
	pointer-events: none;
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #6B6B6B;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-btn--outline {
	padding: 8px 16px;
	font-size: 13px;
}
.page_wrap--settings-subpage:not(.page_wrap--settings-subpage-sp) .profile-edit-actions {
	text-align: center;
	margin-top: 24px;
}

/* NJ-97707 PC settings sub-page — Figma cascade fixes (after base subpage rules) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-content {
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__icon-wrap,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-hub-icon {
	width: 24px;
	height: 24px;
	background: transparent;
	border-radius: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__link--current {
	min-height: 0;
	padding: 12px 16px;
	gap: 10px;
	border-radius: 12px;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item__label {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-item--active .settings-item__label {
	font-weight: 700;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-category__heading {
	padding: 0 16px 12px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-sidebar .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-subpage-content__title {
	font-size: 32px;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: -0.005em;
	margin: 0 0 40px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-section {
	margin-bottom: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px; /* Figma 3616:12934 — header pb-20 */
	width: 100%;
	max-width: 954px;
	align-self: stretch;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 954px;
	align-self: stretch;
	border-top: var(--border-thin, 1px) solid #E3E3E3; /* Figma 3616:12934 — SettingList top divider */
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section__heading {
	font-size: 24px;
	font-weight: 700;
	line-height: 140%;
	margin: 0;
}
/* Unified PC sub-page SettingRow — Figma 954×86 (all nc-figma settings sub-pages) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	width: 100%;
	align-self: stretch;
	height: fit-content;
	min-height: 0;
	padding-top: var(--space-lg, 20px);
	padding-bottom: var(--space-lg, 20px);
	border-bottom: var(--border-thin, 1px) solid #E3E3E3;
	opacity: 1;
}
/* Figma valueCell — py-10 flex column (node 2610:11005) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row > .profile-edit-row__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	height: fit-content;
	min-height: 40px;
	box-sizing: border-box;
}
/* common.css のグローバル input box-shadow（inset）を設定画面では無効化 */
.page_wrap--settings-subpage input[type='text'],
.page_wrap--settings-subpage input[type='number'],
.page_wrap--settings-subpage input[type='search'],
.page_wrap--settings-subpage input[type='tel'],
.page_wrap--settings-subpage input[type='email'],
.page_wrap--settings-subpage input[type='password'],
.page_wrap--settings-subpage input[type='datetime'],
.page_wrap--settings-subpage input[type='date'],
.page_wrap--settings-subpage input[type='month'],
.page_wrap--settings-subpage input[type='week'],
.page_wrap--settings-subpage input[type='time'],
.page_wrap--settings-subpage input[type='datetime-local'],
.page_wrap--settings-vue-hub input[type='text'],
.page_wrap--settings-vue-hub input[type='number'],
.page_wrap--settings-vue-hub input[type='search'],
.page_wrap--settings-vue-hub input[type='tel'],
.page_wrap--settings-vue-hub input[type='email'],
.page_wrap--settings-vue-hub input[type='password'],
.page_wrap--settings-vue-hub input[type='datetime'],
.page_wrap--settings-vue-hub input[type='date'],
.page_wrap--settings-vue-hub input[type='month'],
.page_wrap--settings-vue-hub input[type='week'],
.page_wrap--settings-vue-hub input[type='time'],
.page_wrap--settings-vue-hub input[type='datetime-local'] {
	box-shadow: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row > .profile-edit-row__value {
	min-height: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row:last-child,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row:last-child,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row:last-child,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-card .settings-form-row--toggle:last-child {
	border-bottom: var(--border-thin, 1px) solid #E3E3E3;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value {
	flex: 1 1 auto;
	display: flex !important; /* 外部からの display 上書き対策（flex 前提のレイアウトを保証） */
	flex-direction: row;
	align-items: center;
	gap: 20px;
	min-width: 0;
	min-height: 46px;
}
/* Figma Body/LG — value text (node 2610:11005) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-nickname {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
	flex: 1 1 0;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
/* Figma 3616:12934 settingSectionGroup gap 48px between sections */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section + .profile-edit-section {
	margin-top: 48px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-nickname) {
	flex-wrap: nowrap;
	align-items: center;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-nickname) .profile-edit-btn--outline {
	flex: 0 0 120px;
	min-width: 120px;
	margin-left: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-invite-field) {
	flex-wrap: nowrap;
}
/* Invite field — Figma 3616:12934: fill up to 434px, gap 10, labeled copy pill */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-field {
	flex: 1 1 auto;
	width: auto;
	max-width: 434px;
	gap: 10px;
}
/* hover overlay targets the whole box (not just the copy control) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy::before {
	display: none;
}
/* copy pill — brand-secondary bg, 28px height, radius 6, white Caption/LG Medium */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy {
	flex: none;
	width: auto;
	min-width: 0;
	height: 28px;
	font-weight: 500; /* Medium */
	padding: 0 var(--space-sm, 8px);
	border: none;
	border-radius: 6px;
	background: #092846;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	cursor: pointer;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy:hover {
	/* V2 hover overlay on dark: #FFFFFF 10% */
	background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), #092846;
	color: #FFFFFF;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-invite-copy__label {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 130%;
	color: #FFFFFF;
	pointer-events: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-invite-field) .profile-edit-btn--outline {
	flex: 0 0 215px;
	min-width: 215px;
	margin-left: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row--toggle {
	min-height: 40px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-card .settings-form-row--toggle .settings-form-row__label {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-card .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	width: 44px;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-card .settings-form-row--toggle .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}
/* selectControl — 性別 / 国籍 / 居住地 (Figma node 3616:12934 — fill up to 434×44) */
/* selectControl — Figma構成: .nc-select-control(枠) > select(value) + svg(Icon)。同一階層のフロー配置・gap 10px */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .nc-select-control {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-width: 80px;
	max-width: 434px;
	height: 44px;
	padding: 6px 12px;
	border: var(--border-thin, 1px) solid #CCCCCC;
	border-radius: var(--radius-md, 8px);
	background: #FFFFFF;
	flex: 0 0 auto;
	cursor: pointer;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .nc-select-control:hover {
	background-color: #F5F5F5; /* Figma selectControl hovered — 全体に適用 */
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .nc-select-control:has(> select:disabled) {
	background-color: #F5F5F5;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .nc-select-control > .profile-edit-select {
	box-sizing: border-box;
	display: block;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	align-self: stretch;
	/* クリック領域をコントロール全面（枠のpadding・アイコン領域含む）へ拡張。
	   ネガティブマージンを同値のpaddingで相殺するため見た目の文字位置は不変。
	   右42px = gap 10px + アイコン20px + 枠padding 12px */
	margin: -6px -42px -6px -12px;
	padding: 6px 42px 6px 12px;
	border: 0;
	border-radius: 0; /* 透過背景のため描画に影響なし。角丸だとコーナーのクリック判定が漏れる */
	flex: 1 1 auto;
	opacity: 1;
	background: transparent;
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .nc-select-control > .nc-select-control__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: #6B6B6B;
	pointer-events: none;
}
/* 生年月日 — 434pxを3等分 */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-select--sm) .nc-select-control {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}
/* SP・非figmaページではラッパーを透過扱いにして従来レイアウトを維持 */
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .nc-select-control {
	display: contents;
}
.page_wrap--settings-subpage.page_wrap--settings-subpage-sp .nc-select-control__icon {
	display: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container {
	box-sizing: border-box;
	flex: 0 1 434px;
	width: 434px !important;
	min-width: 80px !important;
	max-width: 434px !important;
	height: 44px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container.select2-container--default .select2-selection--single {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px; /* value と Icon を同一階層でフロー配置 */
	position: relative;
	width: 100%;
	height: 44px !important;
	padding: 0 var(--space-md, 12px);
	border: var(--border-thin, 1px) solid #CCCCCC;
	border-radius: var(--radius-md, 8px);
	background: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container .select2-selection--single::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container:hover .select2-selection--single::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container.select2-container--default .select2-selection__rendered {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 42px;
	padding: 6px 0;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 30px !important;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container.select2-container--default .select2-selection__arrow {
	position: static;
	flex: none;
	width: 20px !important;
	height: 20px !important;
	margin: 0;
	transform: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container.select2-container--default .select2-selection__arrow b {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	transition: transform 150ms ease;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-row__value .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #CCCCCC;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .select2-container--default .select2-dropdown {
	border: var(--border-thin, 1px) solid #CCCCCC;
	border-radius: var(--radius-md, 8px);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	overflow: hidden;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .select2-container--default .select2-results__option {
	padding: 8px 12px;
	font-size: 16px;
	line-height: 160%;
}
/* selectControl — 生年月日 年/月/日 (Figma node 3616:12934 — 3 equal in 434px, gap 10px) */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__value:has(.profile-edit-select--sm) {
	gap: 10px;
	max-width: 434px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-select--sm {
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	min-width: 0;
	max-width: 360px;
	height: 44px;
	padding: var(--space-sm, 8px) var(--space-md, 12px);
	border: var(--border-thin, 1px) solid #CCCCCC;
	border-radius: var(--radius-md, 8px);
	flex: 1 1 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	color: #6B6B6B;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-md, 12px) center;
	background-size: 20px 20px;
	-webkit-appearance: none;
	appearance: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-select--sm:has(option:checked:not([value=""])) {
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-section .profile-edit-select--sm:focus {
	outline: none;
}
/* SettingList 上端の区切り線（Figma: リストは上下ボーダーで囲む） */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows {
	border-top: var(--border-thin, 1px) solid #E3E3E3;
}
/* Googleカレンダー連携行（Figma 3655-2388: labelCell with-text） */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row--google-calendar {
	min-height: 40px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row__label-desc {
	display: block;
	margin-top: 10px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 130%;
	color: #6B6B6B;
	white-space: normal;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 40px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-row__label {
	flex: 0 0 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row:not(:has(> .settings-form-row__value-text)):not(:has(.settings-form-row__control--split)) .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__value-text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row > .settings-form-row__value-text {
	flex: 1 1 auto;
	min-width: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row:not(.settings-form-row--lesson-time):not(.settings-form-row--virtual-bg) .settings-form-row__label {
	white-space: nowrap;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__value-text,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__hint {
	white-space: nowrap;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control--split {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: space-between;
	gap: 10px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control--split .settings-form-row__value-text {
	flex: 1 1 auto;
	min-width: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control:not(.settings-form-row__control--split) {
	flex: 0 0 120px;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row--toggle {
	justify-content: space-between;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row--toggle .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences):not(.settings-form-rows--after-lesson):not(.settings-form-rows--reservation-setting) .settings-form-row--toggle .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-toggle input:checked + .profile-edit-toggle__slider {
	background: #F1890E;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--outline,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-btn--outline {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #092846;
	border-radius: 9999px;
	background: #fff;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
	position: relative;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control--split:has(.settings-form-btn--outline) {
	justify-content: flex-start;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control--split:has(.settings-form-btn--outline) .settings-form-btn--outline {
	flex: 0 0 120px;
	margin-left: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows:not(.settings-form-rows--lesson-preferences) .settings-form-row__control:not(.settings-form-row__control--split):has(.settings-form-btn--outline) {
	flex: 1 1 auto;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--outline:hover,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .profile-edit-btn--outline:hover {
	background: #fff;
	color: #092846;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-card {
	padding: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__brand {
	flex: 0 0 200px;
	gap: 12px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__brand img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__status {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	padding-left: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__status--connected {
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__action {
	flex: 0 0 120px;
	display: flex;
	justify-content: flex-end;
	justify-self: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-connect,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-disconnect {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border-radius: 9999px;
	background: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-connect {
	border: 1px solid #092846;
	color: #092846;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-connect:hover {
	border-color: #092846;
	color: #092846;
	background: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-disconnect {
	border: 1px solid #CCCCCC;
	color: #6B6B6B;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-btn--linkage-disconnect:hover {
	border-color: #CCCCCC;
	color: #6B6B6B;
	background: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-linkage-row__action .linkage-check-label[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.settings-subpage-content {
	flex: 1;
	min-width: 0;
	position: relative;
}
.settings-subpage-content--loading {
	opacity: 0.55;
	pointer-events: none;
}
.settings-subpage-content--loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid #e0e0e0;
	border-top-color: #16a9b2;
	border-radius: 50%;
	animation: settings-subpage-spin 0.7s linear infinite;
}
@keyframes settings-subpage-spin {
	to { transform: rotate(360deg); }
}
.settings-subpage-content__title {
	font-size: 22px;
	font-weight: bold;
	color: #1a1a1a;
	margin: 0 0 28px;
	line-height: 1.3;
}
/* Sidebar active item highlight */
.settings-sidebar .settings-category__heading {
	font-size: 15px;
	padding: 18px 0 8px;
}
.settings-sidebar .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
.settings-sidebar .settings-item__link {
	padding: 0 10px;
	border-radius: 8px;
	min-height: 44px;
}
.settings-sidebar .settings-item--active .settings-item__link--current {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 10px;
	min-height: 44px;
	background: transparent;
	border-radius: 8px;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
}
.settings-sidebar .settings-item--active .settings-item__label {
	font-weight: 600;
}
/* Profile edit form */
.profile-edit-section {
	margin-bottom: 0;
}
.profile-edit-section__heading {
	font-size: 16px;
	font-weight: bold;
	color: #1a1a1a;
	margin: 0 0 14px;
}
.profile-edit-card {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.profile-edit-row {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 14px 0;
	border-bottom: 1px solid #E3E3E3;
	gap: 20px;
}
.profile-edit-row:last-child {
	border-bottom: none;
}
.profile-edit-row__label {
	flex: 0 0 160px;
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}
.profile-edit-row__value {
	flex: 1 1 auto;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	min-height: 46px;
	align-self: stretch;
	padding: 0;
}
.profile-edit-nickname {
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
}
.profile-edit-select {
	box-sizing: border-box;
	min-width: 80px;
	max-width: 360px;
	height: 44px;
	padding: 6px 38px 6px 12px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M466.54-375.23q-6.23-2.31-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31t-13.46-2.31Z' fill='%236B6B6B'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.profile-edit-select:has(option:checked:not([value=""])) {
	color: #191919;
}
.profile-edit-select--sm {
	min-width: 80px;
	width: auto;
}
.profile-edit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	font-family: inherit;
}
.profile-edit-btn--outline {
	color: #333;
	background: #fff;
	border: 1px solid #ccc;
	position: relative;
}
.profile-edit-btn--outline::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.profile-edit-btn--outline:hover::before {
	opacity: 0.04;
}
.profile-edit-btn--outline:hover {
	color: #333;
	text-decoration: none;
}
.profile-edit-btn--primary {
	color: #1a1a1a;
	background-color: #fff;
	background-image: none;
	border: 1px solid #333;
	min-width: 120px;
	padding: 10px 32px;
	font-size: 14px;
	font-weight: normal;
	position: relative;
}
.profile-edit-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.profile-edit-btn--primary:hover::before {
	opacity: 0.04;
}
.profile-edit-btn--primary:hover {
	background-color: #fff;
	color: #1a1a1a;
}
/* 保存 — white pill + grey border (Gyazo f45a8535); beats global button defaults */
.page_wrap--settings-subpage .settings-form-actions button[type="submit"],
.page_wrap--settings-subpage .profile-edit-actions button[type="submit"],
.page_wrap--settings .settings-form-actions button[type="submit"],
.page_wrap--settings .profile-edit-actions button[type="submit"] {
	color: #1a1a1a;
	background-color: #fff;
	background-image: none;
	border: 1px solid #333;
	border-radius: 999px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	min-width: 120px;
	padding: 10px 32px;
	font-size: 14px;
	font-weight: normal;
	position: relative;
}
.page_wrap--settings-subpage .settings-form-actions button[type="submit"]::before,
.page_wrap--settings-subpage .profile-edit-actions button[type="submit"]::before,
.page_wrap--settings .settings-form-actions button[type="submit"]::before,
.page_wrap--settings .profile-edit-actions button[type="submit"]::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.page_wrap--settings-subpage .settings-form-actions button[type="submit"]:hover::before,
.page_wrap--settings-subpage .profile-edit-actions button[type="submit"]:hover::before,
.page_wrap--settings .settings-form-actions button[type="submit"]:hover::before,
.page_wrap--settings .profile-edit-actions button[type="submit"]:hover::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage .settings-form-actions button[type="submit"]:hover,
.page_wrap--settings-subpage .profile-edit-actions button[type="submit"]:hover,
.page_wrap--settings .settings-form-actions button[type="submit"]:hover,
.page_wrap--settings .profile-edit-actions button[type="submit"]:hover {
	background-color: #fff;
	color: #1a1a1a;
}
.profile-edit-invite-field {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	max-width: 420px;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.profile-edit-invite-input {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	border: none;
	padding: 8px 12px;
	font-size: 13px;
	color: #333;
	background: transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.profile-edit-invite-copy {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: none;
	border-left: 1px solid #eee;
	background: #fafafa;
	color: #666;
	cursor: pointer;
}
.profile-edit-invite-copy:hover {
	background: #f0f0f0;
}
.profile-edit-invite-copy .fa {
	pointer-events: none;
}
.profile-edit-actions {
	margin-top: 8px;
}
.profile-edit-card .settings-form-row {
	padding: 20px 0;
	border-bottom: 1px solid #E3E3E3;
}
.profile-edit-card .settings-form-row:last-child {
	border-bottom: none;
}
/* Privacy toggle switches */
.profile-edit-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}
.profile-edit-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
.profile-edit-toggle__slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ccc;
	border-radius: 9999px; /* Figma radius-full */
	transition: background-color 150ms ease;
}
.profile-edit-toggle__slider::before {
	position: absolute;
	content: "";
	/* Figma仕様は21px/1.5pxオフセットだが、DPR1でのサブピクセル滲み防止のため
	   整数値（20px/2px）に最適化（移動量20pxは同一・見た目差は0.5px/側） */
	height: 20px;
	width: 20px;
	left: 2px;
	top: 2px;
	background: #fff;
	border-radius: 9999px;
	transition: transform 150ms ease;
}
/* V2 hover overlay (Overlay/overlay-hover-on-light: Black α4%) — トラック全体 */
.profile-edit-toggle__slider::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.profile-edit-toggle:hover .profile-edit-toggle__slider::after {
	opacity: 0.04;
}
.profile-edit-toggle input:checked + .profile-edit-toggle__slider {
	background: #f1890e;
}
.profile-edit-toggle input:checked + .profile-edit-toggle__slider::before {
	background: #fff;
	transform: translateX(20px);
}

/* ----------------------------------------------------------
   NJ-96194: Shared settings sub-page form rows
   ---------------------------------------------------------- */
.settings-form-section .settings-form-rows {
	margin-bottom: 0;
}
.settings-form-rows .settings-form-row {
	padding-left: 0;
	padding-right: 0;
}
.settings-form-rows .settings-form-row__desc {
	padding-left: 0;
	padding-right: 0;
}
.settings-form-section {
	margin-bottom: 0;
}
.settings-form-section__title {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin: 0 0 12px;
}
.settings-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 56px;
	padding: 14px 0;
	border-bottom: 1px solid #E3E3E3;
}
.settings-form-row:last-child {
	border-bottom: none;
}
.settings-form-row__label {
	flex: 1;
	font-size: 14px;
	color: #333;
	line-height: 1.5;
}
.settings-form-row__control {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.settings-form-row__control--split {
	flex: 1;
	justify-content: flex-end;
}
.settings-form-row__value-text {
	font-size: 14px;
	color: #333;
}
.settings-form-row__hint {
	font-size: 14px;
	color: #888;
}
.settings-form-row__desc {
	width: 100%;
	margin: 0;
	padding: 0 24px 14px;
	font-size: 12px;
	color: #888;
}
.settings-form-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.settings-form-btn--outline {
	color: #333;
	background: #fff;
	border: 1px solid #ccc;
	position: relative;
}
.settings-form-btn--outline::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.settings-form-btn--outline:hover::before {
	opacity: 0.04;
}
.settings-form-btn--outline:hover {
	color: #333;
	text-decoration: none;
}
.settings-form-btn--outline[disabled]:hover::before,
.settings-form-btn--outline.linkage-check-label[disabled]:hover::before {
	opacity: 0;
}
.settings-form-actions {
	margin-top: 8px;
}
/* NJ-96194: Lesson preferences — Figma row alignment */
.settings-form-rows--lesson-preferences .settings-form-row {
	justify-content: flex-start;
	align-items: center;
	min-height: 56px;
	padding: 16px 0;
	border-bottom: 1px solid #e8e8e8;
	gap: 0;
}
.settings-form-rows--lesson-preferences .settings-form-row:last-child {
	border-bottom: none;
}
.settings-form-rows--lesson-preferences .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-size: 14px;
	font-weight: bold;
	color: #1a1a1a;
	line-height: 1.5;
}
.settings-form-rows--lesson-preferences .settings-form-row--lesson-time {
	flex-wrap: nowrap;
	align-items: center;
}
.settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
}
.settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-form-row__control {
	flex: 0 0 auto;
	flex-shrink: 0;
	justify-content: flex-start;
	margin-left: 8px;
	min-width: 0;
}
.settings-form-rows--lesson-preferences .settings-form-row--virtual-bg .settings-form-row__inline-value {
	flex: 1;
	min-width: 0;
	margin-left: 8px;
	font-size: 14px;
	font-weight: normal;
	color: #888;
}
.settings-form-rows--lesson-preferences .settings-form-row--virtual-bg .settings-form-row__action {
	flex-shrink: 0;
	flex: 0 0 120px;
	margin-left: auto;
}
.settings-form-rows--lesson-preferences .settings-form-row--toggle .settings-form-row__control {
	flex-shrink: 0;
	margin-left: auto;
}
.settings-form-rows--lesson-preferences .settings-form-btn--outline {
	min-width: 108px;
	padding: 9px 20px;
	color: #1a1a1a;
	border: 1px solid #333;
	border-radius: 999px;
	font-size: 13px;
	font-weight: normal;
}
.settings-form-rows--lesson-preferences .settings-form-btn--outline:hover {
	color: #1a1a1a;
}
.settings-lesson-time-pills {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	justify-content: flex-start;
}
.settings-lesson-time-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 auto;
	min-width: 52px;
	padding: 8px 16px;
	border: 1px solid #ddd;
	border-radius: 999px;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.12s, background-color 0.12s;
}
.settings-lesson-time-pill__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
.settings-lesson-time-pill span {
	position: relative;
	z-index: 0;
	pointer-events: none;
}
.settings-lesson-time-pill:hover {
	border-color: #ccc;
}
.settings-lesson-time-pill--active {
	border-color: #f5a623;
	background: #fff8ee;
	color: #333;
}

/* NJ-97707: Lesson preferences — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row {
	min-height: 40px;
	padding-top: var(--space-lg, 20px);
	padding-bottom: var(--space-lg, 20px);
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-form-row__control {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
	margin-left: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pills {
	gap: 8px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill {
	box-sizing: border-box;
	min-width: 80px;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid #CCCCCC;
	border-radius: 9999px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	text-align: center;
	color: #191919;
	background: #fff;
	overflow: hidden;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill:hover::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill:hover {
	border-color: #CCCCCC;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill--active,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-lesson-time-pill:has(.settings-lesson-time-pill__input:checked) {
	border: 2px solid #F1890E;
	background: linear-gradient(0deg, rgba(241, 137, 14, 0.08), rgba(241, 137, 14, 0.08)), #FFFFFF;
	color: #C7710C;
	font-weight: 700;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--virtual-bg {
	justify-content: flex-start;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--virtual-bg .settings-form-row__inline-value {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
/* 未確定（未設定・未接続など）のテキストは #6B6B6B */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-row__inline-value--unset,
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--virtual-bg .settings-form-row__inline-value.settings-form-row__inline-value--unset {
	color: #6B6B6B;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--virtual-bg .settings-form-row__action {
	flex: 0 0 120px;
	margin-left: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--toggle {
	justify-content: space-between;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--toggle .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	margin-left: 0;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-btn--outline {
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #092846;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--lesson-preferences .settings-form-btn--outline:hover {
	background: #fff;
	color: #092846;
	border-color: #092846;
}

/* NJ-97707: After lesson — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--after-lesson .settings-form-row--toggle {
	justify-content: space-between;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--after-lesson .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--after-lesson .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	margin-left: 0;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--after-lesson .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}

/* NJ-97707: Reservation setting — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--toggle {
	justify-content: space-between;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--toggle .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	margin-left: 0;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar {
	flex-wrap: wrap;
	align-items: center;
	min-height: 40px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row__control--split:has(.settings-form-btn--outline) {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
	gap: 10px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row__control--split:has(.settings-form-btn--outline) .settings-form-btn--outline {
	flex: 0 0 120px;
	margin-left: auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar .settings-form-row__hint {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #6B6B6B;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row__control--split .settings-form-btn--outline {
	flex: 0 0 120px;
	min-width: 120px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row__desc {
	width: 100%;
	margin: 0;
	padding: 0 0 0 220px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 130%;
	color: #6B6B6B;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .settings-form-row--google-calendar > .settings-form-row--toggle {
	width: 100%;
	min-height: 86px;
	margin-top: 0;
	padding-top: var(--space-lg, 20px);
	padding-bottom: 0;
	border-top: none;
	/* NJ: nested toggle row already sits inside the google-calendar row's own
	   bottom border (re-added via .settings-form-row:last-child at L4984-4989);
	   without this it also gets its own border-bottom from the unified
	   .settings-form-row rule (L4928-4941), rendering as a doubled line. */
	border-bottom: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--reservation-setting .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}

/* NJ-97707: Notification settings — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 0;
	width: 100%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-section__header {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	margin-bottom: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-section__title {
	flex: 1 1 auto;
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 140%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-section__master {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-section__master-label {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
	white-space: nowrap;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-rows {
	margin-bottom: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-row--toggle {
	justify-content: space-between;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-row--toggle .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .settings-form-row--toggle .settings-form-row__control {
	flex: 0 0 44px;
	margin-left: 0;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-notification-section-group .profile-edit-toggle input:not(:checked) + .profile-edit-toggle__slider {
	background: #CCCCCC;
}

/* NJ-97707: Other settings — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--other-settings .settings-form-row__label {
	flex: 0 0 200px;
	width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--other-settings .settings-form-row__control:has(.settings-form-btn--outline) {
	flex: 1 1 auto;
	justify-content: flex-end;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--other-settings .settings-form-btn--outline {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #092846;
	border-radius: 9999px;
	background: #fff;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-form-rows--other-settings .settings-form-btn--outline:hover {
	background: #fff;
	color: #092846;
	border-color: #092846;
}

.settings-linkage-card {
	padding: 8px 0;
}
.settings-linkage-row {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid #f0f0f0;
}
.settings-linkage-row:last-child {
	border-bottom: none;
}
.settings-linkage-row__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
}
.settings-linkage-row__status {
	font-size: 14px;
	color: #888;
	text-align: center;
}
.settings-linkage-row__action {
	justify-self: end;
}
.settings-linkage-row__action .linkage-check-label[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.settings-form-btn--linkage-connect {
	color: #1a1a1a;
	border-color: #1a1a1a;
	background: #fff;
}
.settings-form-btn--linkage-connect:hover {
	color: #1a1a1a;
	border-color: #1a1a1a;
}
.settings-form-btn--linkage-disconnect {
	color: #bbb;
	border-color: #ddd;
	background: #fff;
}
.settings-form-btn--linkage-disconnect:hover {
	color: #bbb;
	border-color: #ddd;
}
.settings-linkage-row__status--connected {
	color: #333;
}
.settings-family-card {
	display: flex;
	gap: 24px;
	padding: 24px;
	border: 1px solid #ececec;
	border-radius: 12px;
	margin-bottom: 16px;
	background: #fff;
}
.settings-family-card--member {
	align-items: flex-start;
	justify-content: space-between;
}
.settings-family-card__avatar {
	flex-shrink: 0;
}
.settings-family-card__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.settings-family-card__body {
	flex: 1;
	min-width: 0;
}
.settings-family-card__actions {
	flex: 0 0 180px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding-top: 28px;
}
.settings-family-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #333;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
}
.settings-family-action-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.settings-family-action-btn:hover::before {
	opacity: 0.04;
}
.settings-family-action-btn:hover {
	color: #333;
	text-decoration: none;
}
.settings-family-action-btn--disabled {
	border-color: #ccc;
	background: #f5f5f5;
	color: #999;
	cursor: default;
	pointer-events: none;
}
.settings-family-action-btn--disabled::before {
	display: none;
}
.settings-family-action-btn--primary {
	border-color: #f1890e;
	background: #f1890e;
	color: #fff;
}
.settings-family-action-btn--primary:hover {
	color: #fff;
}
.settings-family-plan-link {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #888;
	text-align: center;
	text-decoration: none;
}
.settings-family-plan-link:hover {
	color: #666;
	text-decoration: underline;
}
.settings-family-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 8px;
}
.settings-family-badge--admin {
	background: #f5a623;
	color: #fff;
}
.settings-family-badge--member {
	background: #ececec;
	color: #555;
}
.settings-family-card__name {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 12px;
}
.settings-family-card__details div {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 14px;
}
.settings-family-card__details dt {
	color: #888;
	min-width: 110px;
	flex-shrink: 0;
}
.settings-family-card__details dd {
	margin: 0;
	color: #333;
}
.settings-family-list {
	margin-bottom: 8px;
}
.settings-family-cta {
	text-align: center;
	padding: 24px 0 8px;
}
.settings-family-cta p {
	margin: 0 0 8px;
	color: #555;
}
.settings-family-cta__note {
	margin-top: 12px !important;
	font-size: 13px;
	color: #f14444;
}
.settings-family-cta__btn {
	display: inline-block;
	margin-top: 16px;
	padding: 14px 48px;
	border-radius: 999px;
	background: #f5a623;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
}
.settings-family-cta__btn:hover {
	background: #e69512;
	color: #fff;
	text-decoration: none;
}

/* NJ-97707: Family — Figma PC shell cascade fixes */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-page {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-list {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: 0;
	padding: 24px;
	border: 1px solid #CCCCCC;
	border-radius: 24px;
	background: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 16px;
	align-items: start;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card + .settings-family-card {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #E3E3E3;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card--member {
	grid-template-columns: 64px minmax(0, 1fr) 160px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__avatar {
	grid-column: 1;
	grid-row: 1;
	flex-shrink: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	object-fit: cover;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__body {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	gap: 10px;
}
/* Figma 3667:6039 nameArea — バッジ+名前をアバター(64px)と同じ高さで縦中央に */
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__name-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 4px;
	min-height: 64px;
	width: 100%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 4px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 130%;
	margin-bottom: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-badge--admin {
	background: #FDEEDD;
	color: #C7710C;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-badge--member {
	background: #E3E3E3;
	color: #4D4D4D;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__name {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 150%;
	color: #191919;
	margin: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__details div {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__details dt {
	flex: 0 0 120px;
	min-width: 120px;
	color: #6B6B6B;
	font-weight: 400;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__details dd {
	flex: 1 1 auto;
	margin: 0;
	color: #6B6B6B;
	font-weight: 400;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-card__actions {
	grid-column: 3;
	grid-row: 1;
	flex: 0 0 160px;
	width: 160px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	align-self: stretch;
	gap: 16px;
	padding: 0;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-action-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 120px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #092846;
	border-radius: 9999px;
	background: #fff;
	color: #092846;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-action-btn:hover {
	background: #fff;
	color: #092846;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-action-btn--disabled {
	border-color: #CCCCCC;
	background: #F5F5F5;
	color: #B3B3B3;
	cursor: default;
	pointer-events: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-action-btn--primary {
	border-color: #F1890E;
	background: #F1890E;
	color: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-action-btn--primary:hover {
	background: #F1890E;
	color: #fff;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-plan-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	margin-top: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 130%;
	color: #B3B3B3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-plan-link:hover {
	color: #B3B3B3;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 24px;
	width: 100%;
	max-width: 100%;
	padding: 0;
	text-align: center;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta p {
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #191919;
}
.page_wrap--settings-subpage .t_link {
	color: #1E73DC !important;
	text-decoration: underline;
}
.page_wrap--settings-subpage .t_link:hover {
	color: #1E73DC !important;
	text-decoration: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta .t_link {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	margin-top: 0;
	border-radius: 9999px;
	background: #F1890E;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	text-decoration: none;
	position: relative;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta__btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta__btn:hover::before {
	opacity: 0.04;
}
.page_wrap--settings-subpage.nc-figma-pc-shell:not(.page_wrap--settings-subpage-sp) .settings-family-cta__btn:hover {
	background: #F1890E;
	color: #fff;
	text-decoration: none;
}

/* ----------------------------------------------------------
   NJ-97707: Prototype components — profile card (left)
   ---------------------------------------------------------- */
/* LEFT column: profile panel (gray on SP) + campaign banner stacked */
.settings-profile-column {
	flex: 0 0 280px;
	width: 280px;
}
/* SP gray panel wrapper — PC: pass-through */
.settings-profile-panel {
	display: block;
}
/* LEFT: Profile summary card (gray container) */
.settings-profile-card {
	flex: none;
	width: 100%;
	background: #f0f1f3;
	border-radius: 12px;
	padding: 28px 20px 22px;
	text-align: center;
}
.settings-profile-card__photo-form { margin: 0; }
/* Groups photo form + name; keeps the previous 16px photo-to-name spacing in both PC and SP scopes */
.settings-profile-card__identity {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.settings-profile-card__photo {
	position: relative;
	width: 92px;
	height: 92px;
	margin: 0 auto 12px;
	cursor: pointer;
}
.settings-profile-card__photo::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 1;
}
.settings-profile-card__photo:hover::before {
	opacity: 0.12;
}
.settings-profile-card__photo #profile-photo {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.settings-profile-card__photo-edit {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1e3a5f;
	color: #fff;
	border: 2px solid #f0f1f3;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}
.settings-profile-card__photo-edit img {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
	filter: none;
	opacity: 1;
}
.settings-profile-card__name {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 130%;
	letter-spacing: -0.005em;
	color: #1a1a1a;
	margin: 0 0 10px;
	max-width: 100%;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}
/* AI speaking test badges — label + badges all inline on same row */
.settings-profile-card__ai {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 6px 0 4px;
}
.settings-profile-card__ai-label {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
	flex-shrink: 0;
}
/* Two badges side by side: [日常][Lv.8]  [ビジネス][未受講] */
.settings-ai-badge {
	display: inline-flex;
	align-items: stretch;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	font-size: 11px;
	line-height: 1;
	border: 1px solid #e0e0e0;
	text-decoration: none;
	color: inherit;
}
/* V2 hover overlay (Overlay/overlay-hover-on-light: Black α4%, 150ms ease) */
.settings-ai-badge::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.settings-ai-badge:hover::before {
	opacity: 0.04;
}
.settings-ai-badge:hover {
	text-decoration: none;
	color: inherit;
}
.settings-ai-badge > * {
	position: relative;
	z-index: 1;
}
.settings-ai-badge__type {
	background: #e8e8e8;
	color: #555;
	padding: 5px 8px;
	font-weight: 600;
	white-space: nowrap;
}
.settings-ai-badge__val {
	background: #fff;
	color: #333;
	font-weight: bold;
	padding: 5px 9px;
	white-space: nowrap;
}
/* Active options card */
.settings-options-card {
	display: block;
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 0;
	margin-top: 14px;
	text-align: left;
	text-decoration: none;
	color: #333;
}
.settings-options-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.settings-options-card:hover::before {
	opacity: 0.04;
}
.settings-options-card:hover {
	text-decoration: none;
	color: #333;
}
.settings-options-card > * {
	position: relative;
	z-index: 1;
}
.settings-options-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px 10px;
	margin-bottom: 0;
}
.settings-options-card__header-title {
	font-size: 14px;
	font-weight: bold;
	color: #222;
	line-height: 1.3;
}
.settings-options-card__chevron {
	color: #c8c8c8;
	font-size: 18px;
	font-weight: 300;
	flex-shrink: 0;
	line-height: 1;
}
.settings-options-card__list {
	list-style: none;
	margin: 0;
	padding: 0 16px 14px;
}
.settings-options-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #333;
	padding: 5px 0;
	line-height: 1.45;
}
.settings-options-card__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #f1890e;
}
.settings-options-card__check-svg {
	display: block;
	width: 100%;
	height: 100%;
}
.settings-options-card__label {
	flex: 1;
}
/* NJ-101064: always-on 3-row options card — row label + status chip / inclusion note.
   Chip radius 8px per definition.md design notes (decided 2026-09-09): on the DS's 4/8/12/16/full
   scale, 8px reads clearly as a status chip inside a 16px card without looking like a button
   (a full/pill radius, or the 4px alternative, both read as tappable — the same failure the
   no-border rule below exists to avoid). No border on chips — a border reads as a button. */
.settings-options-card__list--rows {
	padding: 4px 16px 14px;
}
.settings-options-card__row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #333;
	padding: 8px 0;
	line-height: 1.45;
	border-top: 1px solid #eee;
}
.settings-options-card__row:first-child {
	border-top: none;
}
.settings-options-card__row-icon {
	/* No forced circular crop here — reuse the same icon assets exactly as
	   user/View/Option/index.php already renders them (plain <img>, no CSS
	   shape mask); the badge shape is drawn in the SVG itself. */
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}
/* Body holds label + status/note. flex-wrap so a long note (e.g. the "included in
   Native unlimited" line) drops to its own full-width line instead of being squeezed
   into a narrow leftover column and breaking mid-character. */
.settings-options-card__row-body {
	flex: 1;
	min-width: 0;
	align-self: center;
	display: flex;
	align-items: center;
	/* align-content centres the wrapped lines as a group, so the label sits on the row's
	   centre line when it is alone and lifts above it when the note wraps beneath —
	   without it the lines stretch and the label drifts off centre. */
	align-content: center;
	flex-wrap: wrap;
	row-gap: 4px;
	column-gap: 8px;
	justify-content: space-between;
	padding-left: 6px; /* avoid the note bumping into the right edge of the card */
}
.settings-options-card__row-label {
	flex: 1 1 auto;
	min-width: 0;
}
.settings-options-card__row-status {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
/* NJ-101064: green for "subscribed" per the JA design artifact. Kept identical to the
   /option page's chip (option.css .option-name.option-in-use) so the same member state
   never renders in two different colours across the two screens. */
.settings-options-card__row-status--subscribed {
	background: rgba(30, 126, 52, 0.12);
	color: #1e7e34;
}
.settings-options-card__row-status--not-subscribed {
	background: #f2f2f2;
	color: #767676;
}
/* Orange, not grey: the artifact renders the "included in Native" line as an accent note
   (same treatment as the inclusion note on /option), not as muted secondary text. */
.settings-options-card__row-note {
	flex: 1 1 100%;
	font-size: 12px;
	color: #f1890e;
	text-align: left;
}
/* Coin / Coupon pill buttons */
.settings-pills {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}
.settings-pill {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border-radius: 8px;
	padding: 11px 10px;
	text-decoration: none;
	color: #222;
	font-size: 13px;
}
.settings-pill::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 0;
}
.settings-pill:hover::before {
	opacity: 0.04;
}
.settings-pill:hover { text-decoration: none; }
.settings-pill > * {
	position: relative;
	z-index: 1;
}
/* common.css の a:hover img（画像のみ減光）を無効化 — ホバー表現はオーバーレイ方式に統一 */
.settings-plan-card:hover img,
.settings-pill:hover img,
.settings-banner-slide:hover img {
	opacity: 1;
	filter: none;
	-webkit-filter: none;
}
.settings-pill__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.settings-pill__count-badge {
	position: absolute;
	top: -3px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	background: #f84f63;
	border-radius: 50%;
	color: #fff;
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;
}
.settings-pill__nc-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #2b2b2b;
	color: #fff;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	box-shadow: inset 0 0 0 1.5px #6a6a6a;
}
.settings-pill__num {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	color: #1a1a1a;
	white-space: nowrap;
}
.settings-pill--coin .settings-pill__num {
	color: #16a9b2;
}
.settings-pill--coupon .settings-pill__num {
	color: #f1890e;
}
.settings-pill__unit {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
}
.settings-pill__chev {
	flex-shrink: 0;
	margin-left: auto;
	color: #ccc;
	font-size: 16px;
}
/* Campaign banner carousel */
.settings-banner-wrap {
	margin-top: 14px;
}
.settings-banner-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	position: relative;
	box-sizing: border-box;
}
.settings-banner-viewport {
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
	border-radius: 12px;
}
/* Stage = banner viewport + nav buttons only (dots excluded from the hover area) */
.settings-banner-stage {
	position: relative;
	width: 100%;
}
/* Banner hover — Figma node 3584:11933: image overlay (on-image α12%) + 24px side strips */
.settings-banner-viewport::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000000;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
	z-index: 1;
}
.settings-banner-viewport:hover::before {
	opacity: 0.12;
}
/* Prev / Next — full-height 28px strips on the banner edges, white chevron */
.settings-banner-nav {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 28px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.24);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease, background 150ms ease;
}
.settings-banner-nav:hover {
	background: rgba(0, 0, 0, 0.4);
}
.settings-banner-nav--prev {
	left: 0;
}
.settings-banner-nav--next {
	right: 0;
}
.settings-banner-viewport:hover .settings-banner-nav {
	opacity: 1;
	pointer-events: auto;
}
/* キーボード操作時のみナビを表示（マウスクリックの残留フォーカスでは表示しない） */
.settings-banner-viewport:has(:focus-visible) .settings-banner-nav {
	opacity: 1;
	pointer-events: auto;
}
.settings-banner-nav__icon {
	display: block;
	flex-shrink: 0;
}
.settings-banner-nav__icon--prev {
	transform: scaleX(-1);
}
.settings-banner-list {
	display: flex;
	gap: 12px;
	height: 100px;
	will-change: transform;
	transition: transform 0.35s ease;
}
.settings-banner-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	display: block;
	position: relative;
	text-decoration: none;
}
.settings-banner-slide img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
.settings-banner-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
}
.settings-banner-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d8d8d8;
	cursor: pointer;
}
.settings-banner-dot--active {
	background: #555;
}
.settings-banner-dot:focus-visible {
	outline: 2px solid #1e3a5f;
	outline-offset: 2px;
}
/* PC hub: Figma banner section 503×136 */
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-section {
	width: 100%;
	gap: 14px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-viewport {
	width: 503px;
	height: 100px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-list {
	width: max-content; /* 実スライド6枚 + 周回用クローン2枚 */
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-slide {
	flex: 0 0 503px;
	width: 503px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-slide img {
	width: 503px;
}
.page_wrap--settings-vue-hub:not(.page_wrap--settings-hub) .settings-banner-dots {
	width: 100%;
}

/* RIGHT: Navigation hub categories */
.settings-hub { background: transparent; }
.settings-screen-root,
.settings-categories-list {
	margin: 0;
	padding: 0;
}
.settings-hub .settings-category__heading {
	font-size: 16px;
	font-weight: bold;
	color: #222;
	padding: 22px 0 12px;
}
.settings-hub .settings-category:first-child .settings-category__heading {
	padding-top: 0;
}
.settings-hub .settings-category {
	margin-bottom: 0;
}
/* ログアウト + 退会 — Figma hub footer (4-col grid: btn cols 2–3, link full span) */
.settings-account-footer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 32px;
	padding-bottom: 12px;
}
.settings-logout {
	grid-column: 2 / 4;
	justify-self: center;
	margin: 0;
}
.settings-withdrawal-link {
	grid-column: 1 / -1;
	justify-self: center;
	text-align: center;
	margin-top: 16px;
	padding-bottom: 0;
}
.settings-logout__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 120px;
	height: 44px;
	padding: 0 24px;
	box-sizing: border-box;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.005em;
	color: #191919;
	background: #E3E3E3;
	border: none;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s;
}
.settings-logout__btn:hover {
	background: #d6d6d6;
	color: #191919;
	text-decoration: none;
}
.settings-withdrawal-link a,
.settings-withdrawal-link .settings-withdrawal-link__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 224px;
	min-height: 26px;
	height: 26px;
	box-sizing: border-box;
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	color: #1E73DC;
	text-decoration: underline;
}
.settings-withdrawal-link a:hover,
.settings-withdrawal-link .settings-withdrawal-link__action:hover {
	color: #1a5fb0;
	text-decoration: none;
}

/* ----------------------------------------------------------
   NJ-97707: SP responsive (≤ 767px) — single column
   NJ-96194: Figma SP hub (account.png)
   ---------------------------------------------------------- */
@media (max-width: 799px) { /* Mobile トークン（design-rules §4.1） */
	.page_wrap--settings.page_wrap--settings-hub {
		background: #fff;
	}
	.page_wrap--settings-hub .page_breadcrumbs_2,
	.page_wrap--settings-hub .settings-structure-state,
	.page_wrap--settings-hub .settings-structure-section {
		display: none !important;
	}
	.page_wrap--settings.page_wrap--settings-hub .page_inner,
	.page_wrap--settings-hub .page_inner {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 10px 16px 0;
		box-sizing: border-box;
	}
	.page_wrap--settings.page_wrap--settings-hub .container,
	.page_wrap--settings-hub .container {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}
	.page_wrap--settings-hub {
		overflow-x: hidden;
	}
	/* SP hub Figma layout: see .page_wrap--settings-vue-hub.page_wrap--settings-hub block above */
	.settings-error-state { padding: 24px 16px; }
	.settings-error-state__message { font-size: 13px; }
	.settings-error-state__retry-btn { width: 100%; padding: 12px; font-size: 15px; }
	.settings-loading { padding: 36px 0; }
	/* Sub-page: stack sidebar above content on SP */
	.page_wrap--settings-subpage-sp .page_inner,
	.page_wrap--settings.page_wrap--settings-subpage-sp .page_inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 10px 16px 0;
		box-sizing: border-box;
	}
	.page_wrap--settings-subpage-sp .container,
	.page_wrap--settings.page_wrap--settings-subpage-sp .container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
		box-sizing: border-box;
	}
	.page_wrap--settings-subpage-sp .settings-subpage-nav {
		display: none;
	}
	/* SP sub-page Figma: see .page_wrap--settings-subpage.page_wrap--settings-subpage-sp block above */
	.settings-subpage-layout {
		flex-direction: column;
		gap: 16px;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 48px;
	}
	.settings-subpage-nav {
		flex: none;
		width: 100%;
	}
	.settings-subpage-content {
		width: 100%;
		max-width: 100%;
	}
	.settings-form-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.settings-form-rows--lesson-preferences .settings-form-row--lesson-time {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}
	.settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-form-row__label {
		flex: 0 0 auto;
		width: auto;
		max-width: 42%;
	}
	.settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-form-row__control {
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 0;
	}
	.settings-form-rows--lesson-preferences .settings-form-row--lesson-time .settings-lesson-time-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.settings-form-row__control--split {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 8px;
	}
	.settings-form-btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.page_wrap--settings-subpage-sp .settings-form-row__control--split {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 10px;
	}
	.page_wrap--settings-subpage-sp .settings-form-row__control--split .settings-form-row__value-text {
		width: 100%;
	}
	.contract_information_page.signup_wrap .page_inner,
	.contract_information_page.signup_wrap .signup_container,
	.contract_information_page.page_wrap--settings-subpage-sp .page_inner,
	.contract_information_page.page_wrap--settings-subpage-sp .container {
		width: 100%;
		max-width: 100%;
		padding: 10px 16px 24px;
		box-sizing: border-box;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .page_breadcrumbs_2 {
		display: none;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .contract_information_boxes.v2 {
		margin-top: 0;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .change_plan.v2 {
		width: 100%;
		max-width: 100%;
		margin-top: 24px;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .change_plan.v2 h4 {
		font-size: 16px;
		text-align: center;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .change_plan.v2 .change_plan_btn {
		width: 100%;
		max-width: 100%;
		margin-top: 24px;
	}
	.contract_information_page.page_wrap--settings-subpage-sp #proceed_prompt {
		font-size: 14px;
		line-height: 1.5;
		text-align: center;
	}
	.contract_information_page.page_wrap--settings-subpage-sp .btn_min.back {
		margin: 16px 0 8px;
	}
	.contract_information_page .contract_information_boxes.v2 {
		width: 100%;
		max-width: 100%;
	}
	.contract_information_page .contract_information_boxes.v2 section,
	.contract_information_page .contract_information_boxes.v2 .premium_discounted {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.contract_information_page .change_plan .change_plan_btn {
		width: 100%;
		max-width: 100%;
	}
	.contract_information_page .change_plan .change_plan_btn a {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.contract_information_page .w_400 {
		width: 100%;
		max-width: 100%;
	}
	.contract_information_page .contract_information_boxes.v2 .current_plan_active {
		min-width: 0;
		width: auto;
		max-width: calc(100% - 32px);
		padding: 11px 20px;
	}
}

/* NJ-97707 FB1/FB3: section master toggles + toast */
.settings-form-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.settings-form-section__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}
.settings-form-section__master {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.settings-form-section__master-label {
	font-size: 13px;
	color: #666;
	white-space: nowrap;
}
.settings-toast-container {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0;
	pointer-events: none;
	max-width: calc(100% - 32px);
}
.settings-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 120px;
	max-width: calc(100vw - 48px);
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
	animation: settings-toast-in 200ms ease-out;
}
.settings-toast--success,
.settings-toast--info,
.settings-toast--warning {
	background: #252525;
	color: #FFFFFF;
}
.settings-toast__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.settings-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.settings-toast__label {
	text-align: center;
	white-space: nowrap;
}
.settings-toast--error {
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #c62828;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	max-width: 420px;
}
.settings-toast__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 0 8px;
}
.settings-toast--dismiss {
	opacity: 0;
	transform: none;
	transition: opacity 150ms ease-in;
}
.settings-toast--push-out {
	transition-duration: 150ms;
}
@keyframes settings-toast-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 799px) { /* Mobile トークン（design-rules §4.1） */
	.settings-toast-container {
		left: 50%;
		right: auto;
		bottom: max(16px, env(safe-area-inset-bottom));
		transform: translateX(-50%);
		align-items: center;
	}
	.settings-form-section__header {
		flex-direction: column;
		align-items: flex-start;
	}
}