:root {
    /* --- 色の定義 --- */
    --color-primary: #279ae7;       /* 縦・横の枠線、ラベル背景 */
    --color-area: #5faa21;          /* 面積の枠線 */
    --color-thickness: #e67d28;     /* 厚さの枠線 */
    --color-result-bg: #319254;     /* 結果の背景 */
    --color-focus: rgb(206, 70, 70); /* フォーカス時の影 */
    --color-operator: #db2222;      /* 演算子記号 */
    --color-text-light: #ffffff;    /* 明るいテキスト色 */
    --color-text-dark: #555;        /* 暗いテキスト色 */
    --color-result-area-bg: #eeeeee; /* 結果エリアの背景 */
}


/* Wordpressの自動pタグ、brタグ対策 */
.kf_container p{
	margin-bottom:-10px!important;
	padding:0px!important;
}
.kf_container .kf_result-value:nth-of-type(1){
	margin-top:-10px!important;
}
.kf_container .kf_result-value:nth-of-type(2){
	margin-top:0px!important;
}

.kf_container br {
     	display: none;
    }



/* タイトル部*/
.kf_title {
    font-size: 1.2em;
    margin: 20px 0px 10px 10px;
    color: var(--color-text-dark);
}

/* 説明文 */
.kf_info {
    font-size: 1em;
    margin: 0px 0px 20px 0px;
    color: var(--color-text-dark);
    line-height: 2em;
}
.kf_info strong{
    font-weight: 600;
}

.kf_info_wh{
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 2px 5px;
    border-radius: 4px;
}

.kf_info_area{
    background-color: var(--color-area);
    color: var(--color-text-light);
    padding: 2px 5px;
    border-radius: 4px;
}
.kf_info_thickness{
    background-color: var(--color-thickness);
    color: var(--color-text-light);
    padding: 2px 5px;
    border-radius: 4px;
}

/* 計算式表示部分ここから*/
.kf_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 748px;
    background-color: #ffffff;
    border-radius: 12px; 
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/ /*計算式表示部に影を入れる場合*/
    padding: 20px;
    box-sizing: border-box;
}

.kf_form {
    display: flex;
    flex-wrap: wrap;
}

.kf_left_block {
    width: 70%;
    padding: 10px;
    box-sizing: border-box;
}

.kf_right_block {
    width: 30%;
    padding: 15px 10px;
    box-sizing: border-box;
    background-color: var(--color-result-area-bg); /* 結果エリアの背景色 */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 結果項目間の余白 */
}

.kf_row_group {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    align-items: flex-end; /* 入力欄と記号の高さを揃える */
}

.kf_flex3-item {
    flex: 1; /* 親要素の幅を均等に分割 */
    padding: 0 5px; /* 左右に少し余白を持たせる */
}

/* 各入力ブロックの共通スタイル */
.kf_height_block,
.kf_width_block,
.kf_area_block,
.kf_thickness_block {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center;   /* 中央揃えにする */
}

.kf_thickness_block {
    width: 26%;
    margin-top: 10px; /* 上部に余白を追加 */
    margin-left: auto; /* 右寄せにする */
    margin-right: 5px;
}

.kf_input {
    width: 100%;
    padding: 0.75em 1em;
    border: solid;
    font-size: 1.1em;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kf_input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus);
}

/* 入力欄の枠線色 */
#kf_height,#kf_width{
    border:2px solid var(--color-primary);
}
#kf_area{
    border:3px solid var(--color-area);
}
#kf_thickness{
    border:3px solid var(--color-thickness);
}

/* ✕と＝の調整 */
.kf_op{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    color: var(--color-operator);
    margin: 0 10px; /* 左右に少し余白を持たせる */
    padding-bottom: 10px; /* 入力欄との高さ調整 */
}

.kf_left_block label {
    /*margin-bottom: 5px; /* ラベルと入力欄の間の余白 */
    font-weight: 600;
    color: var(--color-text-light);
    width: 100%;
    text-align: center;
    padding:5px 0px;
}

.kf_label_wh {
    background-color: var(--color-primary);
}

.kf_label_area {
    background-color: var(--color-area);
}
.kf_label_thickness {
    background-color: var(--color-thickness);
}


/* 結果表示部の調整 */
.kf_result-value {
    font-size: 1.5em;
    font-weight: bold;
    background-color: var(--color-result-bg);
    color: var(--color-text-light);
    border: var(--color-result-bg) solid 2px;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: -15px;;
}



/* スマホ表示時の調整*/
@media (max-width: 768px) {
.kf_container {
    flex-direction: column;
    padding: 0px;
    border-radius: 0px; 
    box-shadow: none;
}

.kf_left_block {
	padding:0 0 0 0;
}
.kf_right_block {
    padding:10px 0px;
    background-color: #fff;
    margin-top: -10px;
}
.kf_label {
    font-size: 0.8em;
    padding:3px 10px;
    font-weight: 400;
    z-index:100;
}

.kf_left_block label{
	line-height:0.9rem;
	margin-bottom:-1px;
}

.kf_flex3-item {
    flex: 1; /* 親要素の幅を均等に分割 */
    padding: 0 2px; /* 左右に少し余白を持たせる */
}

.kf_op{
    font-size: 0.8em;
    font-weight: bold;
    margin: 0px; /* 余白0 */
    padding-bottom: 25px; /* 入力欄との高さ調整 */
}

.kf_input {
    width: 100%;
    padding: 0.75em 0.5em;
    border: solid;
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kf_result-value {
    font-size: 1.0em;
    padding: 10px 5px;
    margin-bottom: 5px;
    margin-top: -10px;
}

.kf_unit{
    font-size: 0.8em;
}

.kf_sp_br {
     display: block!important;
}

.kf_thickness_block {
  width: 29%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: 1px;
}
}

/* PC表示時の調整*/
@media (min-width: 769px) {

    
}