/* 計算のボックス */
.keisan-box {
    position: relative;
    padding:0.25em 1em;
}
.keisan-box:before,.keisan-box:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.keisan-box:before{
    border-left: solid 1px #5767bf;
    border-top: solid 1px #5767bf;
    top:0;
    left: 0;
}
.keisan-box:after{
    border-right: solid 1px #5767bf;
    border-bottom: solid 1px #5767bf;
    bottom:0;
    right: 0;
}
.keisan-box p {
    margin: 0.5em 0em; 
    padding: 0;
	font-size: 11pt;
}

/* 解法のボックス */
/*メモアイコンをつけた囲み枠*/
.tokikata-box {
	margin: 2em auto;
	padding:1em 2em 2em;
	background-color: #E8EAF0; /* 背景色 */
	border-radius:1px;/*ボックス角の丸み*/
}

.tokikata-box .tokikata-title {
	color: #b4bbce ; /* タイトル文字色 */
	font-size: 18px;
	font-weight: bold;
}

.tokikata-box .tokikata-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f304";
	font-size: 18px;
	margin: 0 3px 0 0;
	font-weight: bold;
}



/* 定理のボックス */
.teiri-box {
    position: relative;
    margin: 1em 0;
	padding: 1em 1em;
    border: solid 2px #010066;
    border-radius: 8px;
}
.teiri-box .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
	background: #FFF;
	color: #010066;
	font-weight: bold;
}

.teiri-box p {
    margin: 0; 
    padding: 0;
}

.logic-box {
	border: solid 1px black;
	padding: 0.5em 1em;
}

/* 定理のボックス（）各色 */
.teiri-obox {
    position: relative;
    margin: 1em 0;
	padding: 1em 1em;
    border: solid 2px #f58220;
    border-radius: 8px;
}
.teiri-obox .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
	background: #FFF;
	color: #f58220;
	font-weight: bold;
}

.teiri-obox p {
    margin: 0; 
    padding: 0;
}

.teiri-gbox {
    position: relative;
    margin: 1em 0;
	padding: 1em 1em;
    border: solid 2px #2e7d32;
    border-radius: 8px;
}
.teiri-gbox .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
	background: #FFF;
	color: #2e7d32;
	font-weight: bold;
}

.teiri-gbox p {
    margin: 0; 
    padding: 0;
}

.teiri-rbox {
    position: relative;
    margin: 1em 0;
	padding: 1em 1em;
    border: solid 2px #a22041;
    border-radius: 8px;
}
.teiri-rbox .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
	background: #FFF;
	color: #a22041;
	font-weight: bold;
}

.teiri-rbox p {
    margin: 0; 
    padding: 0;
}

/* センスボックス */
.sense-box{
  margin-bottom: 1em;
  background-color: #fff3e0;
  border: 2px solid #ffa726;
  letter-spacing: .3px;
}

.sense-box .box-title{
  color: #fff;
  font-weight: bold;
  background-color: #ffa726;
  padding: 1px 10px;
}

.sense-box p{
  margin: 0;
  padding: 0.2em;
}

/* すべてのボックス共通の基本設定 */
.box-python, 
.box-sheets, 
.box-design {
    margin: 0;
    padding: 0.8em 1.2em;
    border-radius: 6px;
    border-left: 6px solid;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box; /* 幅の計算を維持 */
}

/* ボックス内の共通パーツ設定 */
.box-python .box-title, 
.box-sheets .box-title, 
.box-design .box-title {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 0.4em;
    margin-top: 0; /* WordPressの余白対策 */
}

/* 本文のフォントサイズを標準のpと同じにする */
.box-python p, 
.box-sheets p, 
.box-design p {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #2c3e50;
}

/* --- 個別カラー設定 --- */

/* Python用（ブルー） */
.box-python {
    background-color: #f0f7ff;
    border-color: #3776ab;
}
.box-python .box-title {
    color: #3776ab;
}

/* スプレッドシート用（グリーン） */
.box-sheets {
    background-color: #f3faf5;
    border-color: #0f9d58;
}
.box-sheets .box-title {
    color: #0f9d58;
}

/* デザイン用（オレンジ） */
.box-design {
    background-color: #fff9f0;
    border-color: #ff9a00;
}
.box-design .box-title {
    color: #e67e22;
}

/* すべてのボックス共通の基本設定 */
.python-box, 
.sheets-box, 
.design-box {
    margin: 0;
    border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box; /* 幅の計算を維持 */
	border: 4px solid;
}

/* ボックス内の共通パーツ設定 */
.python-box .box-title, 
.sheets-box .box-title, 
.design-box .box-title {
    font-weight: bold;
    margin-bottom: 0.4em;
    margin-top: 0; 
	padding: 3px 1em;
}

/* 本文のフォントサイズを標準のpと同じにする */
.python-box p, 
.sheets-box p, 
.design-box p {
    margin: 0;
    padding: 10px 0.8em;
    line-height: 1.6;
    color: #2c3e50;
}

/* --- 個別カラー設定 --- */

/* Python用（ブルー） */
.python-box {
    border-color: #3776ab;
}
.python-box .box-title {
	background-color: #3776ab;
    color: #f0f7ff;
}

/* スプレッドシート用（グリーン） */
.sheets-box {
    border-color: #0f9d58;
}
.sheets-box .box-title {
	background-color: #0f9d58;
    color: #f3faf5;
}

/* デザイン用（オレンジ） */
.design-box {
    border-color: #e67e22;
}
.design-box .box-title {
	background-color: #e67e22;
    color: #fff9f0;
}