@charset "utf-8";

/* common */

/* min(95%, 1080px)基本95％　最大1080ｐｘ */
/* calc(100vh - 70px)計算式 */
/* clamp(26px, Yvw , Xpx)　文字可変 （X÷最大幅)×100＝Y */
/* cssの比例関数 */

html {
    font-size: 16px;
}

body{
    min-height: 100vh;
}

table {
    font-size: inherit !important; /* テーブル内の要素は親のフォントサイズを継承 */
}

/* bootstrapのスタイルを打ち消し */
p{
    margin-bottom: 0;
}

/* bootstrapの入力系要素のshadowのサイズを小さくする */
.form-control:focus, .form-select:focus, .form-control:focus{
    box-shadow: 0 0 0 0.05rem rgba(13, 110, 253, 0.25);
}

/* 必須フィールドのデフォルト背景色設定 */
input:required,
textarea:required,
select:required {
    background-color: #ffffcc80;
}

/* 必須フィールドのフォーカス時も背景色を同じに保持 */
input:required:focus,
textarea:required:focus,
select:required:focus {
    background-color: #ffffcc80;
}

/* 読み取り専用のinput要素とtextarea要素のスタイル */
input[readonly], textarea[readonly] {
    color: var(--color-text);
    background-color: #a2a2a220; 
    border: none;
}

/* 読み取り専用のフォーカス時のinput要素とtextarea要素のスタイル */
input[readonly]:focus, textarea[readonly]:focus {
    outline: none;
    box-shadow: none; 
    background-color: #a2a2a220; 
    color: var(--color-text);
    border: none;
}


@media print {

    html {
        font-size: 16px !important;
    }

    /* bootstrap5 */
    /* .d-print-block print時に表示 */
    /* .d-print-none print時に非表示 */

    /* 印刷時に改ページを防ぐ */
    .print-no-break {
        page-break-inside: avoid;
        /* このプロパティは、指定された要素が
        含まれるブロック内での改ページを避けるようにブラウザに指示します。
        例えば、あるセクションや表、リストが半分に分かれてしまうのを防ぎたい場合に便利です。 */
    }

    /* セクションごとに改ページを挿入 */
    .print-page-break {
        page-break-before: always;
        /* このプロパティは、指定された要素の前に常に改ページを挿入するよう
        にブラウザに指示します。これは、新しいセクションが新しいページから始まるようにしたい場合に使用します。 */
    }

    @page {
        size: A4;
    }
}


/* アイコン用の画像を丸くするスタイル */
.icon-circle {
    width: 2.5em; /* 画像の幅 */
    height: 2.5em; /* 画像の高さ */
    border-radius: 50%; /* 丸くする */
    object-fit: cover; /* 画像の比率を保持しながら表示 */
    border: 1px solid #ddd; /* 任意で枠線を追加 */
}

/* 画像Cropper用 */
#icon-crop-container {
    width: 100%;
    height: 400px;
    display: none;
    justify-content:center;
    align-items: center;
    overflow: hidden;
}
/* 画像Cropper用 */
#icon-crop-container img {
    width: 100%;         /* 幅をコンテナの100%に設定 */
    max-height: 400px;   /* 最大高さを500pxに制限 */
    object-fit: contain; /* コンテナに合わせて内容を調整 */
    display: block;      /* displayをblockに設定 */
    margin: auto;        /* 画像を中央に配置 */
}