/*
Theme Name: sydney-child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 2.2401301330
*/


/*--------------------------------------------------------------
サイト全体
--------------------------------------------------------------*/

/* 画面の高さが無いとフッターが釣られて不恰好なので下部に固定
#content {
	margin-bottom: 67px;
}
footer{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
}

2023/06/28
本来は最下部までスクロールした際に表示されるフッターが、この設定だと常に最下部に固定されるので、
それはそれで不恰好、、、なので不採用

画面の高さが無いとフッターが釣られて不恰好なので下部に固定 */

/* モバイルの場合の調整 */
@media (max-width: 768px) {
  /* Sydneyテーマはデバイス毎のデフォルト余白を設定できないので、モバイルの場合に上余白を狭くする */
  .page-wrap {
    padding-top: 20px!important; /* !importantで強制的に */
  }
  /* モバイルの場合にフッターを非表示 
  .site-footer {
    display: none;
  } */
}

/* モバイルの場合の余白調整がトップページにも適用されてしまう（ヘッダーとメイン画像の間に隙間が開く）ので、除外する設定 */
@media (max-width: 768px) {
  body.home .page-wrap {
    padding: 0!important; /* !importantで上の.page-wrapの設定をさらに上書き */
  }
}



/*--------------------------------------------------------------
pagenation
--------------------------------------------------------------*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
}

/* 最初のページ・前のページ を左寄せ */
.pagination-left {
  margin-right: auto;
}

/* 現在のページ/総ページ数を 中央寄せ */
.pagination-center {
  position: absolute;
}

/* 次のページ・最後のページ を右寄せ */
.pagination-right {
  margin-left: auto;
}

/* 最初のページ・前のページ・次のページ・最後のページ の余白調整 */
.first-page, .previous-page, .next-page, .last-page {
  padding: 24px 12px;
}

/* 現在のページ/総ページ数を 太字 */
.pagination .page-info {
  font-weight: bold;
}


/*--------------------------------------------------------------
bootstrap調整
--------------------------------------------------------------*/
.form-row {
  display: flex;
  flex-wrap: wrap;
}

input#startDate, input#endDate, input#keyword {
  width: 100%;
  margin-bottom: 24px;
}

.form-group-btn.col-md-2 {
  display: flex;
  align-items: end;
  justify-content: end;
  margin-bottom: 24px;
}

.caption-row {
  display: flex;
  background-color: #EEEDED;
  border-bottom: 0;
  padding: 6px;
}

.caption-col{
  color: #707070;
}

.contents-row {
  display: flex;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px 6px 10px 6px;
}

.grey {
  color: #707070;
}

button.refine-btn {
  border-radius: 4px;
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (max-width: 767px) {
  .form-row {
    border-bottom: 1px solid #CCCCCC;
  }
  .caption-row {
    display: none;
  }
  .contents-row {
    flex-wrap: wrap;
  }
  .col-xs-6,
  .col-xs-12 {
    width: 100%;
    margin-bottom: 10px;
  }
  .grey {
    display: none;
  }
}

@media (min-width: 768px) {
  .caption-col {
    display: none;
  }
}

@media (max-width: 540px) {
  .pagination-center {
    padding-top: 80px;
  }
}


/*--------------------------------------------------------------
保有設備一覧・サービス対応履歴一覧・請求履歴一覧 共通
--------------------------------------------------------------*/

/* PC、タブレットの場合、項目名をグレイ */
.myportal-caption-pc, .myportal-caption-tablet, 
.mysupport-caption-pc, .mysupport-caption-tablet, 
.mybill-caption-pc, .mybill-caption-tablet {
  display: flex;
  background-color: #EEEDED;
  border-bottom: 0;
  padding: 6px;
}

/* モバイルは項目名無し、下線を表示させる */
.myportal-caption-mobile,
.mysupport-caption-mobile,
.mybill-caption-mobile {
  display: flex;
  border-bottom: 1px solid #CCCCCC;
}


/* 保有設備一覧・サービス対応履歴一覧・請求履歴一覧 の行 → 下線あり */
.contents-row, 
.myportal-contents-pc, .myportal-contents-tablet, .myportal-contents-mobile, 
.mysupport-contents-pc, .mysupport-contents-tablet, .mysupport-contents-mobile, 
.mybill-contents-pc, .mybill-contents-tablet, .mybill-contents-mobile {
  display: flex;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px 6px 10px 6px;
}

/* モバイルのサポート申し込みボタン内テキストが折り返されるので、左右余白を調整 */
.myportal-contents-mobile-request button.my-buttons {
  padding: 6px 20px;
}

/* タイトル(保有設備、サービス対応履歴、請求書・明細書の一覧) */
@media (max-width: 768px) {
  .myportal-title {
    margin: 20px 0px 20px 0px;
  }
}
@media (min-width:1025px) {
  .myportal-title {
    margin: 60px 0px 20px 0px;
  }
}
.myportal-title span {
  font-weight: bold;
}



/*--------------------------------------------------------------
保有設備一覧 (mypage)
--------------------------------------------------------------*/

/* 保有設備一覧 のブレイクポイントは、、、
テーマのブレイクポイントと、コンテンツの見切れ、重なり等を考慮して、
・モバイル : 640px以下 
・タブレット : 641px以上1024px以下
・PC : 1025px以上
*/

/* モバイル : 640px以下 */
@media screen and (max-width:640px){
  /* .myportal-caption-mobile {display: none;} */
  .myportal-caption-tablet {display: none;} 
  .myportal-caption-pc {display: none;} 
  /* .myportal-contents-mobile {display: none;} */
  .myportal-contents-tablet {display: none;} 
  .myportal-contents-pc {display: none;} 
}
/* タブレット : 641px以上1024px以下 */
@media screen and (min-width:641px) and (max-width:1024px){
  .myportal-caption-mobile {display: none;} 
  /* .myportal-caption-tablet {display: none;} */
  .myportal-caption-pc {display: none;} 
  .myportal-contents-mobile {display: none;} 
  /* .myportal-contents-tablet {display: none;} */
  .myportal-contents-pc {display: none;} 
}
/* PC : 1025px以上 */
@media screen and (min-width:1025px){
  .myportal-caption-mobile {display: none;} 
  .myportal-caption-tablet {display: none;} 
  /* .myportal-caption-pc {display: none;} */
  .myportal-contents-mobile {display: none;} 
  .myportal-contents-tablet {display: none;} 
  /* .myportal-contents-pc {display: none;} */
}


/* 列幅: 番号・メーカー20%, 設備・型番35%, 導入・保証状況15%, 契約・契約番号15%, サポート依頼15% */
.myportal-contents-20 {
  width: 20%;
}
.myportal-contents-35 {
  width: 35%;
}
.myportal-contents-15 {
  width: 15%;
}
.myportal-request {
  width: 15%;
  text-align: center;
}

/* 2列目の文字色をグレー */
.myportal-contents-grey {
  color: #707070;
}

/* すべての対応履歴はこちら...を上下中央に */
.myportal-contents-all {
  width: 35%;
  padding-top: 6px;
}

/* モバイル表示は保有設備一覧行内の要素を垂直方向に並べ替え*/

.myportal-contents-mobile {
  flex-direction: column;
  padding: 10px 20px 10px 20px;
}

/* モバイル表示はヘッダの項目名無し、項目名: コンテンツ の形式で表示 */
.myportal-contents-mobile-raw {
  display: flex;
}

/* モバイル表示の項目名部分 */
.myportal-caption-mobile-grey {
  width: 30%;
  color: #707070;
}

/* モバイル表示のサポート申し込みボタンは全体の中央に */
.myportal-contents-mobile-request {
  text-align: center;
  padding: 12px 0 6px 0;
}

/* タブレット表示のサポート申し込みボタンはパディングを調整して縦書きのようにならないように、、、
デフォルトの左右パディングが40pxなので */
.myportal-contents-tablet button.my-buttons {
  padding: 6px;
  width: 100%;
}

/* サポート申し込みボタン */
button.my-buttons {
  padding: 6px 40px 6px 40px;
  border-radius: 4px;
}



/*--------------------------------------------------------------
サービス対応履歴 (support)
--------------------------------------------------------------*/

/* ブレイクポイントは、、、
テーマのブレイクポイントと、コンテンツの見切れ、重なり等を考慮して、
・モバイル : 640px以下 
・タブレット : 641px以上1024px以下
・PC : 1025px以上
*/

/* モバイル : 640px以下 */
@media screen and (max-width:640px){
  /* .mysupport-caption-mobile {display: none;} */
  .mysupport-caption-tablet {display: none;} 
  .mysupport-caption-pc {display: none;} 
  /* .mysupport-contents-mobile {display: none;} */
  .mysupport-contents-tablet {display: none;} 
  .mysupport-contents-pc {display: none;} 
}
/* タブレット : 641px以上1024px以下 */
@media screen and (min-width:641px) and (max-width:1024px){
  .mysupport-caption-mobile {display: none;} 
  /* .mysupport-caption-tablet {display: none;} */
  .mysupport-caption-pc {display: none;} 
  .mysupport-contents-mobile {display: none;} 
  /* .mysupport-contents-tablet {display: none;} */
  .mysupport-contents-pc {display: none;} 
}
/* PC : 1025px以上 */
@media screen and (min-width:1025px){
  .mysupport-caption-mobile {display: none;} 
  .mysupport-caption-tablet {display: none;} 
  /* .mysupport-caption-pc {display: none;} */
  .mysupport-contents-mobile {display: none;} 
  .mysupport-contents-tablet {display: none;} 
  /* .mysupport-contents-pc {display: none;} */
}

/* 列幅 */
.mysupport-contents-100 {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.mysupport-contents-30 {
  width: 30%;
  padding: 0 6px 0 0;
}
.mysupport-contents-40 {
  width: 40%;
  padding: 0 6px 0 0;
}

/* 文字色をグレー */
.mysupport-contents-grey {
  color: #707070;
}



/*--------------------------------------------------------------
請求履歴 (bill)
--------------------------------------------------------------*/

/* ブレイクポイントは、、、
・モバイル : 991px以下 
・タブレット : 992px以上1024px以下
・PC : 1025px以上
*/

/* モバイル : 640px以下 */
@media screen and (max-width:991px){
  /* .mybill-caption-mobile {display: none;} */
  .mybill-caption-tablet {display: none;} 
  .mybill-caption-pc {display: none;} 
  /* .mybill-contents-mobile {display: none;} */
  .mybill-contents-tablet {display: none;} 
  .mybill-contents-pc {display: none;} 
}
/* タブレット : 641px以上1024px以下 */
@media screen and (min-width:992px) and (max-width:1024px){
  .mybill-caption-mobile {display: none;} 
  /* .mybill-caption-tablet {display: none;} */
  .mybill-caption-pc {display: none;} 
  .mybill-contents-mobile {display: none;} 
  /* .mybill-contents-tablet {display: none;} */
  .mybill-contents-pc {display: none;} 
}
/* PC : 1025px以上 */
@media screen and (min-width:1025px){
  .mybill-caption-mobile {display: none;} 
  .mybill-caption-tablet {display: none;} 
  /* .mybill-caption-pc {display: none;} */
  .mybill-contents-mobile {display: none;} 
  .mybill-contents-tablet {display: none;} 
  /* .mybill-contents-pc {display: none;} */
}

.mybill-contents-30 {
  width: 30%;
  padding: 0 6px 0 0;
}
.mybill-contents-35 {
  width: 35%;
  padding: 0 6px 0 0;
}
.mybill-contents-100 {
  width: 100%;
  padding: 0 6px 0 0;
}
.mybill-contents-w90 {
  width: 90px;
}

.mybill-contents-mobile {
  flex-direction: column;
  padding: 10px 20px 10px 20px;
}

.mybill-contents-mobile-raw {
  display: flex;
}



/*--------------------------------------------------------------
新規ユーザ登録リンクを非表示
--------------------------------------------------------------*/
span.link-text-register {
    display: none;
}



/*--------------------------------------------------------------
ログイン・プロフィールページ
--------------------------------------------------------------*/



/* 入力フォーム全体の幅を指定 */
#wpmem_login, #wpmem_reg, .wpmem_msg {
  width: 100%!important;
}

/* 項目の縦位置調整 */
#wpmem_login .div_text, #wpmem_reg .div_text {
  margin: 0 0 34px 0;
}

/* 入力欄の背景色を薄いグレーに */
#wpmem_reg input[type=text], #wpmem_reg input[type=email], #wpmem_login input[type=text], #wpmem_login input[type=password] {
  background-color: #fafafa;
}

/* プロフィール編集ページの最下部「必須項目」を非表示（＊→必須に変更したので説明文は不要） */
#wpmem_reg .req-text {
  display: none;
}

/* 必須項目の「＊」の後に「必須」を表示させるので、、、 */
#wpmem_reg .req {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 100%;
}

/* 「必須」表示 */
#wpmem_reg .req::after {
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.5em;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-left: 1em;
  vertical-align: text-bottom;
}

/* 既存ユーザのログイン... が、
プラグインのデフォルトだと文字サイズが他のページと一貫性が無く、
余白も設定されていないので調整 */
#wpmem_login legend, #wpmem_reg legend {
  font-size: 16px!important;
  margin-bottom: 48px!important;
  font-weight: bold;
  border-bottom: 0;
}

/* ボタンを少し大きく、角丸 */
#wpmem_reg input.buttons {
  width: 240px;
  border-radius: 4px;
}

/*
ログインボタン
「ログイン情報を保存...」: 左寄せ
ログインボタン:右寄せ
*/

/*混在させるので親要素をflexに*/
@media screen and (min-width:480px) {
  #wpmem_login .button_div {
    display: flex;
    position: relative;
    align-items: baseline;
  }
}

/*子:ログイン状態保存のチェックボックス
@media screen and (min-width:480px) {
  input#rememberme {
    position: absolute;
    left: 0;
  }
}*/

/*子:ログイン状態保存のラベル
@media screen and (min-width:480px) {
  #wpmem_login .button_div label {
    position: absolute;
    left: 24px;
  }
}*/

/*子:ログインボタン*/
@media screen and (min-width:480px) {
  #wpmem_login input.buttons {
    position: absolute;
    right:0;
    width: 240px;
    border-radius: 4px;
  }
}

/*パスワードリセット上の余白調整*/
#wpmem_login .link-text {
  margin-top: 40px;
}



/* ----------------------------------------
MW-WP-Formカスタマイズ (修理申込フォーム)
---------------------------------------- */

/* 項目行間調整 -------------------- */
.mwwpf-form-section, .mwwpf-form-section-50 {
  margin-bottom: 30px;
}

.mwwpf-form-section-50 {
  padding-left: 20px;
}

/* 項目グレー -------------------- */
.mwwpf-form-section span {
  color: #707070;
}

/* 入力黒 -------------------- */
input.mwwpf-input-text, select.mwwpf-input-text {
  width: 100%;
  color: #1d1d1f;
}

.mwwpf-textarea {
  width: 100%;
  line-height: normal;
  color: #1d1d1f;
}

@media screen and (min-width:480px) {
  input.mwwpf-input-zip, select.mwwpf-input-text {
    width: 30%;
    color: #1d1d1f;
  }
}

/* 入力補助を少し小さく -------------------- */
p.form-msg {
  margin-top: 4px;
  color: #707070;
  font-size: 0.9em;
}

/* 必須マーク -------------------- */
.mw_wp_form_input span.Required::after {
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.7em;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-left: 1em;
  vertical-align: text-bottom;
}

/* 確認画面では入力補助を非表示 -------------------- */
.mw_wp_form_confirm .form-msg {
  display: none;
}

/* 下部のボタンはセンタリング -------------------- */
.mwwpf-btn-section {
  text-align: center;
}

/* ボタンの形状は角丸で -------------------- */
input.mwwpf-btn {
  width: 240px;
  /*margin-left: 12px;*/
  /*margin-right: 12px;*/
  margin: 12px;
  border-radius: 4px;
}

/* マイページへ戻るボタンを他のボタンとそっくりに */
#mypage-btn {
  /*margin-left: 12px;*/
  /*margin-right: 12px;*/
  margin: 12px;
  width: 240px;
  height: 50px;
  vertical-align: top;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  background-color: #d65050;
  border: 1px solid #d65050;
  position: relative;
  display: inline-block;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
}

#mypage-btn:hover {
  background: transparent;
  color: #d65050;
}

/* マイページへ戻るボタンは確認画面で非表示 */
.mw_wp_form_confirm #mypage-btn {
  display: none;
}

/* 入力エラーは背景色ピンク → 入力すると解除 */
.error-pink > input.mwwpf-input-text:placeholder-shown {
  background-color: pink;
}

.error-pink > textarea.mwwpf-textarea:placeholder-shown {
  background-color: pink;
}

input.mwwpf-btn {
    border-radius: 4px !important;
}


nav.navigation.post-navigation {
  display: none;
}

/* イベント詳細ページ, ルーム詳細ページ -------------------------------------------------------------------------------- */
.entry-header {
  display: none;
}

/*
.entry-meta {
  display: none!important;
}
*/

.event-section, .room-section {
  padding : 12px 0;
}

.event-section-title, .room-section-title {
  color: #000000;
  font-size: 18px;
  font-weight:bold;
  border-bottom: 3px solid #0137ad;
  padding: 0 0 10px 0;
  margin: 30px 0 20px 0;
}

.event-detail-form, .room-detail-form {
  margin-top: 24px;
}

.event-entry-section, .room-entry-section {
  margin-top: 100px;
  text-align:center;
}

.event-entry-section .my-buttons, .room-entry-section .my-buttons {
  padding: 12px 0;
  width: 240px;
  margin: 12px;
  font-size: 16px;
}

.entry-footer {
  display: none;
}
/* イベント詳細ページ, ルーム詳細ページ ここまで ----------------------------------------------------------------------- */




@media ( min-width: 1199px) {
	.stretch-right .elementor-image {
	   margin-right: calc( ( 100vw - 1140px)/-2);
  }
	.stretch-left .elementor-image {
	   margin-left: calc( ( 100vw - 1140px)/-2);
  }	
}
.syd-contact  div.wpforms-container-full .wpforms-form button[type=submit] {
	width: 100%;
	display: block;
    color: #00102E;
    background: #FFD00A;	
	  border: 0;
}
.grecaptcha-badge {visibility: hidden;}
.s-contact-form p,
.s-contact-form .row {
	margin-bottom: 40px;
}


.user-card-pc,
.user-card-tablet {
  display: flex;
  margin-bottom: 80px;
}

.user-card-mobile {
  display: flex;
}

.user-card {
  margin-bottom: 80px;
}

.user-card-pc, .user-card-tablet, .user-card {
  background-color: aliceblue;
  border-radius: 12px;
  padding: 24px;
}

.user-card-pc-picture, .user-card-pc-info,
.user-card-tablet-picture, .user-card-tablet-info,
.user-card-mobile-picture, .user-card-mobile-info {
  width: 50%;
}

/* pc表示 : width 1025px以上 */
.user-card-pc-picture, .user-card-tablet-picture {
  text-align: center;
}
.user-card-pc-company {
  font-size: 32px;
  font-weight: 600;
}
.user-card-pc-name {
  font-size: 24px;
}
.user-card-pc-qrcode {
  margin-top: 60px;
}

/* タブレット表示 : width 768px以上 1024px以下 */
.user-card-tablet-company {
  font-size: 24px;
  font-weight: 600;
}
.user-card-tablet-name {
  font-size: 20px;
}
.user-card-tablet-qrcode {
  width: 160px;
  margin-top: 40px;
}

/* モバイル表示 : width 766px以下 */
.user-card-mobile-company {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.user-card-mobile-name {
  font-size: 20px;
  text-align: center;
}
.user-card-mbile-qrcode {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
}

@media screen and (max-width:767px){
  /* .user-card-mobile {display: none;} */
  .user-card-tablet {display: none;} 
  .user-card-pc {display: none;} 
}
@media screen and (min-width:768px) and (max-width:1024px){
  .user-card {display: none;} 
  /*.user-card-mobile, 
  .user-card-mobile-company, 
  .user-card-mobile-name {display: none;} */
  /* .user-card-tablet {display: none;} */
  .user-card-pc {display: none;} 
}
@media screen and (min-width:1025px){
  .user-card {display: none;} 
  /*.user-card-mobile, 
  .user-card-mobile-company, 
  .user-card-mobile-name {display: none;} */
  .user-card-tablet {display: none;} 
  /* .user-card-pc {display: none;} */
}


.vp-filter__item:nth-child(2) a {
  display: none;
}


/*
#calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.calendar-header {
  grid-column: span 7;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.day-header, .date, .empty {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.empty {
  background-color: #f9f9f9;
}

#prev-month, #next-month {
  margin: 10px;
}
*/


/* 予約カレンダー関連 -------------------------------------------------------------------------------- */

.room-calendar-header {
  display: flex;
  justify-content: left;
  align-items: center;
}

.room-calendar-header-left, .room-calendar-header-center {
  flex: 50%;
}

.room-calendar-header-center {
  text-align: center;
}

.room-calendar-header-left span {
  font-weight: bold;
}

.room-calendar-center {
  display: flex;
  align-items: center;
}

.room-calendar-currentmonth {
  font-size: xx-large;
  font-weight: bold;
}

.room-calendar-section, .room-time-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 36px 0 24px 0;
}

.room-calendar-section .left-align {
  position: absolute;
  left: 0;
}

.room-time-section {
  font-size: xx-large;
  font-weight: bold;
}

.room-calendar-prevmonth, .room-calendar-currentmonth, .room-calendar-nextmonth {
  display: inline-block;
  margin: 0 20px; /* オプションで間隔を設定 */
}

.room-calendar-container, .room-time-container {
  margin: 0 auto; /* 中央揃え */
  /*max-width: 600px;  最大幅を設定 */
  /*border: 1px solid #ccc;  枠線を付ける例 */
  /*padding: 10px;  内側の余白 */
}

.room-calendar-table, .room-time-table {
  width: 100%; /* テーブル全体を100%幅に設定 */
  table-layout: fixed; /* 幅を均等に分割する */
  border-collapse: collapse; /* セルの境界線をつなげる */
}

.room-calendar-table thead, .room-time-table thead {
  background-color: #EEEDED;
}

.room-calendar-table th, .room-calendar-table td {
  width: calc(100% / 7); /* 7つの列を均等に分割 */
  border: 1px solid #ccc; /* セルの境界線を設定 */
}

.room-time-table th, .room-time-table td {
  border: 1px solid #ccc; /* セルの境界線を設定 */
}

.room-calendar-table th {
  text-align: center; /* テキストを中央揃え */
}

.room-calendar-table td {
  height: 90px;
  vertical-align: top;
  text-align: left;
  padding: 8px; /* セルの内側の余白 */
}

.room-time-table td {
  padding: 16px; /* セルの内側の余白 */
}

.room-calendar-content {
  text-align: center; /* テキストを中央揃え */
  color: red;
}

.othermonth {
  color: #cccccc;
}

.holiday, .weekstart {
  color: red;
}

.room-calendar-content a, .weekend, .room-time-cell a {
  color: blue;
}

.room-calendar-note {
  padding: 12px;
  text-align: right;
  color: gray;
}

.cl-time, .time_cell_cls, .cl-day, .cell_col_cls {
  height: auto;
}

.mwwpf-btn-section-sub {
  text-align: center;
}

.mwwpf-btn-section-sub .my-buttons {
  width: 240px;
  height: 50px;
  margin-top: 0;
}

#my_error_message {
  display: none;
  color: red;
  margin-top: 4px;
  font-size: 0.9em;
}

.mwwpf-readonly, .mwwpf-readonly-time {
  background-color: #f2f2f2;
}

.mwwpf-form-container {
  display: flex;
  justify-content: left;
}

.mwwpf-form-container .mwwpf-form-section, .mwwpf-form-section-50 {
  flex: 50%;
}

.mwwpf-readonly {
  width: 50% !important;
}

.mwwpf-form-container .mwwpf-form-section select {
  width: 100%;
}


/* プロフィール画面 -------------------------------------------------------------------------------- */

/*
.two-factor-wrap {
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 30px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-family: sans-serif;
}
*/

.two-factor-wrap h4 {
    font-size: 20px;
    /*margin-bottom: 50px;*/
    /*border-bottom: 1px solid #ccc;*/
    /*padding-bottom: 10px;*/
    display: flex;
    align-items: center;
    gap: 14px; /* タイトルとアイコンの間隔 */

}

.tooltip-icon {
  cursor: help;
  position: relative;
  font-size: 14px;
  color: #666;
  user-select: none;
  display: none;
}

.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 110%; /* アイコンの右側 */
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal; /* 折り返す */
  word-break: break-word; /* 単語も途中で折る */
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  width: max-content;
  min-width: 200px; /* 最低限これだけの幅を確保 */
  max-width: 400px;
}

.tooltip-icon:hover::after,
.tooltip-icon:focus::after {
  opacity: 1;
  pointer-events: auto;
}

.two-factor-wrap form {
    margin-top: 20px;
}

.two-factor-wrap label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 16px;
}

.two-factor-wrap input[type="checkbox"] {
    transform: scale(1.2);
}

.two-factor-wrap .description {
    color: #555;
    font-size: 14px;
    margin: 10px 0 0 20px;
    line-height: 1.6;
}

.two-factor-wrap input[type="submit"], .button-primary {
    /*padding: 10px 25px;*/
    font-size: 16px;
    /*background-color: #0073aa;*/
    /*border: none;*/
    /*color: #fff;*/
    /*border-radius: 4px;*/
    /*cursor: pointer;*/
    width: 240px;
    border-radius: 4px !important;
}

/*
.two-factor-wrap input[type="submit"]:hover {
    background-color: #005177;
}


.two-factor-wrap img {
    display: block;
    margin: 20px auto;
    width: 200px;
    height: 200px;
}
*/

.two-factor-notice {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 14px;
}

.two-factor-success {
    background-color: #e7f9ed;
    border-left: 4px solid #28a745;
    color: #155724;
}

.two-factor-error {
    background-color: #fff3f3;
    border-left: 4px solid #dc3545;
    color: #721c24;
}

.two-factor-intro {
    /*background-color: #f9f9f9;
    padding: 10px 15px;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    margin-bottom: 40px;
    font-size: 14px;
    color: #333;*/
    background-color: #f5f7fa;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    padding: 16px 20px;
    /*margin-bottom: 30px;*/
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.two-factor-option {
    margin-bottom: 50px;
}

.two-factor-option label {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.two-factor-status {
    margin: 30px 0 60px 0;
    /*font-size: 90%;*/
    color: #555;
}

.two-factor-totp {
    margin: 40px 0 20px 0;
    /*border: 1px solid #ccc;*/ 
    border-left: 4px solid #0073aa; /* WordPressブルーアクセント */
    border-radius: 6px;
    background-color: #f9fbfd;
    padding: 20px;
    /*display: flex;*/
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.two-factor-warning {
    flex: 1 1 300px;
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}

.two-factor-warning:first-of-type {
    font-weight: 600;
    color: #0073aa;
    margin-bottom: 10px;
}

.two-factor-wrap img,
.two-factor-totp img {
    width: 200px;
    height: 200px;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.highlight-key {
    background-color: #fce4e4;
    color: #b71c1c;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

.status-enabled {
    color: #2e7d32; /* グリーン系（安全） */
    font-weight: bold;
}

.status-disabled {
    color: #c62828; /* レッド系（警告） */
    font-weight: bold;
}

.two-factor-message-wrap {
    margin-bottom: 40px;
}

.two-factor-red {
    font-size: .9em;
    color: red;
}

/* 初期は非表示
.two-factor-wrap {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.two-factor-wrap.visible {
  visibility: visible;
  opacity: 1;
} 
*/

.custom-tabs .tab-button {
    background: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: normal;
    color: #333;
}

.custom-tabs .tab-button.active {
    font-weight: bold;
    border-bottom: 2px solid #0073aa;
    color: #0073aa;
}

.custom-tabs .tab-content {
    padding: 30px 0;
    /*border: 1px solid #ccc;*/
    /*border-top: none;*/
    border-top: 1px solid #ccc;
}

/*.custom-tabs [hidden] {
    display: none !important;
}*/



/*  */
.page-id-786 .elementor-widget-shortcode .elementor-shortcode ul:not(.custom_profile_links) {
    display: none;
}