#form_contents{
margin:0 auto;
}

/* =========================================================
   入力要素のフォーカス（アクティブ）時のデザイン
========================================================= */
/* ブラウザデフォルトの黒い枠線を消し、青い光彩を付ける */
input:focus, 
textarea:focus, 
select:focus {
    outline: none !important; /* デフォルトの黒枠を強制リセット */
    border-color: #86b7fe !important; /* 枠線を薄い青に */
    box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.25) !important; /* 青い柔らかい光彩 */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* =========================================================
   必須機能用の設定（変更・削除しない）
========================================================= */

/* ナンバー入力のスピンボタン非表示（自作の＋－ボタンを使うため） */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    padding:0!important;

}

/* Lightningテーマのヘッダー保護（フォーム外への干渉防止） */
header .nav,
.global-nav-list {
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
}
header .nav > li,
.global-nav-list > li {
    display: inline-block !important;
    vertical-align: middle;
}
header ul.nav {
    list-style: none !important;
    padding-left: 0 !important;
}

/* =========================================================
   UIの骨格（ここから下をDevToolsでデザインしていく）
========================================================= */

/* --- アコーディオン --- */
.scf-acc-btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: block;
}
.scf-acc-content {
    display: none; /* JSで開閉するため初期は非表示 */
}

/* --- モーダルウィンドウ --- */
.scf-modal-overlay {
    display: none; /* JSで flex に変更される */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); /* 背景を暗くする */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.scf-modal-content {
    background: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

#scf-performerList{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 27px;
    padding: 20px;
}

/* --- 演奏者カード --- */
.scf-performer-card {
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 10px -3px;
}




#scf-step-password, #scf-step-form {
    background-color: white;
    padding: 2rem;
    margin: 3rem 0;
}

#scf-step-form div:nth-of-type(2){
    max-width: 500px;
    /* margin: 0 auto; */
}

#scf-step-password div p{
//    text-decoration: red wavy underline;
    background-color: lightgray;
    max-width: 245px;
    text-align: center;
    margin: 10px auto;
    padding: 5px;
}

#scf-step-password  h2, #scf-step-password p, #scf-step-form div:first-of-type h2{
   text-align:center;
}

#scf-password-input{
    max-width: 245px;
    display: block;
    height: 50px;
    margin: 0 auto;
    padding: 15px;
}

/* パスワード入力欄のみに適用（他のinputには影響しない） */
input[type="password"] {
    /* フォントサイズは他の入力欄（16pxや1remなど）と合わせる */
    font-size: 2rem!important; 
    
    /* 文字間隔を少し広げて、黒丸をはっきりと独立させる */
    letter-spacing: 0.2em; 
    
    /* パスワードの「●」が大きく、綺麗に表示されるフォント群を指定 */
    font-family: 'Verdana', 'Courier New', monospace; 
}

/* パスワード欄のプレースホルダーだけを元に戻す（重要） */
input[type="password"]::placeholder {
    letter-spacing: normal; /* プレースホルダーの文字間隔が間延びするのを防ぐ */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 日本語フォントに戻す */
    font-size:1rem;
    transform:translateY(-4px);
}

#scf-step-password div a{
    margin: 1rem 0;
    background-color: gainsboro;
    width: 75%;
    display: inline-block;
    padding: 0.5rem 2rem;;
}

.entry-body .wp-block-paragraph{
   display:block;
}

#scf-password-error{
    display: block;
    color: red;
    font-weight: 500;
}

.scf-acc-btn{
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: block;
    padding: 1rem;
    border-radius: 0;
    margin: 0;
    border: 1px solid gray;
    font-size: 1.3rem;
    font-weight: 500;
    counter-increment: chapter;
    display: flex;
justify-content: space-between; /* 文字を左、アイコンを右へ */
    align-items: center; /* 縦方向の中央揃え */
}
.scf-acc-btn::before{
    content: counter(chapter);
    display: flex;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 7px;
    border: 1px solid black;
    font-size: X-LARGE;
}

.scf-acc-btn::after{

    content: "";
    display: block;
    width: 10px;  /* アイコンのサイズ */
    height: 10px;
    border-top: 2px solid #333;   /* アイコンの線の太さと色 */
    border-right: 2px solid #333;
    
    /* 初期状態を下向き（V）にする場合 */
    transform: rotate(135deg); 
    
    /* アニメーションを滑らかにする設定 */
    transition: transform 0.3s ease;

    margin-left: auto;
}

/* ボタンに .is-open クラスが付いた時は上向き（^）にする */
.scf-acc-btn.is-open::after {
    transform: rotate(-45deg);
}


.scf-acc-content {
    padding: 1rem;
    border: 1px solid gray;
}

.duration_container {
    display: flex;
    max-width: 300px;
    gap:0!important;
}

#time_minute, #time_second{
    width: 100px;
    align-item: center;
    height: 44.38px;
    text-align: center;
}
#time_second{
border-radius:0;
}


.duration_container span{
    /* margin-right: 15px; */
    width: 44.375px;
    display: inline-flex;
    height: 44.375px;
    align-items: center;
    justify-content: center;
    background-color: #afafaf;
}




.form_label{
    font-size: large;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    background-color: #e7e7e7;
}

.form_label:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 1.5em;
    background-color: blue;
}

.required_input{
    font-size: smaller;
    font-weight: 400;
    border-radius: 0%;
    width: min-content;
    color: white;
    background-color: red;
    padding: 4px 8px;
    display: block;
    white-space: nowrap;
    font-size: small;
    height: 100%;
    margin: 0 0 0 auto;
}

#scf-modal-close-btn{
    width: 36px;
    height: 36px;
    background-color: #ffffff00;
    border: 0px;
    font-size: 3.3rem;
    font-weight: 100;
    position: relative;
    bottom: 10px;
}

.scf-modal-header{
    display: flex;
    padding: 1rem;
    justify-content: space-between;

}

.scf-modal-header h5{
font-size:1.5rem;
margin:0;
}



.scf-modal-body{
padding: 1rem;
}

#scf-registerForm, #musicDataForm, #otherRegistForm{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}



.placeholder{
padding: 1rem;
color:gray;
}

/* --- fieldsetとlegendのリセット --- */
fieldset {
    border: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
}
legend {
    width: 100%;
    /* margin-bottomなどは .form_label クラスに依存させる */
}

#noticeEmailAddress{
    width: calc(100% - 35px);
    margin: 5px 0 0 32px;
}

.scf-modal-footer{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e1e1e1;
    margin: 20px 0 0 0;
}





#gifts {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}


.gift_wrapper{
    flex-direction: row;
    width: 33.33333333%;
    flex: 0 0 auto;
    margin-top: 1rem;

}

@media screen and (max-width:575px) {
.gift_wrapper{
width: 50%;
}
}


.number_unit{
    /* gap: 0; */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 120px;
    margin: 4px 0;
}

#giftList div div button:nth-of-type(1) {
    border-radius: 45% 0 0 45%;
    width: 40px;
    height: 40px;

}

#giftList div div button:nth-of-type(2){
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0 45% 45% 0;
}

.scf-btn-number{

    border: 1px solid rgb(173, 181, 189);
}

.number_input{
width:40px!important;
height:40px!important;
border-radius:0!important;
margin: 0 -1px 0 -1px!important;
border: 1px solid rgb(173, 181, 189)!important;
text-align:center;
}





/* =========================================================
   自作ツールチップ（リッチコンテンツ対応版）
========================================================= */

/* トリガーアイコンの親要素 */
.scf-tooltip-wrapper {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    /* background-color: #0b5ed7; */
    color: #0b5ed7;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    cursor: help;
    position: relative;
    border: 1px solid #0b5ed7;
    line-height: 1;
    top: 1px;
}

/* ツールチップ本体（隠しておく） */
.scf-tooltip-content {
    /* 初期状態は非表示（透明＋クリック不可に） */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    
    /* 配置の指定（上部に表示） */
    position: absolute;
    bottom: calc(100% + 10px); /* アイコンより10px上に配置 */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    
    /* 見た目の指定 */
    width: max-content;   /* 中身に合わせて幅を広げる */
    max-width: 250px;     /* 最大幅（これを超えると自動改行） */
    padding: 12px 15px;
    background-color: #201695;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* 他の要素より手前に */
    z-index: 1000;
    
    /* アニメーション */
    transition: all 0.2s ease;
}

/* 吹き出しの尻尾（三角形） */
.scf-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%; /* 吹き出し本体のすぐ下 */
    left: 30%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #201695 transparent transparent transparent;
}

/* ツールチップ内のリストや段落のスタイル調整 */
.scf-tooltip-content ul {
    margin: 5px 0 0;
    padding-left: 20px;
}
.scf-tooltip-content li {
    margin-bottom: 3px;
}
.scf-tooltip-content p {
    margin: 0;
}

/* マウスオーバー時に表示する */
.scf-tooltip-wrapper:hover .scf-tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-30%) translateY(0);
}

#infoInstruments{
display:flex;
}

#infoInstruments div{
display:flex;
flex-direction: column;
}

#infoInstruments div:first-of-type{

width:70%;

}

#infoInstruments div:last-of-type{

width:30%;

}



#partNumber{
height:45px;
width:80px;
}

#selectedInstrument, #other-inst-name{
height:45px;
width:auto;
margin:0 10px 0 0;
}

#other-inst-name{
margin:5px 10px 0 0;
}

.formSection > div, .formSection textarea, .formSection select{
    margin: 0 10px;
    width: calc(100% - 10px);
    display: flex;
}

#familyNameSection,
#firstNameSection,
#familyNameSectionKANA,
#firstNameSectionKANA{
width:50%;
}

#comment{
height: 10rem;
}

.playerName{
gap:10px;
}


#confirmationDetails{
    background-color: white;
    padding: 24px;
}

#scf-musicInfoTable tbody tr th, #scf-otherInfoTable tbody tr th{
    background-color: lightgray;
}


/* =========================================================
   各種ボタンのデザイン
========================================================= */

/* --- メインアクションボタン（次へ、確認画面へ進む、申し込むなど） --- */
#scf-btn-auth, 
#scf-btn-confirm, 
#scf-btn-submit {
    display: block;
    margin: 2rem auto;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background-color: #0b5ed7; /* テーマカラーの青 */
    border: none;
    border-radius: 8px; /* 角丸を適度な大きさに */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 軽い影で立体感を */
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
width: 100%;       /* スマホ等で押しやすいように幅を広げる */
    max-width: 250px;  /* ただし広がりすぎないように最大幅を設定 */
}

/* メインボタンのホバー（マウスオーバー）時 */
#scf-btn-auth:hover, 
#scf-btn-confirm:hover, 
#scf-btn-submit:hover {
    background-color: #0a58ca;
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* 送信中など、ボタンが無効化（disabled）された時のデザイン */
#scf-btn-auth:disabled, 
#scf-btn-submit:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- サブアクションボタン（修正する、キャンセルなど） --- */
#scf-btn-back, 
#scf-modal-cancel-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    background-color: #e9ecef; /* 控えめなグレー */
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin:0 1rem;
}

#scf-btn-back:hover, 
#scf-modal-cancel-btn:hover {
    background-color: #dde2e6;
}

/* --- モーダル内の「登録する」ボタン --- */
#scf-player-submit {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #0b5ed7;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#scf-player-submit:hover {
    background-color: #0a58ca;
}

/* モーダル内の「削除」ボタン（危険なアクションなので赤系） */
#scf-player-delete {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #dc3545;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#scf-player-delete:hover {
    background-color: #bb2d3b;
}

/* 新規演奏者登録ボタン（枠線のみのスタイル） */
#scf-btn-open-register {
    padding: 0.7rem 1.5rem;
    border: 2px solid #0b5ed7;
    background-color: transparent;
    color: #0b5ed7;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    
}

#scf-btn-open-register:hover {
    background-color: #0b5ed7;
    color: #fff;
}

/* =========================================================
   確認画面のボタンレイアウト
========================================================= */
.confirm-action-area {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: center;    /* 中央揃え */
    margin-top: 3rem;
    gap: 1.5rem;            /* ボタン間の余白 */
}

#scf-step-complete{
    display: block;
    text-align: center;
    background-color: white;
    padding: 24px;
    margin: 3rem 0;
}


/* =========================================================
   完了画面のリンクボタン用デザイン
========================================================= */

/* aタグ特有の下線などを消す共通設定 */
.scf-btn-main,
.scf-btn-sub {
    text-decoration: none !important;
    display: inline-block;
    box-sizing: border-box;
}

/* メインボタン風（PDFリンク用） */
.scf-btn-main {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff !important;
    background-color: #0b5ed7;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    width: 100%;
    max-width: 300px; /* スマホでも押しやすい幅に */
    margin: 1.5rem auto;
}

.scf-btn-main:hover {
    background-color: #0a58ca;
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    color: #fff !important;
}

/* サブボタン風（トップへ戻る用） */
.scf-btn-sub {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #0b5ed7 !important;
    background-color: #fff;
    border: 2px solid #0b5ed7;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.scf-btn-sub:hover {
    background-color: #0b5ed7;
    color: #fff !important;
}

/* 完了画面の余白調整 */
.pdf_link_area,
.toTopLink_area {
    margin-top: 1rem;
    margin-bottom: 1rem;
}