@charset "UTF-8";

/* デフォルト設定 */
:root {
  --col-black: #000000;
  --col-white: #ffffff;
  --col-light-green: #ccffcc;
  --col-light-dark-green: #333;
  --col-light-dark-green-hover: #008000;
  --col-little-white: #00000011;
  
  --col-black-dk: var(--col-white);
  --col-white-dk: var(--col-black);
  --col-light-green-dk: #4a154a;
  --col-light-dark-green-dk: #e178f0;
  --col-light-dark-green-hover-dk: #d968e9;
  --col-little-white-dk: #1E1E1E;
  
  --col-pos-black: var(--col-black);
  --col-pos-white: var(--col-white);
  --col-pos-link-text: var(--col-light-dark-green);
  --col-pos-link-text-hover: var(--col-light-dark-green-hover);
  --col-pos-select-bg: var(--col-little-white);
  
  /* 背景の色(デフォルト) */
  --col-bg-color: var(--col-white);   /* 白背景 */
  /* 文字の色(デフォルト) */
  --col-text-color: var(--col-black); /* 黒文字 */
  --col-fixed-bg-light-green: var(--col-light-green);
  
}

body.initialBodyCss {
	display: none;
}

body.darkmode--activated {
  --col-pos-black: var(--col-black-dk);
  --col-pos-white: var(--col-white-dk);
  --col-pos-link-text: var(--col-light-dark-green-dk);
  --col-pos-link-text-hover: var(--col-light-dark-green-hover-dk);
  --col-pos-select-bg: var(--col-little-white-dk);
	
  --col-fixed-bg-light-green: var(--col-light-green-dk);
}

body {
  background-color: var(--col-bg-color);
  color: var(--col-text-color);
}

input {
	background-color: var(--col-white);
	color: var(--col-black);
}

option {
	background-color: var(--col-pos-select-bg);
	color: var(--col-pos-black);
}

.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}
.fgr-table {
 margin:30px auto;
 width:auto;
min-width:80%;
}

.fgr-table tbody {
 border-top:solid 1px #ccc;
 border-left:solid 1px #ccc;
}

.fgr-table tbody th,
.fgr-table tbody td {
 border-bottom:solid 1px #ccc;
 border-right:solid 1px #ccc;
 padding:8px 12px 6px;
 font-size:14px;
}

.fgr-table tbody tbody th {
 min-width:150px; 
}

.fgr-table tbody .topick-fgr thead {
font-size:14px;
}

.fgr-table tbody tfoot th,
.fgr-table tbody tfoot td {
 font-size:12px;
 padding:8px 0 0;
}

.pekebtn{
    position: relative;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: var(--col-pos-black);
    padding: 0;
    background: var(--col-pos-white);
    border-top: solid 3px dimgray;
    border-bottom: solid 3px dimgray;
    transition: .4s;
    font-size: x-large;
    line-height: 0.8em;
}

    .pekebtn:hover {
        text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
    }

#TotalField {
    position:fixed;
    top:10dvh;
    right:0px;
    width:140px;
    height:112px;
    color:var(--col-pos-black);
    background-color:var(--col-fixed-bg-light-green);
}
    #TotalField input {
        color: var(--col-pos-black);
        background-color: var(--col-pos-white);
    }

    #TotalField .inputAreaSum {
        font-size: 40px;
        padding: 0;
        margin: 0;
        width: 100%;
        line-height: 1em;
    }

@media(max-width:835px){
	#TotalField {
		width:87px;
        height: 85px;
	}

        #TotalField .inputAreaSum {
            font-size: 25px;
        }
}

.skill-np-menu-div {
    position: fixed;
    top: calc(115px + 10dvh);
    right: 0px;
    cursor: pointer;
}

@media(max-width: 835px) {
    .skill-np-menu-div {
        top: calc(85px + 10dvh + 4px);
    }
}

#ShortCut {
    position: fixed;
    top: calc(115px + 10dvh + 30px);
    right: 0px;
    width: 140px;
    height: calc(100dvh - 20dvh - 115px - 101px - 12px - 30px);
    color: var(--col-pos-black);
    background-color: var(--col-fixed-bg-light-green);
    max-height: 95dvh;
    overflow-y: auto;
}

@media(max-width: 835px) {
    #ShortCut {
        width: 87px;
        top: calc(85px + 10dvh + 4px + 30px);
        height: calc(100dvh - 20dvh - 85px - 101px - 32px - 10dvh - 30px);
    }
}

#ShortCut h3 {
    border-color: var(--col-pos-black) !important;
}

#ShortCut a {
    color: var(--col-pos-link-text) !important;
}

    #ShortCut a:hover {
        color: var(--col-pos-link-text-hover) !important;
    }

.toggle_switch_label {
  display: flex;
  align-items: center;
}

.toggle_switch_circle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--col-pos-white);
  transition: 0.5s;
}

.toggle_switch_base {
  width: 56px;
  border-radius: 15px;
  height: 32px;
  background-color: #ddd;
}

input:checked ~ .toggle_switch_base {
  background-color: rgb(219, 234, 254);
  transition: 0.5s;
}

input:checked ~ .toggle_switch_circle {
  background-color: blue;
}

.toggle_switch {
  position: relative;
  width: 56px;
  border-radius: 16px;
  height: 32px;
  background-color: #ddd;
}

.switch_label {
  display: flex;
  align-items: center;
}

.toggle_switch_input_checkbox {
  position: absolute;
  width: 0;
  height: 0;
}

.toggle_switch_title {
  margin-left: 4px;
}


    .modal_overlay {
        z-index: 100;
        background: rgba(0,0,0,.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100dvw;
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.darkmode--activated .modal_overlay {
    background: rgba(255,255,255,.5);
}

    /* モーダルウィンドウの中身 */
    .modal_area {
        z-index: 200;
        background-color: var(--col-pos-white);
        color: var(--col-pos-black) !important;
        width: 95dvw;
        height: 95dvh;
        max-width: 880px;
        max-height: 660px;
        border-radius: 8px;
        display: grid;
        grid-template-rows: 64px auto 64px;
        grid-template-areas:
            "area-header"
            "area-contents"
            "area-footer"
            ;
        input {
			background-color: var(--col-pos-white);
			color: var(--col-pos-black);
		}
        
    }

    .modal_header{
        grid-area: area-header;
        margin: 24px;
    }

    .modal_contents{
        grid-area: area-contents;
        margin: 0px 24px 24px 24px;
        overflow-y: auto;
    }

    .modal_footer{
        grid-area: area-footer;
        margin: 0px 24px 24px 24px;
    }

    .modal_title{
        font-size: large;
    }

    [v-cloak] {
        display: none;
    }
    
    .equal-width-table {
    	table-layout: fixed;
    }

.label-with-checkbox {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.fa-question-circle {
	margin-left: 1.5em;
}

.cl-element-fire {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #ff999980;
}

.cl-element-water {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #8dc7ff80;
}

.cl-element-wind {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #99ff9980;
}

.cl-element-earth {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #ffdd9980;
}

.cl-element-light {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #ffff9980;
}

.cl-element-dark {
	width: 100%;
	text-align: center;
	padding: 2px;
	display: block;
	background-color: #c299ff80;
}

.table-horizontal-padding-zero td, .table-horizontal-padding-zero th {
	padding-left: .0rem !important;
	padding-right: .0rem !important;
}