@charset "utf-8";
/*
Theme Name:SOLARIS Child
Theme URI:https://tcd-theme.com/tcd088
Description:The WordPress theme "SOLARIS" was developed with the concept of an advanced company. Apply your business and corporate information to the prepared pages, and put the contents on the top page, and you will have an innovative corporate website.
Author:TCD
Author URI:https://tcd-theme.com/
Version:2.5
Template:solaris_tcd088
Text Domain:tcd-solaris
*/


    /* スライダー全体のスタイル */
    .my-slider-container-onimage {
        position: relative;
        max-width: 1070px;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .my-slider-onimage {
        display: flex;
        overflow: hidden;
    }

    .my-slider_track-onimage {
        display: flex;
        transition: transform 0.5s ease;
        width: calc(6 * (25% + 20px)); /* 6つのスライドに合わせた幅 */
        max-width: 100%;
    }

    .my-slider_item-onimage {
        text-align: center;
        flex: 0 0 calc(33.33% - 20px); /* 3つの画像がちょうど収まるサイズ */
        max-width: calc(33.33% - 20px); /* 最大幅を設定 */
        margin: 0 10px;
        position: relative; /* キャプションを画像の下部に配置するため */
    }

    .my-slider_item-onimage img {
        width: 100%;
        height: 200px;
        object-fit: cover; /* 画像を中央寄せで表示 */
    }

    /* キャプションのスタイル */
    .my-slider_caption-overlay-onimage {
        position: absolute;
        bottom: 10px; /* 画像の下部に配置 */
        left: 0;
        width: 100%;
        padding: 10px;
        color: white;
        font-size: 0.8em; /* 文字サイズ */
        background-color: rgba(0, 0, 0, 0.6); /* 背景色を黒、透明度を60%に設定 */
        text-align: center; /* キャプションを中央揃えにする */
        box-sizing: border-box; /* パディングを含めた幅の計算をする */
    }

    .my-slider_btn-onimage {
        position: absolute;
        top: 50%; /* 基準を中央に設定 */
        transform: translateY(-50%); /* 矢印をスライダーの中央に配置 */
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 24px;
        z-index: 10;
    }

    .my-slider_btn-prev-onimage {
        left: 10px;
    }

    .my-slider_btn-next-onimage {
        right: 11.5px;
    }

    /* レスポンシブデザイン */
    @media (max-width: 768px) {
        .my-slider_item-onimage {
            flex: 0 0 calc(50% - 20px); /* 2つ表示 */
            max-width: none; /* 最大幅を非設定にする */
        }
    }

    @media (max-width: 480px) {
        .my-slider_item-onimage {
            flex: 0 0 calc(100% - 20px); /* 1つ表示 */
            max-width: none; /* 最大幅を非設定にする */
        }
    }


/* TOP YouTube動画エリア */
.top-youtube-section{
  max-width:1100px;
  margin:0 auto 0;
  padding:45px 0px;
  box-sizing:border-box;
}

.top-youtube-section .styled_h3{
  margin:0 0 40px;
  font-size:24px;
  font-weight:700;
}

.top-youtube-columns{
  display:flex;
  gap:56px;
  align-items:flex-start;
}

.top-youtube-left{
  flex:1;
  min-width:0;
}

.top-youtube-right{
  flex:1;
  min-width:0;
}

.top-youtube-section h4{
  margin:0 0 22px;
  font-size:22px;
  font-weight:700;
  color:#000;
}

.top-youtube-left h4:not(:first-child){
  margin-top:48px;
}

/* リスト初期化 */
.top-youtube-list{
  margin:0;
  padding:0;
  list-style:none;
margin-left: 0px !important;
}

.top-youtube-item{
  margin:0 0 18px;
  padding:0;
  list-style:none;
}

.top-youtube-item::marker{
  content:"";
}

.top-youtube-item img{
  border-radius:8px;
}

.top-youtube-item a{
  display:flex;
  align-items:flex-start;
  gap:14px;
  text-decoration:none;
  color:#003366;
  transition:opacity .2s ease;
}

.top-youtube-item a:hover{
  opacity:.75;
}

.top-youtube-item img{
  width:160px;
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
  flex-shrink:0;
  background:#eee;
}

.top-youtube-item span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.6;
  font-size:15px;
  color:#003366;
}

/* TOP10側は少しコンパクト */
.top-youtube-right .top-youtube-item img{
  width:140px;
}

.top-youtube-right .top-youtube-item span{
  font-size:14px;
}

/* ボタン */
.top-youtube-button-wrap{
  margin-top:42px;
  text-align:center;
}

.top-youtube-button{
  display:inline-block;
  min-width:220px;
  padding:16px 28px;
  background:#00658a;
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  transition:opacity .2s ease;
}

.top-youtube-button:hover{
  opacity:.8;
}

/* タブレット */
@media (max-width:1024px){
  .top-youtube-section{
    padding:36px 30px;
  }

  .top-youtube-columns{
    gap:36px;
  }

  .top-youtube-item img{
    width:130px;
  }

  .top-youtube-right .top-youtube-item img{
    width:120px;
  }
}

/* スマホ */
@media (max-width:768px){
  .top-youtube-section{
    margin:40px auto 0;
    padding:32px 20px;
  }

  .top-youtube-section .styled_h3{
    margin-bottom:32px;
    font-size:20px;
  }

  .top-youtube-columns{
    display:block;
  }

  .top-youtube-right{
    width:100%;
    margin-top:48px;
  }

  .top-youtube-section h4{
    font-size:20px;
    margin-bottom:18px;
  }

  .top-youtube-left h4:not(:first-child){
    margin-top:42px;
  }

  .top-youtube-item{
    margin-bottom:16px;
  }

  .top-youtube-item a{
    gap:12px;
  }

  .top-youtube-item img,
  .top-youtube-right .top-youtube-item img{
    width:110px;
  }

  .top-youtube-item span,
  .top-youtube-right .top-youtube-item span{
    font-size:14px;
    line-height:1.5;
  }

  .top-youtube-button{
    width:100%;
    box-sizing:border-box;
  }
}

/* 狭いスマホ */
@media (max-width:480px){
  .top-youtube-item img,
  .top-youtube-right .top-youtube-item img{
    width:96px;
  }

  .top-youtube-item span{
    font-size:13px;
  }
}