@charset "UTF-8";


/*右矢印ボタンアレンジ
----------------------------------------------*/
.button-arrow-customize {
    display:inline-block;
    padding: 7px 60px 7px 24px;
    box-sizing: border-box;
    background-color: rgba(230,0,0,0.7);
    color: #fff !important;
    background-image: url("../images/common/btn_arrow.png");
    background-repeat: no-repeat;
    background-position:right 16px top 50%;
    opacity:1;
    text-decoration:none !important;
    font-size: 1.0rem;
    font-weight: bold;
}

/*リンク文字の色変更
----------------------------------------------*/
.black-red{
 display:inline-block;
 color: #1a1a1a;
}

a[class="black-red"]{
 color: #1a1a1a;
}

a:hover[class="black-red"]{
 color: #C7000A;
}

a:first-letter[class="black-red"]{
 font-size    : 1.5em;                /* 文字サイズ   */
 padding      : 0px;                /* 余白         */
 color        : #C7000A;            /* 文字の色     */
 float        : left;               /* 2文字目の位置合わせ */
}

/*隠し
----------------------------------------------*/
/*　h2仕様　*/
.c-h2-open {
    cursor:pointer;
	position:relative;
    padding: 5px 20px 5px 35px;
    text-align: left;
    font-size: 1.7rem !important;
    font-weight: 700;
    line-height: 1.4em;
    border-bottom: 2px solid #333;
    border-image: linear-gradient(to right,#333 0%,#eee 100%);
    border-image-slice: 1;
    word-break: break-word;
}
.c-h2-open:after{
 position: absolute;
   bottom:3px;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: linear-gradient(to left, #EEEEEE 0%, #c7000a 98%,#c7000a 100%);
}
.c-h2-open:first-letter{
    color: #C7000A;
    font-size: 120% !important;
}
.c-h2-box{
	display:none;
	margin:0;
}
.c-h2-open:before {
  content: '  ';
  position: absolute;
  bottom: 20px;
  left: 5px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.c-h2-box-open:before{
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
  bottom: 12px;
}
.c-h2-break{}

/*　h3仕様　*/
.c-h3-open {
    cursor:pointer;
	position:relative;
    padding: 18px 30px 5px 33px;
    text-align: left;
    font-weight: bold;
    font-size:1.2rem;
    border-bottom:3px solid #ccc;
    word-break: break-word;
}
.c-h3-open:hover{
  color: #C7000A;
  border-bottom:3px solid #C7000A;
  transition: all 0.2s ease-in-out;
}
/*.c-h3-open:after{
  position: absolute;
  bottom: -2.5px;
  left: 0;
  width: 10%;
  height: 3px;
  content: '';
  background: #C7000A;
}*/
.c-h3-box{
	display:none;
	margin:0;
}
.c-h3-open:before {
  content: '  ';
  position: absolute;
  bottom: 15px;
  left: 12px;
  width: 10px;                            /*矢印左の長さ*/
  height: 10px;                           /*矢印右の長さ*/
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  /*-webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);*/
  transform: rotate(45deg);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.c-h3-box-open:before{
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
  bottom: 12px;
}
.c-h3-break{
}

/*扉ページ風の題目
----------------------------------------------*/
.door-customize{
    cursor:pointer;
    display: inline-block;
    position:relative;
    float: left;
	width: 45%;
    margin: 20px 24px 20px 24px;
    padding: 0 0 13px 3px;
    font-weight:bold;
    font-size:1.2rem;
    color:#000 !important ;
    text-decoration: none !important;
    border-bottom:3px solid #ccc;
}
.door-customize:after{
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 20%;
  height: 3px;
  content: '';
  background: #C7000A;
}
.door-customize:before {
  content: '  ';
  position: absolute;
  bottom: 15px;
  right: 5px;
  width: 10px;                            /*矢印左の長さ*/
  height: 10px;                           /*矢印右の長さ*/
  border-right: 2px solid #C7000A;
  border-bottom: 2px solid #000000;
  transform: rotate(-45deg);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.door-customize:hover{
  color: #C7000A !important ;
  border-bottom:3px solid #C7000A;
  transition: all 0.2s ease-in-out;
}

.door-customize:hover:after{
}

.door-customize:hover:before{
  content: '  ';
  position: absolute;
  bottom: 15px;
  right: 0px;
  width: 10px;                            /*矢印左の長さ*/
  height: 10px;                           /*矢印右の長さ*/
  border-right: 2px solid #C7000A;
  border-bottom: 2px solid #000000;
  transform: rotate(-45deg);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* 動きのあるh4 */
.door-h4-customize{
    cursor:pointer;
    position:relative;
    background-image: url("../images/top/pickup_tryangle.png");
    background-size: 12px;
    background-position: top left;
    background-repeat: no-repeat;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    display: inline-block;
    padding: 15px 0px 10px 15px;
    float: left;
	width: 45%;
    margin: 20px 24px 20px 24px;
    font-weight: bold;
    font-size:1.2rem;
    color:#000 !important ;
    text-decoration: none !important;
}
.door-h4-customize:before{
  background: #C7000A;
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: bottom right;
  transform: scale(0, 1);
  transition: transform .3s;
}
.door-h4-customize:hover:before {
  transform-origin: bottom left;
  transform: scale(1, 1);
}

a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

@media screen and (max-width: 768px) {
.button-arrow-customize,.c-h2-open,.c-h3-open,.door-customize,.door-h4-customize { width: 95%;}
}

/*----------------------------------------------------------------------------------------*/
  /* 基本的なタブのスタイル */
  .tabs-custom {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #ccc;
    overflow-x: auto; /* 横スクロール対応 */
    white-space: nowrap; /* 折り返しを防止 */
  }

  .tabs-custom li {
    padding: 10px 1em;
    cursor: pointer;
    background-color: #f5f5f5;
    position: relative;
    flex-shrink: 0; /* アイテムの縮小を防ぐ */
   // border-right: 1px solid #fff; /* タブ間の白い線 */
  }

/* 左上の三角形 */
.tabs-custom li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 4px solid #ccc; /* 左辺の色 */
  border-top: 4px solid #ccc; /* 上辺の色 */
  border-right: 4px solid transparent; /* 右辺透明 */
  border-bottom: 4px solid transparent; /* 下辺透明 */
}
.tabs-custom li.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 4px solid var(--triangle-color, #ccc); /* 左辺の色 */
  border-top: 4px solid var(--triangle-color, #ccc); /* 上辺の色 */
  border-right: 4px solid transparent; /* 右辺透明 */
  border-bottom: 4px solid transparent; /* 下辺透明 */
}

  .tabs-custom li.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--underline-color, #4CAF50); /* デフォルトは緑 */
  }

  .tabs-custom li:hover {
    background-color: #ddd;
  }

  /* タブコンテンツのスタイル */
  .tabs-custom-content {
    display: none;
    padding: 20px;
    background-color: #f6f6f6;
  }

  .tabs-custom-content.active {
    display: block;
  }

  /* タブごとの色を指定 */
  .tabs-custom li[data-tab="tab-1"] {
    --underline-color: #c37fd4; /* 紫 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-2"] {
    --underline-color: #177ee6; /* 青 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-3"] {
    --underline-color: #45cc82; /* 緑 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-4"] {
    --underline-color: #ffc44d; /* 黄 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-5"] {
    --underline-color: #ff5533; /* 朱 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-6"] {
    --underline-color: #ccf0ff; /* 水 */
    --triangle-color: #e62e2e;
  }

  .tabs-custom li[data-tab="tab-7"] {
    --underline-color: #cccccc; /* 灰 */
    --triangle-color: #e62e2e;
  }

  /* 親コンテナのスタイル */
  .tutse-custom-table-container, .tutta-custom-table-container { 
    overflow-x: auto; /* 横スクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* スムーズスクロール対応 */
  }

  /* テーブルのスタイル */
  .tutse-custom-table, .tutta-custom-table {
    border-collapse: collapse; /* 枠を1つに統合 */
    table-layout: fixed; /* 列の幅を固定に設定 */
  width: 100%;  /* テーブルは100%幅を使用 */
  }

  /* セルのスタイル */
  .tutse-custom-table th, .tutse-custom-table td, .tutta-custom-table th, .tutta-custom-table td{
    height: 10px; /* 行の高さを10pxに固定 */
    border: 1px solid #ccc; /* 枠線を追加 */
    padding: 8px; /* パディングを追加 */
    font-size: 14px; /* テキストサイズ */
  min-width: 50px;  /* 最小幅 */
  max-width: 250px;  /* 最大幅 */
  overflow: hidden;  /* 内容がはみ出さないように */
  text-overflow: ellipsis;  /* はみ出した内容を省略 */
  }

  /* テーブルヘッダーのスタイル */
  .tutse-custom-table th, .tutta-custom-table th {
    font-weight: bold;
  }

  /* 各列の幅を指定 */
  /*詳細はこちら*/
  .tutse-custom-table th:nth-child(1), .tutse-custom-table td:nth-child(1) {
    width: 60px;
    text-align: center; /* 中央揃え */
  }

  /*テーマ番号*/
  .tutse-custom-table th:nth-child(2), .tutse-custom-table td:nth-child(2) {
    width: 60px;
    text-align: center; /* 中央揃え */
  }

  /*テーマ名*/
  .tutse-custom-table th:nth-child(3), .tutse-custom-table td:nth-child(3) {
    width: 200px;
    text-align: left; /* 左揃え */
  }

  /*受入条件*/
  .tutse-custom-table th:nth-child(4), .tutse-custom-table td:nth-child(4) {
    width: 200px;
    text-align: left; /* 左揃え */
  }

  /*担当教員*/
  .tutse-custom-table th:nth-child(5), .tutse-custom-table td:nth-child(5) {
    width: 100px; /* 5列目の幅を25%に設定 */
    text-align: left; /* 左揃え */
  }

/*受入可能時期*/
  .tutse-custom-table th:nth-child(6), .tutse-custom-table td:nth-child(6) {
    width: 150px;
    text-align: center; /* 中央揃え */
  }

/*--------------------*/

  /*詳細はこちら*/
  .tutta-custom-table th:nth-child(1), .tutta-custom-table td:nth-child(1) {
    width: 60px;
    text-align: center; /* 中央揃え */
  }

  /*テーマ番号*/
  .tutta-custom-table th:nth-child(2), .tutta-custom-table td:nth-child(2) {
    width: 60px;
    text-align: center; /* 中央揃え */
  }

  /*受入テーマ*/
  .tutta-custom-table th:nth-child(3), .tutta-custom-table td:nth-child(3) {
    width: 200px;
    text-align: left; /* 左揃え */
  }

  /*受入条件*/
  .tutta-custom-table th:nth-child(4), .tutta-custom-table td:nth-child(4) {
    width: 200px;
    text-align: left; /* 左揃え */
  }

  /*担当教員*/
  .tutta-custom-table th:nth-child(5), .tutta-custom-table td:nth-child(5) {
    width: 100px; /* 5列目の幅を25%に設定 */
    text-align: left; /* 左揃え */
  }

/*受入期間*/
  .tutta-custom-table th:nth-child(6), .tutta-custom-table td:nth-child(6) {
    width: 148px;
    text-align: center; /* 中央揃え */
  }

/*募集定員*/
  .tutta-custom-table th:nth-child(7), .tutta-custom-table td:nth-child(7) {
    width: 40px;
    text-align: center; /* 中央揃え */
  }
      .details-row {
        display: none;
        background-color: #f9f9f9;
      }

/*----------------------------------アイコンリンク----------------------------------------*/

.tut-custom-search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}

.tut-custom-box-item {
  display: block;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border-radius: 8px;
  text-decoration: none !important;
  border: 5px solid #808080; /* 縁取りを追加 */
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.tut-custom-box-item img {
  padding: 8px;
  width: 60%;
  height: 60%;
  object-fit: cover;
  text-align: center;
}

.tut-custom-box-item .tut-kosen-text-box {
  text-align: center;
  padding: 3px;
  text-decoration: none !important;
  color: black;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  transform: translateY(5px);
  line-height: 1.2; /* 行間を調整 */
}

.tut-custom-box-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}