@charset "utf-8";
/* CSS Document */

/* ===============================================
   タイトルエリア
   =============================================== */

#container {
    background-color: black;
    color: white;
}

/* 共通レイアウト */
.inner-content {
    max-width: 1280px; /* 画像の例から取得した最大幅 */
    margin: 0 auto;    /* 左右のマージンをautoにして中央寄せ */
    box-sizing: border-box; /* paddingを含めてwidthを計算 */
    display: flex; /* fan-title-textとfan-title-dateを横並びにするため */
    justify-content: space-between; /* 左右に配置 */
    align-items: center; /* 垂直中央揃え */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* メインタイトル */
.fan-title {
    background-image: url('/202407/fujitsu-technology-update-2025/images/ftu-title-color.png');
    background-size: cover;
    padding-top: 0px; /* 上下のパディングはfan-title自体に設定 */
    padding-bottom: 0px;
    color: #FFFFFF;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.fan-title .fan-title-text h3 {
    font-size:28px;
    margin-top:29px;
    margin-bottom:28px;
    font-weight: 700;
    height: 33px;
    line-height: 1.3;
}
.fan-title .fan-title-date h3 {
    font-size: 24px;
    margin-top:31px;
    margin-bottom:30px;
    margin-right: 10px;
    font-weight: 700;
    height: 29px;
    line-height: 1.3;
}

/* セカンダリタイトル */
.fan-second-title {
    background-color: black;
    padding-top: 64px; /* 上下のパディングはfan-second-title自体に設定 */
    padding-bottom: 26px;
    color: white;
    line-height: 1.5; /* 必要に応じて調整 */
}

.fan-second-title .inner-content .fan-second-content-block {
    flex-grow: 1; /* inner-content の残りのスペースを全て占めるようにする */
    text-align: center; /* このブロック内のh2とpのテキストを中央揃えにする */
    padding-left: 2rem;
    padding-right: 2rem;
}

.fan-second-title .inner-content .fan-second-content-block .line-one {
    font-size: 28px; /* 必要に応じてh2のスタイルをここで再定義 */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px; /* ここで12pxの隙間を設定 */
}

.fan-second-title .inner-content .fan-second-content-block .line-two {
    font-size: 28px; /* 必要に応じてh2のスタイルをここで再定義 */
    font-weight: 700;
    line-height: 1.2;
}

/* ===============================================
   技術エリア - レイアウト
   =============================================== */

.main-contents .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px;
}

@media only screen and (max-width: 1440px) {
    .main-contents .section-inner {
        max-width: 1320px;
        margin: 0 0;
        padding-left: 120px;
    }
}

@media only screen and (max-width: 1320px) {
    .main-contents .section-inner {
        max-width: 790px;
        margin: 0 auto;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 1030px) {
    .main-contents .section-inner {
        max-width: 910px;
        margin: 0 0;
        padding-left: 120px;
    }
}

@media only screen and (max-width: 910px) {
    .main-contents .section-inner {
        max-width: 380px;
        margin: 0 auto;
        padding-left: 0px;
    }
}

/* グリッドレイアウト */
.lay-3col>* {
    width: 380px;
    margin: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lay-3col li:nth-child(3n+1) {
    margin: 20px 15px 20px 0px;
}

.lay-3col li:nth-child(3n) {
    margin: 20px 0px 20px 15px;
}

@media only screen and (max-width: 1320px) {
    .lay-3col li:nth-child(odd) {
        margin:20px 15px 20px 0px;
    }

    .lay-3col li:nth-child(even) {
        margin:20px 0px 20px 15px;
    }
}

@media only screen and (max-width: 910px) {
    .lay-3col li {
        margin: 20px 0px !important;

    }
}

.section.relation {
    background: black;
}

.section.relation li {
    box-shadow: none;
    border: none;
    transition: border-color .2s;
    min-height: 518px; /* 例: カードの最小高さを設定 (コンテンツがこれより少ない場合はこの高さ) */
    display: flex;
    flex-direction: column;
}

/* 旧パネル構造（レガシー） */
.section.relation .lay-3col li a {
    display: flex;
    flex-direction: column;
    /* height: 100%; を削除し、Flexboxに高さを任せる */
    /* フレックスアイテムはデフォルトで親の高さに伸びようとします */
    /* あるいは min-height: 100%; も検討 */
    flex-grow: 1; /* 親のliが伸びる場合、aも伸びるように */
    width: 100%;
}

.panel_box {
    background: black;
    color: white;
    display: flex;
    flex-direction: column;
    /* height: 100%; を削除し、Flexboxに高さを任せる */
    flex-grow: 1; /* 親のaが伸びる場合、panel_boxも伸びるように */
    width: 100%;
    position: relative;
    overflow: hidden;
}

.panel_box:hover img {
    transform: scale(1.125);
    transition: transform .5s ease;
}

/* ===============================================
   技術エリア - パネル要素
   =============================================== */

/* パネル画像 */
.panel_img {
    position: relative; /* 子要素の絶対配置の基準にする */
    flex-shrink: 0;
    /* height は固定のまま img のサイズを管理 */
    height: 240px; /* 例: 画像エリアの高さを固定 */
    overflow: hidden;
    background-color: black;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex; /* Flexboxを有効にする */
    flex-direction: column; /* 項目を縦に並べる */
    align-items: flex-start; /* 項目を左端（Flexの開始位置）に揃える */
    padding-top: 16px;    /* Flexコンテナの余白として設定 */
    padding-left: 16px;   /* Flexコンテナの余白として設定 */
}

.panel_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    /* Flexアイテムとなった場合に、imgがラベルの後ろにくるように調整 */
    position: absolute; /* imgはFlexboxの配置から外して絶対配置にする */
    top: 0;
    left: 0;
    z-index: 0; /* ラベルよりも下に配置 */
}

/* 画像ラベル */
/* 汎用的なラベルスタイル */
.panel_img .label {
    width: 205px; /* ★推奨: ラベル画像の幅に合わせて調整 */
    height: 28px; /* ★推奨: ラベル画像の高さに合わせて調整 */
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 4px; /* ラベル間に4pxの余白を追加 */
    position: relative; /* z-indexを有効にするためと、他の要素との重なりを意識 */
    z-index: 1; /* imgの上に表示 */
    top: unset;
    left: unset;
}

/* 各ラベルの個別のスタイル */
.panel_img .label-ai {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_ai.png');
}
.panel_img .label-computing {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_computing.png');
}
.panel_img .label-converging_tech {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_converging_tech.png');
    width: 240px;
}
.panel_img .label-data_security {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_data_security.png');
}
.panel_img .label-network {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_network.png');
}
.panel_img .label-quantum {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_quantum.png');
}
.panel_img .label-space {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_space.png');
}
.panel_img .label-spatial_robotics {
    background-image: url('/202407/fujitsu-technology-update-2025/images/tag_spatial_robotics.png');
}

/* パネルコンテンツ */
.panel-content {
    flex-grow: 1; /* 残りのスペースを埋める */
    padding: 20px;
    line-height: 1.3;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background-color: #1C1D21;
}

/* サブタイトル */
.panel_subtitle {
    font-size: 24px;
    padding-bottom: 16px;
    height: 103px;
    font-weight: 700;
}

.panel-lead {
    font-size: 16px;
    height: 114px;
    padding-bottom: 10px;
    line-height: 1.6;
}

/* ===============================================
   技術エリア - 新パネル構造
   =============================================== */

/* パネル詳細セクション */
.panel-details {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */
}

/* 画像のクリック無効化 */
.panel-details .panel_img {
    cursor: default;
}

.panel-details .panel_img img {
    pointer-events: none;
}

/* パネルアクションセクション */
.panel-actions {
    padding: 0px 20px 20px 20px;
    background-color: #1C1D21;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* ===============================================
   技術エリア - ボタンとリンク
   =============================================== */

/* 技術概要ボタン */
.tech-overview-button {
    display: block;
    margin: 0 auto;
    padding: 0px 0px;
    height: 56px;
    line-height: 56px;
    background-size: cover;
    background-image: url('/202407/fujitsu-technology-update-2025/images/ftu-tech-btn.png');
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px !important;
    font-weight: 700;
    transition: background-color 0.3s;
    width: fit-content;
    text-align: center;
}

.tech-overview-button:hover {
    filter: brightness(1.2);
    text-decoration: none;
}

/* テックブログリンク */
.tech-blog-link {
    margin-top: 20px;
    text-align: left;
}

.tech-blog-link p {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #9CE2C8;
    font-weight: 700;
}

.tech-blog-link a {
    color: #9CE2C8;
    text-decoration: underline;
    text-decoration-color: #9CE2C8;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.tech-blog-link a:hover {
    text-decoration: underline;
}

/* プレスリリース */
.press-link {
    margin-top: 20px;
    text-align: left;
}

.press-link p {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #FFB84D;
    font-weight: 700;
}

.press-link a {
    color: #FFB84D;
    text-decoration: underline;
    text-decoration-color: #FFB84D;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.press-link a:hover {

    text-decoration: underline;
}

/* ===============================================
   レスポンシブデザイン
   =============================================== */

@media (max-width: 768px) {
    .inner-content {
        text-align: center;
        padding-left: 1rem; /* 小さい画面での左右パディング */
        padding-right: 1rem;
    }

    .fan-title .fan-title-text h3 {
        margin-top:10px;
        margin-bottom: 15px;
    }

    .fan-title .fan-title-date h3 {
        margin-top:10px;
        margin-bottom: 10px;
    }
   
    .fan-second-title {
        padding-top:26px;  
        padding-bottom:26px;  
    }
}

@media (max-width: 480px) {
    .inner-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 15px;
    }

    .fan-title .fan-title-text h3 {
        font-size:22px;
        margin-top:9px;
        margin-bottom: 12px;
    }

    .fan-title .fan-title-date h3 {
        font-size:19px;
        margin-top:0px;
        margin-bottom: 9px;
    }

    .fan-second-title .inner-content .fan-second-content-block .line-one {
        font-size:22px;
    }
    .fan-second-title .inner-content .fan-second-content-block .line-two {
        font-size:22px;
    }
    
    .fan-second-title {
        padding-top:15px;  
        padding-bottom:15px;
    }

    .panel_subtitle{
        font-size:19px;
    }

    .panel-lead{
        font-size:15px;
    }

    .panel-actions {
        font-size:15px;
    }     
    .tech-overview-button {
        font-size: 15px
    }

    .tech-blog-link p {
        font-size: 15px;
    }

    .tech-blog-link a {
        font-size: 15px;
    }
    .press-link p {
        font-size: 15px;
    }

    .press-link a {
        font-size: 15px;
    }
}
/* ===============================================
    更新履歴エリア
   =============================================== */

.main-contents .update_history {
    max-width: 1120px;
    margin: 0 auto;
    padding: 30px 0px 30px 0px;
}

@media only screen and (max-width: 1440px) {
    .main-contents .update_history {
        max-width: 1280px;
        margin: 0 0;
        padding-left: 160px;
    }
}

@media only screen and (max-width: 1320px) {
    .main-contents .update_history {
        max-width: 710px;
        margin: 0 auto;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 1030px) {
    .main-contents .update_history {
        max-width: 860px;
        margin: 0 0;
        padding-left: 160px;
    }
}

@media only screen and (max-width: 910px) {
    .main-contents .update_history {
        max-width: 300px;
        margin: 0 auto;
        padding-left: 0px;
    }
}

.update_history .title {
    font-weight: 700;
    padding-bottom: 10px;
    font-size: 16px;
    height: 29px;
    line-height: 1.3;
}

.update_history #article-list {
    list-style: none;
    padding: 8px 0px;
    margin: 0;
    border-top: 1px solid #EFEFF2;
    border-bottom: 1px solid #EFEFF2;
    font-size: 16px;
}

/* 記事設定 */
#article-list .article-item {
    /* 記事一覧に共通スタイルを適用する場合に設定 */
}

/* 行のflex設定 */
.update_history .article-content-flex {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    width: fit-content;
}

/* 日付のflex設定 */
.update_history #article-list .article-date {
    flex-shrink: 0;
    width: 134px; 
    margin-right: 20px;
}

/* リンクがある場合のスタイル */
.article-link-wrapper {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* リンクがない場合のスタイル */
.non-linked-item {
    cursor: default;
}

/* リンクがある行をホバーした時の共通効果 */
.article-link-wrapper:hover {
    color: white;
    text-decoration: none;
}

/* リンクがない行をホバーした時の共通効果 */
.non-linked-item:hover {
    /* ホバー時の効果が必要な場合は設定 */
}

/* リンクがある行をホバーした時の日付個別の効果 */
.article-link-wrapper:hover .article-date {
}

/* リンクがある行をホバーした時のタイトル個別の効果 */
.article-link-wrapper:hover .article-title-container {
    text-decoration: underline;
}

/* ボタン設定 */
.update_history .pagination {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    height: 48px;
}

.update_history .pagination button {
    display: flex;
    background-color: rgba(239, 239, 242, 0.2);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    width: 106px;
    text-align: center;
    outline: none;
    align-items: center;
    height: 100%;
}

.update_history .pagination button:disabled {
    background-color: rgba(239, 239, 242, 0.08);
    color: #5f5f5f;
    cursor: not-allowed;
}

.update_history #prev-button .button-icon {
    flex: 0 0 15%;
    object-fit: none;
    transition: filter 0.3s ease;
}

.update_history #prev-button .button-text {
    flex: 0 0 85%;
    text-align: center;
}

.update_history #next-button .button-icon {
    flex: 0 0 15%;
    object-fit: none;
    transition: filter 0.3s ease;
}

.update_history #next-button .button-text {
    flex: 0 0 85%;
    text-align: center;
}

.update_history #page-info {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.update_history .pagination button:not(:disabled):hover {
    background-color: rgba(239, 239, 242, 0.4);
}

.no-articles,
.error-message {
    padding: 10px 15px;
    color: white;
    text-align: center;
}

#main {
    font-family: "Fujitsu Infinity Pro", Meiryo, Arial, Verdana, Lucida Grande, "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
}