/* 全体の設定 */
a:hover {
  color: darkgreen;
}

a {
  color: darkgreen;
}

 /*動詞ページのタブを携帯へ対応する為に*/
 .nav-tabs-outer{
  overflow-x:scroll;  
}

.nav-tabs-outer .nav-tabs li{
  display: block;
  width: 100px;
}

/*左に緑の見出し*/
.leftGreen {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 6px solid green;
}
.leftGreen::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  min-width: 50%;
  height: 0;
  border-bottom: 1px solid #7d997c;
}
@media only screen and (max-width: 768px) {
  .leftGreen::after {
    min-width: 80%;
  }
}

/*可愛いボタン*/
.btn-darkgreen {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: darkgreen;/*色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px darkgreen;/*線色*/
}

.btn-darkgreen {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.answerSpace{
  min-height: 210px;
}

.questionSpace{
  min-height: 210px;
  text-align:left;
  font-size:20px; 
  padding:20px;
}

@media (max-width: 576px) {
  .questionSpace{
    font-size:16px;
    padding:5px; 
  }
}

.sheet {
  max-width: 100%;
  margin:50px 0 50px;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 576px) {
  .sheet{
    padding: 15px;
  }
}

.custom-td-style {
  /* min-width: 25%; */
  max-width: 33%; 
  word-wrap: break-word; /* 長い単語を強制的に改行させます */
  line-height:normal;
}

/* テーブルがはみ出ないように */
@media only screen and (max-width: 576px) {
  .mobile_input{
    max-width: 100px;
  }
}


.hukidashi1 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}

.hukidashi1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: green; /*アイコン色*/
}

.hukidashi2 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}

.hukidashi2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: goldenrod; /*アイコン色*/
}

.hukidashi3 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}

.hukidashi3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: gray; /*アイコン色*/
}

.hukidashi4 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}

.hukidashi4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #9c5e31; /*アイコン色*/
}

/* 会話とリスニングの黒板 */
.container {
  position: relative;
  text-align:left;
}

.blackboard {
  display: block;
  width: 80%;
}

.explanation {
  position: absolute;
  top: 0%; /* テキストを縦方向中央に配置 */
  left: 0; /* テキストを左端に配置 */
  transform: translateY(0%); /* テキストを縦方向中央に配置 */
  font-size: 18px; /* テキストのフォントサイズを調整 */
  color: white; /* テキストの色を設定 */
  padding: 30px 35px 0; /* テキストの周りの余白を調整 */
  width: 80%;
}

.cute-card {
  width: 100%;
  /* height: 200px; */
  background-color: #4c8a40;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  color:white;
  font-size:20px;
  border: 5px solid darkgreen; /* 5pxの白い線をふちどり */
}

@media only screen and (max-width: 576px) {
  .cute-card{
    font-size:18px;
  }
}