@charset "UTF-8";

/*共通CSS*/
@import url("style_2024.css");
/* ============= */
/* 全体のレイアウト設定 */
/* ============= */

body {
    background-color: #FFF; /* 背景色を白に設定 */
    width: 100%; /* 幅を100%に設定 */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    overflow-x: hidden; /* 横スクロールバーを非表示にする */
}

#l-top {
    width: 100vw;  /* ビューポートの幅に合わせる */
    height: 100vh; /* ビューポートの高さに合わせる */
    position: relative;
    overflow: hidden;
    background-color: red; /* 背景色を赤に設定（デバッグ用） */
}
/* 共通のスタイル */
#l-top_arrow-down,
#l-About_us,
#l-NEWS,
#l-CONTENT,
#l-MENBER,
#l-JOIN,
#l-CONTACT {
    /*padding-top: 5rem;*/
    padding-bottom: 5rem;
}

#l-About_us .container,
#l-NEWS .container,
#l-CONTENT .container,
#l-MENBER .container,
#l-JOIN .container,
#l-CONTACT .container::after {
  content: ""; /* 空のコンテンツを生成 */
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 幅をセクション全体に設定 */
  border-bottom: 2px solid #212529; /* 下ボーダーのスタイル */
    padding-bottom: 1rem;

}

/* セクションごとの個別のスタイル */
#l-top_arrow-down {
    padding-top: 15rem;
    padding-bottom: 15rem;
}

#l-footer{
    padding-top: 5rem;
    padding-bottom: 3rem;
    background-color: #EBEAE9;
}
    /* メディアクエリのスタイル */
    @media (min-width: 768px) {
        #l-CONTACT_top h2 {
            letter-spacing: 0.5rem;
        }
    }
/*description*/
#l-top_arrow-down .description,
#l-About_us_top .description,
#l-NEWS .description,
#l-CONTENT .description,
#l-MENBER .description,
#l-JOIN .description,
#l-CONTACT .description{
    height: auto;
    padding-top: 0.3rem;
    padding-bottom: 2rem;
    margin-bottom: 0; /*リセット*/
}


/*//////////////////////////////////////////////////////////////////////////////*/
/* NEWS */
/* ニュースリストのスタイル */
#l-NEWS > .container > .row > dl > .news-item {
  margin-bottom: 0; /* マージンリセット */
  padding-left: 0; /* 左パディング */
  padding-bottom: 0; /* 下パディング */
  padding-top: 1rem; /* 上パディング */
}

/* ニュース項目のスタイル */
#l-NEWS > .container > .row > dl > .news-item > dt,
#l-NEWS > .container > .row > dl > .news-item > dd {
  border-bottom: solid 1px #212529; /* 下ボーダー */
}

/* ニュース項目 (dt) */
#l-NEWS > .container > .row > dl > .news-item > dt {
  font-family: source-han-sans-japanese, sans-serif; /* フォントファミリー */
  font-weight: 200; /* フォントウェイト */
  font-style: normal; /* フォントスタイル */
  margin-bottom: 0; /* 下マージン */
  padding-left: 15px; /* 左パディング */
  padding-bottom: 2rem; /* 下パディング */
  padding-top: 2rem; /* 上パディング */
  text-align: left; /* 左揃え */
  position: relative; /* 擬似要素のために相対位置に設定 */
}

/* ニュース内容 (dd) */
#l-NEWS > .container > .row > dl > .news-item > dd {
  font-family: source-han-sans-japanese, sans-serif; /* フォントファミリー */
  font-weight: 400; /* フォントウェイト */
  font-style: normal; /* フォントスタイル */
  color: #212529; /* テキストカラー */
  margin-bottom: 0; /* 下マージン */
  padding-left: 15px; /* 左パディング */
  padding-bottom: 2rem; /* 下パディング */
  padding-top: 2rem; /* 上パディング */
  overflow-wrap: normal; /* テキストの改行方法 */
  position: relative; /* 擬似要素のために相対位置に設定 */
}

/* 日付部分のデザイン */
#l-NEWS > .container > .row > dl > .news-item > dt .news-data::before {
  content: "DATA"; /* DATAラベルのテキストを追加し、改行を挿入 */
  font-size: 0.875rem; /* DATAラベルのフォントサイズ */
  font-weight: 300; /* DATAラベルを細く */
  display: block; /* ラベルをブロック要素として表示 */
  white-space: pre; /* 改行を適用するために必要 */
  margin-bottom: 0.15rem; /* DATAラベルと日付の間隔を調整 */
}

#l-NEWS > .container > .row > dl > .news-item > dt .news-data {
  font-weight: 400; /* フォントウェイトを通常設定 */
  font-size: 1rem; /* 日付のフォントサイズ */
  color: #666; /* 日付のフォントカラー */
}

/* dt と dd の間に区切り線を追加 */
#l-NEWS > .container > .row > dl > .news-item > dt::after {
  content: " / "; /* 区切り線の内容 */
  position: absolute; /* 絶対位置で配置 */
  right: 0; /* 右端に配置 */
  top: 50%; /* 垂直方向の中央に配置 */
  transform: translateY(-50%); /* 垂直方向の中央に調整 */
  color: #212529; /* テキストカラー */
  font-size: 3rem; /* フォントサイズを調整 */
  font-weight: 100; /* フォントウェイト */    
  line-height: 1; /* 行の高さを調整 */
}

/* 画面幅が991px以下の場合に「/」を非表示 */
@media (max-width: 991px) {
  #l-NEWS > .container > .row > dl > .news-item > dt::after {
    content: none; /* 区切り線を非表示にする */
  }
}

/* ニュース項目のホバー効果（dtとddに直接適用） */
/*
#l-NEWS > .container > .row > dl > .news-item:hover dt,
#l-NEWS > .container > .row > dl > .news-item:hover dd {
  background-color: var(--hover-bg-color, #0C7EC2); 
  color: var(--hover-text-color, #FFF) !important; 
}
*/

/* その他のリストスタイル調整 */
l {
  font-size: 0; /* フォントサイズを0に設定 */
}

ul, li {
  display: inline-block; /* インラインブロック表示 */
  vertical-align: top; /* 垂直揃え */
  padding-left: 0; /* 左パディングを0に設定 */
  margin-left: 0; /* 左マージンを0に設定 */
  letter-spacing: 0.15rem; /* 文字間隔 */
}

dl, dt, dd, a {
  color: #707070; /* テキストカラー */
}


#l-About_us .description{
    width: 100%;
    padding-left:100px;
    padding-right:100px;
}




/*//////////////////////////////////////////////////////////////////////////////*/
/* Footer Section */
#l-footer .container .footer-Brand_logo {
  display: flex;
  justify-content: flex-start; /* ブランドロゴを左寄せで表示 */
}

#footer-Brand_logo svg {
  height: 50px; /* ブランドロゴの高さ */
  margin-bottom: 1rem; /* ロゴ下のマージン */
}

/* Navigation Items in Footer */
#footer_nav-item {
  margin-top: 0.3rem; /* アイテム間の上マージン */
  margin-bottom: 0.3rem; /* アイテム間の下マージン */
}

#footer_nav-item ul li a {
  font-family: source-han-sans-japanese, sans-serif; /* フォントファミリー */
  font-weight: 300; /* フォントの太さ */
  font-style: normal; /* フォントのスタイル */
  font-size: 1rem; /* フォントサイズ */
  letter-spacing: 0.13rem; /* 文字間隔 */
  color: #212529; /* テキストの色 */
  display: block; /* 要素をブロック表示 */
  padding: 0.5rem 0; /* 上下のパディング */
  padding-left: 0; /* 左のパディング */
  padding-right: 1.8rem; /* 右のパディング */
  transition: 0.3s; /* ホバー時のトランジション効果 */
}

/* メインカラーホバー用のスタイル */
.nav-item .nav-link {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  display: inline-block; /* 幅をコンテンツに合わせるため */
  text-decoration: none; /* デフォルトの下線を削除 */
  color: #212529; /* 初期状態のリンクカラー */
}

.nav-item .nav-link::after {
  content: ''; /* 擬似要素を作成 */
  position: absolute; /* 絶対位置で配置 */
  left: 0; /* 左端から開始 */
  bottom: -2px; /* テキストの下に配置 */
  width: 100%; /* テキストの幅と同じ長さ */
  height: 2px; /* 下線の高さ */
  background-color: var(--accent-color); /* メインカラー */
  transform: scaleX(0); /* 初期状態では表示しない */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.nav-item .nav-link:hover::after {
  transform: scaleX(1); /* ホバー時に下線を表示 */
}

/* Support Section */
.support-box {
  padding-bottom: 2rem; /* サポートセクションの下のパディング */
}

.support-email {
  font-weight: bold; /* メールアドレスのフォント太さ */
}

.support-email span {
  font-weight: normal; /* span内のテキストのフォント太さ */
}

.support-email .main-email {
  font-size: 1.8rem; /* メインメールアドレスのフォントサイズ */
  font-weight: 700; /* メインメールアドレスのフォント太さ */
}

.support-note {
  font-size: 0.75rem; /* サポートノートのフォントサイズ */
  color: #666666; /* サポートノートの文字色 */
}

.support-text {
  margin-top: 1rem; /* サポートテキストの上マージン */
}

    /* Carousel Item for Large Screens */
    @media (min-width: 992px) {
      .carousel-item img {
        height: 75vh; /* 画像の高さを75vhに設定（デスクトップサイズ） */
        max-width: 100%; /* 画像の最大幅を100%に設定 */
        object-fit: cover; /* 画像の切り取り方を設定 */
      }
    }

/* ******************************************** */
/* * ページ: メンバー                          * */
/* ******************************************** */
/*各ページタイトル*/
#page-title {
    margin-top: 50px;
    padding-top: 60px;
}

#page-title h2 {
    text-align: left;
    font-size: 4rem;
    letter-spacing: 0.15rem;
    margin-bottom: 30px;
}
/*ページ調整*/
#page {
    padding-top: 20px;
    margin-bottom: 3rem;
}

#page h3 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 20px;
}
#page .category{
    padding-bottom: 3rem;
    border-bottom: 1px #000 solid;
}



/* カテゴリセクション */
.category {
    margin-bottom: 4rem;
}
/* カテゴリセクション */
.category:last-child {
    margin-bottom: 10rem;
}

/* 名前のスタイル */
#page h4 {
    color: var(--font-base-color);
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 0.15rem;
    margin-bottom: -5px;
}

.text-center h3{
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 900;
}


.description {
  text-align: left;
  margin-bottom: 6rem;
}

    /* Carousel Item for Large Screens */
    @media (max-width: 991px) {
      #l-About_us .description {
            padding-left: 30px;
            padding-right: 30px;
      }
    }
/* ******************************************** */
/* * ページ: news                              * */
/* ******************************************** */
#page-style #l-NEWS {
    width: 100vw;
    height: 100vh;
    display: flex;
}

/* ******************************************** */
/* * ページ: Contact                           * */
/* ******************************************** */
#page-style #l-Contact {
    width: 100vw;
    height: auto;
    display: flex;
}

/* ******************************************** */
/* * ページ: about us                          * */
/* ******************************************** */

#l-About-us_top .full-screen-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255); /* 背景色を白に設定 */
    background-image: url('/images/common/about_us_bg1.png'); /* 画像を背景に追加 */
    background-size: cover; /* 画像をコンテナに合わせてリサイズ */
    background-position:bottom; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像の繰り返しをなしにする */
    box-sizing: border-box;
}

#l-About-us_top .content {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    border: 100px solid white; /* 上下左右の枠幅 */
    border-bottom: none; /* 下側の枠をなしにする */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 内側のドロップシャドウを表示するために必要 */
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2); /* 内側のドロップシャドウを追加 */
}

#l-About-us_top h1 {
    font-size: 2rem; /* h1のフォントサイズ */
    color: #333; /* h1の文字色 */
    /*display: flex;  SVGとテキストを横並びにするためにフレックスボックスを使用 */
    align-items: center; /* 垂直方向のセンタリング */
}

#l-About-us_top h1 svg {
    margin-right: 20px; /* SVGとテキストの間にスペースを追加 */
    width: 100%;
}

    /* Carousel Item for Large Screens */
    @media (max-width: 991px) {
        #l-About-us_top .content {
        border: 50px solid white; /* 上下左右の枠幅 */

    border-bottom: none; /* 下側の枠をなしにする */
        
    }
        #l-About-us_top h1 svg {
        content: none; /* 区切り線を非表示にする */
        padding: 0 20px;
        }
    }

#about_us_arrow-down{
    position: absolute;
    bottom: 50px;
    right: 50%;
}


/* ******************************************** */
/* * ページ: Content                           * */
/* ******************************************** */
/*フィルター*/
.filter-tags{
    margin-bottom: 1rem;
}
.filter-tags .btn{
    border-radius: 6px; /* 角の丸さを調整する値 */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height:1.5rem;
}



#l-Content .card {
    border-radius: 10px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    margin-bottom: 2rem;
}

.no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: #666;
    text-align: center;
}

.card-img-container {
    position: relative;
    overflow: hidden; /* 画像がコンテナからはみ出さないようにする */
    border-radius: 20px; /* 左上と右上の角を丸くする */
    aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
    width: 100%; /* コンテナの幅を親要素に合わせる */
    height: auto; /* 高さを自動で調整 */
    background-color: aqua;
}

.card-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がコンテナ全体にフィットするように設定 */
}

.card-body{
    padding: 0 16px;
}

#l-Content .content-title {
    font-size: 1.35rem;
    font-weight: 900;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
#l-Content .content-client.list-group-item{
    font-size: 1rem;
    color: #adadad;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ddd; /* 下線を追加 */
    padding-bottom: 0.5rem; /* 下線とのスペース */
}
#l-Content .list-group-item {
    border: none;
    padding: 0;
    margin-bottom: -0.2rem;
    font-size: 1rem;
    font-weight: 400;
}
    #l-Content .list-group-item:last-child {
        margin-bottom: 2rem;
    }
#l-Content .content-text {
    font-size: 0.9rem;
    color: #adadad;
    margin-bottom: 0.5rem;
}



.filter-container {
    margin-bottom: 20px;
}
.filter-tags .btn {
    margin-right: 5px;
}