:root {
    --vh: 100vh;
    --spacing: 8px;
    --spacing-0-5: calc(var(--spacing)/2);
    --spacing-1: var(--spacing);
    --spacing-1-5: calc(var(--spacing)*1.5);
    --spacing-2: calc(var(--spacing)*2);
    --spacing-3: calc(var(--spacing)*3);
    --spacing-4: calc(var(--spacing)*4);
    --spacing-5: calc(var(--spacing)*5);
    --spacing-6: calc(var(--spacing)*6);
    --spacing-6-5: calc(var(--spacing)*6.5);
   
    --gray-lightest: #f1f2f3;
    --gray-light: #dee2e6;
    --gray-mid: #c2c8d0;
    --gray-dark: #6f7780;
    --gray-darkest: #2d333a;
    --gray-mid-dark: #686868;
    --gray-social-border: #8e8e8e;

    --border-radius-outer: 5px;
    --z-index-base: 1;
    --font-default-weight: 400;
    --font-default-size: 16px;
    --font-light-color: var(--gray-dark);

    --fabway-background-color: #daebf5;
    --fabway-base-color: #bac7ce;
    --fabway-main-color: #0b1b38;
    --fabway-accent-color: #bd3147;

    --fabway-blue: #344c74;
    --fabway-lightblue: #b1d4ff;
    /* hover用に元の色を少し明るくした色 */
    --fabway-blue-lighter: #4a6a9c; 
    
    /* disabled用に彩度と明度を落とした色 */
    --fabway-blue-disabled: #8d9bb4; 
    
    /* 非アクティブ(ボタンB)のhover用の非常に薄い青 */
    --fabway-blue-pale: #f0f3f7; 

    /* --- グレー系の色 --- */
    --text-color-disabled: #b0b0b0;
    --border-color-disabled: #dcdcdc;

    --primary-color: var(--fabway-blue);
    --background-default-color: #fffff;
    --background-wrapper-color: rgb(238, 238, 238);
}
:root {
    --base-line-height: 1.1;
    --base-form-element-height: var(--spacing-6-5);

    --lg-line-height: 1.5;
    --lg-font-size: 16px;

    --input-height: var(--base-form-element-height);
    --out-input-label-top: calc(var(--input-height)/2);

    --input-border-width: 1px;
    --input-background-color: #ffffff;
    --input-border-color: #c9cace;
    --input-label-top: var(--out-input-label-top);
    --input-label-transform: translateY(-50%);
    --input-text-color: #000000;
    --input-padding: 0 var(--spacing-2);
    --input-border-radius: var(--spacing-0-5);
    --border-default-color: #c9cace;
}

.hide { display: none; }
.alert { color:red;}
.red { color: red;}
.spacer30 { display:block; width:30px; height:30px; }
.scroll-y { overflow-x: hidden; overflow-y: scroll; }
.flex-grow-1 { flex-grow: 1;}
.flex-row-center { display: flex; flex-direction: row; flex-wrap:nowrap; align-items: center;}
.flex-row-stretch{ display: flex; flex-direction: row; flex-wrap:nowrap; align-items: stretch;}
.flex-column-stretch { display: flex; flex-direction: column; align-items: stretch; }
.flex-column-center  { display: flex; flex-direction: column; align-items: center;  }
.flex-row-center > *,
.flex-column-stretch > * { display: flex; }
.maru {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    border-radius: 50%;
    background-color: black;
    /* border: 1px solid black; */
    text-align: center;
    font-weight: normal;
    color: white;
}
/* 背景のスタイル */
.overlay {
    /* display: none; */ /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999; /* モーダルより下に表示 */
}


li { list-style-type: none; }

#tltp-user-info {
    position:absolute;
    top: 50px;
    right: 100px;
    border-radius: 5px;
    background-color: #666666;
    padding: 4px 12px;
}
#tltp-user-info li {
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.2em;
    color: white;
    list-style-type: none;
}

/*
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
*/

/* 汎用dialog */
#footer .dialog {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#footer .dialog-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    padding: 2rem;
    text-align: center;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 1;
}

#footer .dialog-closer {
    margin-top: 1rem;
    width: 100px;
    padding: 1rem 0;
    color: #fff;
    border: 1px solid #222;
    background-color: #222;
    border-radius: 1.5rem;
    transition: color 0.3s, background-color 0.3s;
    letter-spacing: 0.1em;
}
#footer .dialog-closer:hover {
    color: #222;
    background-color: transparent;
    cursor: pointer;
}

#auth-header .user-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	/* backdrop-filter: blur(3px); */
	/* background-color: rgba(0, 0, 0, 0.2); */
	z-index: 1;
}

#auth-header .user-menu-frame {
	position: fixed;
	top: 60px;
	right: 16px;
	background-color: #efefef;
    width: 160px;
    border: none;
}

#header .title-block {
    display: inline-block;
    vertical-align: middle;
    margin-left: 72px;
}
#header .title-block .title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--fabway-main-color);
}

body {
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    font-size: var(--font-default-size);
    letter-spacing: 0.09em;
    font-feature-settings: "palt";
}
/* modal-alert */
#modal-alert {
    position: fixed;
	width: 400px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	background-color:#fff;
    box-shadow: 0 0 10px;
    padding:10px 20px;
	border:2px solid #aaa;
	z-index:6002;
}
/* modal-confirm */
.modal-box {
    position: fixed;
	width: 400px;
    /* height: 100px; */
    max-height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	background-color:#fff;
    /* box-shadow: 0 0 10px; */
    padding:var(--spacing-1) var(--spacing-2);
	/* border:2px solid #aaa; */
	z-index:6002;
}
.modal-box p { margin: var(--spacing-2) 0;}
.modal-box .subject { font-weight: bold; }
.modal-box .table ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.modal-box .table ul li { list-style-type: none;}
.modal-box button { padding: 0 var(--spacing-1); border-radius: var(--border-radius-outer); outline:none; border: solid 1px #999;}
.modal-box button:not(:last-child){ margin-right: var(--spacing-1);}

/* #modal-background */
.modal-background {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:6001;
}

#modal-overlay{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}

@media (any-hover: hover) {
    .password_toggle:hover {      opacity: 0.7;    }
}

/* カスタムチェックボックスを囲むコンテナ */
.custom-checkbox {
    display: block;
    /* 縦に並べる */
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    /* テキスト選択を無効化 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 1. デフォルトのチェックボックスを非表示にする */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 2. カスタムチェックボックスのボックス部分を作成 */
.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    /* ボックスの背景色 */
    /* border: 1px solid #ccc; */
    /* 枠線が必要な場合はこのコメントを外す */
    border-radius: 4px;
    /* 少し角を丸くする */
}

/* 3. チェックが入ったときの背景色を変更 */
.custom-checkbox input:checked~.checkmark {
    background-color: #2196F3;
    /* チェック時の色 */
}

/* 4. チェックマークを作成 (最初は非表示) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* 5. チェックが入ったときにチェックマークを表示 */
.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

/* 6. チェックマークのスタイルを定義 */
.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* フォーカス時のスタイル（任意） */
.custom-checkbox input:focus~.checkmark {
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

/* modal */
/* 1. モーダルの背景（オーバーレイ） */
.modal-overlay {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    /* ★ここが重要：Flexboxで子要素（モーダル本体）を中央寄せ */
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center; /* 垂直中央 */
    
    /* 初期状態は非表示にする場合 */
    display: none;
}

.modal-content {

    /*
    padding: 20px 50px;
    border-radius: 8px;
    width: 50%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    background-color: white;
    border-radius: 8px;     
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    z-index: 2;
}



.flex-row-stretch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.flex-column-stretch {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.hide {
    display: none!important;
}
.btn-action {
    display: flex;
    justify-content: center;
    padding: 8px 8px 8px 4px;
    color: var(--fabway-main-color);
    border: none;
    outline: none;
    font-size: 0.9em;
}
.btn-action:disabled {
    background-color:#999;
}
.btn-action:hover {
    background-color: #426094;
}
.btn-action:disabled:hover {
    background-color:#999;
}
#action-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
}
#action-bar span {
    margin-right: 4px;
}
#action-bar label {
    font-weight: normal;
    font-size: 0.9em;
}

#txt-simple-keyboard {
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

#footer {
    background-color: var(--fabway-blue);
    color: white;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
/* header */
#header {
    height: 32px;
    border-bottom: solid 1px var(--fabway-main-color);
    background-color: var(--fabway-base-color);

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
/* デフォルトでは非表示 */
#header > .navi {
    display: none;
}
/* 基本的な設定はここで行う */
#header > .navi > a {
    color: rgb(51, 51, 51);
    font-size: 0.9em;
    margin-right: 32px;

}
#header .title-block h1.title {
    margin: 4px 0;
    font-size: 1em;
    font-weight: bold;
    color: var(--fabway-main-color);
}
#logo {
    position: fixed;
    top: 8px;
    left: 24px;
    height: 16px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    z-index: 90;
    background-image:url('/images/logo/fabway.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#auth-header {
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: end;
}

#userinfo-block {
    position: fixed;
    top: 4px;
    right: 72px;
    width: 44px;
    cursor: pointer;
}
#user-info {
    font-size: 24px;
}
/* menu */
.btn-menu {
    position: fixed;
    top: 4px;
    right: 16px;
    display: block; /* display:flexは不要 */
    height: 24px;
    width: 24px;
    z-index: 90;
    cursor: pointer; /* クリックできることを示すカーソルに変更 */
}
.btn-menu span,
.btn-menu span:before,
.btn-menu span:after {
    content: '';
    display: block;
    height: 3px;
    width: 24px;
    border-radius: 3px;
    background-color: var(--fabway-main-color);
    position: absolute;
    left: 0;
    /* transitionを追加してアニメーションを滑らかに */
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

/* 中央の線：上下中央に配置 */
.btn-menu span {
    top: 50%;
    transform: translateY(-50%);
}

/* 上の線：中央の線からの相対位置で指定 */
.btn-menu span:before {
    bottom: 8px; /* 中央の線からの距離 */
}

/* 下の線：中央の線からの相対位置で指定 */
.btn-menu span:after {
    top: 8px; /* 中央の線からの距離 */
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: #cccccc;
    transition: all 0.5s;
}
.menu-content ul {
    padding: 70px 10px 0;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
#btn-menu-toggle {
    display: none;
}
#btn-menu-toggle:checked ~ .menu-content {
    left: 0;
}
#btn-menu-toggle:checked ~ .btn-menu span {
    background-color: transparent; /* 真ん中の線を透明にする */
}
#btn-menu-toggle:checked ~ .btn-menu span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#btn-menu-toggle:checked ~ .btn-menu span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* prompt-box */
.prompt-box {
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    width: auto;
    padding: 32px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}
.prompt-box h1 {
    margin: var(--spacing-2) var(--spacing-2);
    font-size: var(--title-font-size);
    font-weight: bold;
    color: var(--title-font-color);
}
.prompt-box-inner {
    position: relative;
    font-size: 14px;
    font-size: var(--default-font-size);
    color: #2d333a;
    color: var(--font-default-color);
    background-color: #fff;
    border-radius: 5px;
    border-radius: var(--border-radius-outer);
    border: 0 solid #dddddd;
}
.input-wrapper {
    margin-top: var(--spacing-5);
}
.input-wrapper:has(.btn-cancel){
    margin-top: var(--spacing-2);
}
.input-wrapper .text,
.input-wrapper .password {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: var(--input-border-radius);
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
    background-color: var(--input-background-color);
}
.input-wrapper .btn {
    width: 100%;
    height: 52px;
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius-outer);
}
.input-wrapper .btn-submit {  background-color: var(--fabway-blue);  }
.input-wrapper .btn-cancel {
    background-color: #999;
}
.input-wrapper .text label,
.input-wrapper .password label {
    position: absolute;
    left: 0;
    top: calc( var(--spacing-1) * -1 );
    color: var(--fabway-blue);
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0);/* 透明 */
    z-index: 10;
    padding: 0 0;
    transform: translateY(-50%);
    transition: transform .15s ease-in-out, top .15s ease-in-out, padding .15s ease-in-out;
    transform-origin: 0;
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.input-wrapper input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: var(--lg-font-size);
    height: 52px;
    height: var(--input-height);
    line-height: var(--base-line-height);
    outline: none;
    padding: var(--input-padding);
    width: 100%;
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--input-border-color);
}
.input-wrapper input:focus {
    border: solid 2px var(--fabway-blue);
}
.input-wrapper input[type="email"]:valid {
    background-color: var(--background-default-color);
}
.password_toggle {
    position: absolute;
    top: var(--spacing-0-5);
    right: 0;
    width: 52px;
    height: 52px;
    border: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/></svg>") no-repeat center center;
    background-size: 50% auto;
    cursor: pointer;
}
.password_toggle.is-visible {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
}