/*
Theme Name:Rumble child
Theme URI:
Description:WordPressテーマ「rumble」の自作子テーマです。
Template: rumble_tcd058
Author:Takashi Yamada
Author URI:https://tcd-theme.com/
Version:0.0.8
*/

/* H3見出し用※fontawesomes仕様 */
.style_fire {
  position: relative;
  background: #ffeeee;
  padding: 0.25em 0.5em;
  border-left: solid 2em #dd3333;
}

.style_fire:before {
  font-family: "Font Awesome 5 Free";
  content: "\f06d";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style_water {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

.style_water:before {
  font-family: "Font Awesome 5 Free";
  content: "\f773";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style_lightning {
  position: relative;
  background: #ffffe2;
  padding: 0.25em 0.5em;
  border-left: solid 2em #d7d733;
}

.style_lightning:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e7";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style_star {
  position: relative;
  background: #f5f4f4;
  padding: 0.25em 0.5em;
  border-left: solid 2em #757566;
}

.style_star:before {
  font-family: "Font Awesome 5 Free";
  content: "\f699";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* H3見出し用※上下に線と塗りつぶし */

.style3fire {
    border-top: 1px solid #ff0000;
    border-bottom: 1px solid #f00;
    background: #FBEFEF;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

.style3water {
    border-top: 1px solid #00d0ff;
    border-bottom: 1px solid #00d0ff;
    background: #effafb;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

.style3light {
    border-top: 1px solid #fff700;
    border-bottom: 1px solid #fff700;
    background: #fafbef;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

/* H3見出し用※上下に線と塗りつぶし */


/* トップページのカテゴリ下線スペース用 */

.p-cb__item-header__has-border2 {
    border-bottom: 4px solid #000;
    padding-bottom: 1px;
}


/* YouTubeプロンプト用 */

.style_yt {
  position: relative;
  background: #efffe6;
  padding: 0.25em 0.5em;
  border-left: solid 2em #3ca700;
}

.style_yt:before {
  font-family: "Font Awesome 5 Free";
  content: "\f03d";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style3yt {
    border-top: 1px solid #3ca700;
    border-bottom: 1px solid #3ca700;
    background: #efffe6;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

/* H3見出しベータ版用※fontawesomes仕様 */
.style_beta {
  position: relative;
  background: #efefef;
  padding: 0.25em 0.5em;
  border-left: solid 2em #000;
}

.style_beta:before {
  font-family: "Font Awesome 5 Free";
  content: "\f5ae";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style3beta {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #efefef;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

/* H3見出しカスタムGPT用※fontawesomes仕様 */
.style_gpt {
  position: relative;
  background: #dcffe3;
  padding: 0.25em 0.5em;
  border-left: solid 2em #008f1d;
}

.style_gpt:before {
  font-family: "Font Awesome 5 Free";
  content: "\f6e8";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.style3gpt {
    border-top: 1px solid #008f1d;
    border-bottom: 1px solid #008f1d;
    background: #dcffe3;
    font-size: 22px;
    font-weight: 400;
    margin: 3em 0 1.5em;
    padding: 1.1em 0.2em 1em;
}

/*　戻る・進むの装飾　*/
.horizontal-link-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.horizontal-link-list li {
    float: left;
    list-style-type: none;
    width: 50%;
}

.horizontal-link-list li:last-child {
    float: right;
}

.horizontal-link-list li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: black;
}

.horizontal-link-list li a:hover {
    background-color: #90ee90;
}

/* 以下のコード
 <ul class="horizontal-link-list">
    <li><a href="#previous"><i class="fas fa-chevron-circle-left"></i> 前の講義に戻る 「講義名」</a></li>
    <li><a href="#next">次の講義に進む 「講義名」 <i class="fas fa-chevron-circle-right"></i></a></li>
</ul>
 */

/*最終ページ用の左のみのコード*/
.horizontal-link-list.last-page li {
    float: left; /* 最後のページのリンクを左に配置 */
}

.horizontal-link-list.last-page li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: black;
}
/* 最終ページ用コード
<ul class="horizontal-link-list last-page">
    <li><a href="#previous"><i class="fas fa-chevron-circle-left"></i> 前の講義に戻る 「講義名」</a></li>
</ul>
 */


/* Aiko's Style - Brown Base */
.style_aiko {
  position: relative;
  background: #f3e5d4;
  padding: 0.25em 0.5em;
  border-left: solid 2em #8b4513;
}

.style_aiko:before {
  font-family: "Font Awesome 5 Free";
  content: "\f06c"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Mirai's Style - Black Base */
.style_mirai {
  position: relative;
  background: #f0f0f0;
  padding: 0.25em 0.5em;
  border-left: solid 2em #000;
}

.style_mirai:before {
  font-family: "Font Awesome 5 Free";
  content: "\f007"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Rei's Style - Silver Base */
.style_rei {
  position: relative;
  background: #e6e6e6;
  padding: 0.25em 0.5em;
  border-left: solid 2em #c0c0c0;
}

.style_rei:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c3"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Yui's Style - Blue Base */
.style_yui {
  position: relative;
  background: #e0f7ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #0077cc;
}

.style_yui:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Sakura's Style - Pink Base */
.style_sakura {
  position: relative;
  background: #ffe6f2;
  padding: 0.25em 0.5em;
  border-left: solid 2em #ff66b2;
}

.style_sakura:before {
  font-family: "Font Awesome 5 Free";
  content: "\f004"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Beginner Style - #c12d35 */
.style_beginner {
  position: relative;
  background: #f9e5e6;
  padding: 0.25em 0.5em;
  border-left: solid 2em #c12d35;
}

.style_beginner:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a4"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Intermediate Style - #991018 */

.style_intermediate {
  position: relative;
  background: #f7dcdc;
  padding: 0.25em 0.5em;
  border-left: solid 2em #991018;
}

.style_intermediate:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0b2"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Advanced Style - #880a12 */
.style_advanced {
  position: relative;
  background: #f5d3d5;
  padding: 0.25em 0.5em;
  border-left: solid 2em #880a12;
}

.style_advanced:before {
  font-family: "Font Awesome 5 Free";
  content: "\f06e"; /* Example icon */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Blog Overview Style - Black Base */
.style_overview {
  position: relative;
  background: #333333;
  color: #ffffff; /* Ensures text is visible on the dark background */
  padding: 0.25em 0.5em;
  border-left: solid 2em #000000;
}

.style_overview:before {
  font-family: "Font Awesome 5 Free";
  content: "\f02d"; /* Example icon for an overview or book */
  position: absolute;
  padding: 0em;
  color: #ffffff;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* AI Introduction Style - Green Base */
.style_ai_intro {
  position: relative;
  background: #e6f4e6;
  padding: 0.25em 0.5em;
  border-left: solid 2em #2e8b57;
  color: #333333; /* Ensures readability on a light green background */
}

.style_ai_intro:before {
  font-family: "Font Awesome 5 Free";
  content: "\f544"; /* Example icon representing AI or technology */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 枠内のリストタグを調整 */
[class^="well3"] ul {
    margin-top: 0;
    margin-bottom: 0;
}


/* Aiko's Well - Lighter Brown Base */
.well3_aiko {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #8b4513;
    background: #faf4ee;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Mirai's Well - Lighter Black Base */
.well3_mirai {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #000;
    background: #f9f9f9;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Rei's Well - Lighter Silver Base */
.well3_rei {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #c0c0c0;
    background: #f7f7f7;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Yui's Well - Lighter Blue Base */
.well3_yui {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #0077cc;
    background: #f0fbff;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Sakura's Well - Lighter Pink Base */
.well3_sakura {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #ff66b2;
    background: #fff3f9;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Beginner's Well - Lighter Red Base */
.well3_beginner {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #c12d35;
    background: #fdeced;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Intermediate's Well - Lighter Dark Red Base */
.well3_intermediate {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #991018;
    background: #fce8e8;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Advanced's Well - Lighter Maroon Base */
.well3_advanced {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #880a12;
    background: #fce4e5;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* Blog Overview's Well - Lighter Black Base */
.well3_overview {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #000000;
    background: #444444;
    color: #ffffff; /* Ensures text is visible on the dark background */
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
}

/* AI Introduction's Well - Lighter Green Base */
.well3_ai_intro {
    margin: 2em 0 2.5em;
    padding: 1em 1.5em;
    line-height: 2.0;
    border: 1px dashed #2e8b57;
    background: #f1f9f1;
    box-shadow: 0 1px 3px 0 rgba(195, 195, 195, 0.3);
    color: #333333; /* Ensures readability on a light green background */
}