@font-face {
    font-family: 'maka';
    src: url('fonts/maka.ttf') format('truetype');
    /* フォントのパスを指定 */
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 10px;
    /* より小さな文字サイズ */
}




/* ☆☆☆☆☆☆☆☆☆☆☆☆スマホ版☆☆☆☆☆☆☆☆☆☆☆☆ */
@media (max-width: 700px) {








    /* ------------------<div class="background-image">------------------ */
    .background-image {
        height: 100vh;
        /* ビューポートの高さいっぱいに広がるように設定 */
        overflow: hidden;
        /* 内容がはみ出たときに隠す */
    }

    .background-image img {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ビデオを親要素に合わせてカバーする */
        z-index: -1;
        /* コンテンツよりも背面に配置 */
        opacity: 0;
        /* 初期は非表示 */
        transition: opacity 2s ease-in-out;
        /* フェードのトランジション */
    }

    .background-image img.visible {
        opacity: 1;
        /* 表示されるときの不透明度 */
    }

    /* ------------------<div class="background-image">------------------ */





    /* ------------------<div class="cow-header">------------------ */
    .cow-header {
        pointer-events: none;
        /* クリックを無効化 */
        opacity: 0;
        /* 初期状態は透明 */
        max-width: 600px;
        /* 最大幅を600pxに制限 */
        position: fixed;
        top: 50%;
        /* 親要素の中央に配置 */
        left: 50%;
        /* 親要素の中央に配置 */
        width: 95%;
        /* 親要素の幅の80% */
        height: 100%;
        /* 親要素の高さの80% */
        transform: translate(-50%, -50%);
        background-color: rgba(12, 12, 36, 0.8);
        /* ネイビーの半透明背景色 */
        text-align: center;
        z-index: 10;
        /* 他の要素より手前に表示 */
        color: #DDDDDD;
        border-radius: 60px;
        /* 角を丸くする */
        transition: opacity 0.5s ease;
        /* アニメーションを追加 */
        overflow: auto;
        /* コンテンツがオーバーレイの外にはみ出た場合にスクロールする */
        font-family: 'Roboto', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header-content {
        width: 80%;
        height: 100%;
        padding: 30px 0px;
        margin: 30px auto;
        /* 水平方向に中央寄せ */
    }

    .cow-header.active {
        opacity: 1;
        /* 表示時に不透明にする */
        pointer-events: auto;
        /* クリックを有効化 */
    }

    .cow-header-image {
        height: auto;
        /* 高さは自動調整 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        margin: 20px 0px;
    }

    .cow-header-image img {
        width: 80%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }

    .cow-header h1 {
        font-size: 24px;
        margin: 2px 0px;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h2 {
        font-size: 18px;
        margin: 2px 0px;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h3 {
        font-size: 16px;
        margin-top: 0px;
        /* 上側のマージンを2pxに設定 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: gray;
        /* 文字色をグレーにする */
        letter-spacing: 0.5em;
        /* 文字の間隔を広げる */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h4 {
        font-size: 12px;
        margin: 10px 0px;
        color: gray;
        /* 文字色をグレーにする */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h5 {
        font-size: 12px;
        margin-top: 0px;
        /* 上側のマージンを2pxに設定 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: gray;
        /* 文字色をグレーにする */
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }



    .cow-header h7 {
        font-size: 10px;
        padding: 50px 0px;
        font-family: 'Roboto', sans-serif;
        /* Makaフォントを適用 */
    }


    .cow-header p {
        font-size: 11px;
        margin: 5px 0px;
        color: #CCCCCC;
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
    }


    .cow-header-articlexx-frame {
        margin: 10px 0px;
        /* 上下の余白 */
        padding: 10px 0px;
        /* 上下の余白 */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .cow-header-articlexx-title {
        margin: 10px 10px;
        /* 上下の余白 */
    }

    .cow-header-articlexx-frame h1 {
        font-size: 16px;
        margin: 5px 0;
    }

    .cow-header-articlexx-frame h3 {
        font-size: 12px;
        margin: 2px 0;
    }

    .cow-header-articlexx-frame p {
        font-size: 10px;
        margin: 2px 0;
        /* 上下のマージンを設定 */
        line-height: 1.5;
        /* 行間の余白を設定 */
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
    }



    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 30px;
        font-weight: bold;
        color: #CCCCCC;
    }


    /* ------------------<div class="cow-header">------------------ */


    /* ------------------<div class="header">------------------ */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
        background-color: rgba(150, 150, 150, 0.8);
        /* 透明度を設定した背景色 */
        color: white;
        height: 5vh;
        /* ビューポートの5%の高さ */
        box-shadow: 0 4px 50px rgba(0, 0, 0, 0.1);
        /* 下に影をつける */
        position: fixed;
        /* スクロールしても固定 */
        top: 0;
        /* ページの上部に固定 */
        width: 100%;
        /* 横幅を画面いっぱいに設定 */
        max-width: 600px;
        /* 最大幅を600pxに制限 */
        left: 50%;
        /* 水平方向の中央に配置 */
        transform: translateX(-50%);
        /* 自身の幅の半分だけ左にずらして中央揃え */
        z-index: 5;
        /* 他の要素より前面に表示 */
    }

    .niyasaka-header-image {
        flex: 3;
        /* 左側の要素を全体の2/10 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        padding-left: 15px;
    }

    .niyasaka-header-image img {
        width: 100%;
        /* 親要素の幅の100%に設定 */
        border-radius: 5px;
        /* 角丸 */
    }

    .logo h1 {
        margin: 0;
    }

    .nav-menu {
        flex: 7;
        /* 右側の要素を全体の8/10 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        padding: 0px 10px;
    }

    .nav-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        /* 子要素を水平方向に右寄せにする */
    }

    .nav-menu ul li {
        display: flex;
        /* フレックスボックスを使用 */
        justify-content: center;
        /* 水平方向に中央揃え */
        align-items: center;
        /* 垂直方向に中央揃え */
        padding: 0px 0px;
        /* 横のパディングはそのまま */
    }

    .nav-menu ul li h1 {
        margin: 0px 0px;
        font-size: 12px;
        text-align: center;
        /* テキストの中央揃え */
        white-space: nowrap;
        /* テキストの改行を防ぐ */
    }

    .nav-menu ul li h2 {
        margin: 0px 0px;
        font-size: 8px;
        color: #CCCCCC;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
        text-align: center;
        /* テキストの中央揃え */
        white-space: nowrap;
        /* テキストの改行を防ぐ */
    }

    .nav-menu ul li a {
        text-decoration: none;
        color: white;
        padding: 5px 5px;
        transition: background-color 0.7s ease;
        /* 背景色と角丸の変化を0.3秒かけてスムーズに */
    }

    .nav-menu ul li a:hover {
        background-color: #555;
        border-radius: 5px;
    }

    /* ------------------<div class="header">------------------ */

    /* ------------------<div class="mainpage">------------------ */
    .mainpage {
        max-width: 600px;
        /* 最大幅を600pxに制限 */
        margin: 0px auto;
        /* 中央寄せするためのマージン */
        position: absolute;
        /* 要素を絶対位置に配置 */
        top: 0;
        /* 親要素の上端に合わせる */
        left: 50%;
        /* 親要素の中央に配置 */
        transform: translateX(-50%);
        /* 水平方向に中央に移動 */
        z-index: 1;
        /* ビデオより手前に配置 */
        text-align: center;
        /* 中央揃え */
        width: 100%;
        /* 親要素の幅の100%に設定 */
        color: black;
        /* 文字色を黒に設定 */
    }

    /* ------------------<div class="mainpage">------------------ */

    /* ------------------<div class="top-style">------------------ */
    .top-style {
        display: flex;
        /* Flexbox を使用 */
        justify-content: center;
        /* 水平方向（横）の中央揃え */
        align-items: center;
        /* 垂直方向（縦）の中央揃え */
        flex-direction: column;
        /* 子要素を縦方向に並べる */
        margin: 0 auto;
        /* 横方向の中央揃え */
        text-align: center;
        /* 中央揃え */
        color: black;
        /* テキスト色 */
        width: 100%;
        /* 親要素の幅の80%に設定 */
        background-color: rgba(244, 244, 244, 0.8);
        /* 透明度を設定した背景色 */
        padding-top: 100px;
    }

    /* ------------------<div class="top_style">------------------ */


    .container {
        margin: 0 auto 20px;
        /* 上は0px、下は20px、水平方向は自動で中央寄せ */
        padding: 5px 20px;
        background-color: rgba(244, 244, 244, 0.8);
        /* 透明度を設定した背景色 */
        text-align: center;
        /* 文字を左寄せに設定 */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .niyasaka-top-style-image {
        display: flex;
        /* フレックスボックスの設定を追加 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        padding: 0px 0px;
        width: 100%;
        /* 親要素の幅の80%に設定 */
    }

    .niyasaka-top-style-image img {
        width: 100%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }


    .gradient-overlay {
        width: 100%;
        height: 10vh;
        /* ビューポートの高さいっぱいに設定 */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(244, 244, 244, 1) 100%);
        /* 上から下への透明から不透明へのグラデーション */
        opacity: 0.8;
        /* オーバーレイの不透明度 */
    }






    /* ------------------------------------<div class="video-container">------------------------------------ */

    .video-container {
        width: 80%;
        margin: 0 auto;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 10px;
        text-align: center;
    }

    /* 動画自体のスタイル */
    .video-container video {
        width: 100%;
        height: auto;
        border-radius: 10px;
        pointer-events: none;
        /* コントロール非表示中は操作不可 */
    }

    /* ------------------------------------<div class="video-container">------------------------------------ */
    /* ------------------------------------<div class=".pc-box01">------------------------------------ */


    .box02 {
        padding: 10px;
        font-family: 'Roboto', sans-serif;
    }

    .box02 p {
        font-size: 8px;
        margin: 0px;
        /* 上下マージンを統一 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: #555;
        letter-spacing: 0.5em;
    }

    /* ------------------------------------<div class=".pc-box01">------------------------------------ */

    .profile p {
        font-size: 8px;
        margin: 10px;
        /* 上下マージンを統一 */
        color: #555;
        letter-spacing: 0.5em;
        font-family: 'Roboto', sans-serif;
    }


    /* ------------------------------------<div class="cow-grid">------------------------------------ */

    .cow-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2列のグリッドを作成 */
        gap: 5px;
        /* グリッドアイテム間の間隔 */
        padding: 0px;
        /* グリッド全体の内側の余白 */
        margin: 5px;
        /* グリッド全体の内側の余白 */
    }

    .cow-widget {
        position: relative;
        /* 子要素を相対的に配置するための基準 */
        height: 150px;
        /* div1の高さ */
        display: flex;
        justify-content: center;
        /* 横方向中央寄せ */
        align-items: center;
        /* 縦方向中央寄せ */
        cursor: pointer;
        /* クリック可能にする */
    }

    .cow-widget-background-image {
        z-index: 2;
        /* div2 は div1 の下に配置 */
        position: absolute;
        /* 絶対位置指定 */
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        overflow: hidden;
        /* はみ出た部分を隠す */
    }

    .cow-widget-background-image img {
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        object-fit: cover;
        /* 画像のアスペクト比を保ちながら親要素に収まるように */
        border-radius: 5px;
        /* 角丸 */
        filter: brightness(0.9);
        /* 明るさを20%下げる */
    }

    .cow-widget-content {
        z-index: 3;
        /* div1 を div2 の上に重ねる */
        padding: 5px;
        position: absolute;
        /* 絶対位置指定 */
        align-items: center;
        /* 中央寄せ */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .cow-widget-content h3 {
        font-size: 16px;
        margin: 0px 0;
        color: white;
        /* 白色に設定 */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        /* 影の設定 */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }


    /* ------------------------------------<div class="cow-grid">------------------------------------ */

    /* ------------------------------------<div class="member-frame">------------------------------------ */

    .member-widget {
        padding: 10px;
        /* 上下左右の余白 */
        margin: 10px 0;
        /* 上下左右の余白 */
        background-color: rgba(0, 0, 0, 0.1);
        /* 背景色を黄緑の透明度80%に設定 */
        color: black;
        /* 文字色を白に設定 */
        border-radius: 5px;
        /* 角丸 */
    }

    .member-image-with-description {
        display: flex;
        /* Flexboxを使用して子要素を横並びにする */
        align-items: stretch;
        /* 子要素の高さを揃える */
        align-items: center;
        /* 中央寄せ */
        margin: 5px 0;
        /* 上下の余白 */
    }

    .member-image-container {
        flex: 4;
        /* 左側の画像コンテナがフレックスアイテム内で自動的に伸縮する */
        display: flex;
        /* 子要素をフレックスコンテナにする */
        justify-content: flex-start;
        /* 子要素を左揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央寄せする */
    }

    .member-image-container img {
        width: 90%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }

    .member-description {
        flex: 6;
        /* 右側の説明文コンテナがフレックスアイテム内で自動的に伸縮する */
        padding: 0px 10px;
        /* 左右のパディング */
        line-height: 1.4;
        /* 行間を1.5倍に設定 */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .member-description h3 {
        font-size: 16px;
        margin: 8px 0;
    }

    .member-description h4 {
        font-size: 12px;
        margin: 8px 0;
    }

    .member-description h5 {
        font-size: 10px;
        margin: 4px 0;
    }


    .member-description p {
        font-size: 10px;
        margin: 5px 0;
    }

    .member-frame {
        margin: 10px 0;
    }


    .member-frame h2 {
        font-size: 12px;
        margin: 0px 0;
    }

    /* ------------------------------------<div class="member-frame">------------------------------------ */





    .widget {
        position: relative;
        /* 子要素を相対的に配置するための基準 */
        height: 120px;
        /* div1の高さ */
        display: flex;
        justify-content: center;
        /* 横方向中央寄せ */
        align-items: center;
        /* 縦方向中央寄せ */
    }


    .widget-background-image {
        z-index: 2;
        /* div2 は div1 の下に配置 */
        position: absolute;
        /* 絶対位置指定 */
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        background-image: url('image03.jpg');
        /* 背景画像の設定 */
        background-size: cover;
        /* 背景画像を要素全体にカバーさせる */
        background-position: center;
        /* 背景画像を中央寄せする */
        opacity: 0.8;
        /* 背景画像の透明度を設定（0.5で50%の透明度） */
    }


    .widget-content {
        z-index: 3;
        /* div1 を div2 の上に重ねる */
        padding: 20px;
        position: absolute;
        /* 絶対位置指定 */
        align-items: center;
        /* 中央寄せ */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .widget-content h3 {
        font-size: 1.5em;
        margin: 0px 0;
    }







    .horizontal-line {
        border-top: 1px solid #FFF;
        /* 黒色の水平線 */
        margin-top: 20px;
        /* 上の余白 */
        margin-bottom: 20px;
        /* 下の余白 */
    }

    .profile-image-container06 {
        width: 80%;
        display: flex;
        justify-content: center;
        /* 横方向の中央寄せ */
        align-items: center;
        /* 縦方向の中央寄せ */
        margin: 0 auto
    }

    .profile-image-container06 img {
        max-width: 100%;
        /* 画像の最大幅を設定 */
        max-height: 100%;
        /* 画像の最大高さを設定 */
    }


    .gray-line {
        height: 0.5px;
        /* ラインの高さ */
        width: 100%;
        /* ラインの幅 */
        background-color: gray;
        /* ラインの色 */
        margin: 5px 0;
        /* 上下の余白 */
    }


    /* ------------------<フッター>------------------ */

    /* フッター全体のスタイル */
    footer {
        padding: 20px 0;
        /* 上下の余白を追加 */
        text-align: center;
        /* テキストを中央寄せ */
        font-family: 'Noto Serif JP', sans-serif;
        color: #111;
    }

    /* フッター内コンテンツのスタイル */
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 要素を中央寄せ */
        justify-content: center;
        max-width: 1200px;
        /* 最大幅 */
        margin: 0 auto;
        /* 横方向の中央寄せ */
    }

    /* キャッチフレーズのスタイル */
    .footer-company-info p {
        font-size: 14px;
        /* キャッチフレーズのフォントサイズ */
        font-weight: bold;
        /* 太字で強調 */
        color: #555;
        /* 文字色を中間のグレーに */
        margin-top: 2px;
        /* 上に余白を追加 */
        margin-bottom: 4px;
        /* 下に余白を追加 */
    }

    /* 会社名のスタイル */
    .footer-company-info .company-name {
        font-size: 24px;
        /* 会社名を大きく表示 */
        font-weight: bold;
        /* 太字にして強調 */
        margin-top: 4px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
        color: #333;
        /* 文字色をダークグレーに */
    }

    /* 英語名のスタイル */
    .footer-company-info .company-english-name {
        font-size: 12px;
        /* 英語名のフォントサイズをやや小さめに */
        font-weight: normal;
        /* 標準の太さ */
        margin-top: 0px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
        color: #666;
        /* 文字色を薄めのグレーに */
    }

    /* フッター全体のレイアウト調整 */
    .footer-company-info {
        text-align: center;
        /* フッター内のテキストを中央寄せ */
        padding-top: 20px;
        /* 上に余白を追加 */
        padding-bottom: 10px;
        /* 下に余白を追加 */
    }

    /* 連絡先のスタイル */
    .footer-contact-info {
        margin: 10px 0;
        /* 上下の余白 */
    }

    .footer-contact-info p {
        margin: 0;
        /* 上下の余白 */
    }

    /* フッター内のロゴ画像 */
    .footer-logo img {
        width: 100%;
        /* 横幅を親要素の100%に */
        max-width: 200px;
        /* 最大幅を600pxに制限 */
        height: auto;
        /* 縦幅は自動調整 */
        margin-top: 0px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
    }

    /* フッター内のリンク */
    .footer-contact-info a {
        text-decoration: none;
        /* アンダーラインを削除 */
    }

    .footer-contact-info a:hover {
        text-decoration: underline;
        /* マウスオーバー時にアンダーライン表示 */
    }

    /* ソーシャルメディアのリンク */
    .footer-social {
        margin-top: 10px;
    }

    .footer-social img {
        width: 20px;
        /* アイコンのサイズ */
        height: auto;
        /* 高さを統一 */
        margin: 0 10px;
        /* アイコン間のスペース */
    }

    .footer-social a {
        display: inline-block;
    }

    /* 著作権情報のスタイル */
    .footer-copyright {
        padding: 10px 0;
        /* 上下の余白 */
        margin-top: 20px;
        /* 上側の余白 */
        width: 100%;
        text-align: center;
        /* 中央寄せ */
        font-size: 8px;
        /* フォントサイズを指定 */
    }

    /* ------------------<フッター>------------------ */

    a {
        text-decoration: none;
        /* 下線をなくす */
        color: inherit;
        /* 親要素の色を継承する */
    }





}

/* ☆☆☆☆☆☆☆☆☆☆☆☆スマホ版☆☆☆☆☆☆☆☆☆☆☆☆ */



















/* ☆☆☆☆☆☆☆☆☆☆☆☆PC☆☆☆☆☆☆☆☆☆☆☆☆ */
@media (min-width: 701px) {




    /* ------------------<div class="background-image">------------------ */
    .background-image {
        height: 100vh;
        /* ビューポートの高さいっぱいに広がるように設定 */
        overflow: hidden;
        /* 内容がはみ出たときに隠す */
    }

    .background-image img {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ビデオを親要素に合わせてカバーする */
        z-index: -1;
        /* コンテンツよりも背面に配置 */
        opacity: 0;
        /* 初期は非表示 */
        transition: opacity 2s ease-in-out;
        /* フェードのトランジション */
    }

    .background-image img.visible {
        opacity: 1;
        /* 表示されるときの不透明度 */
    }

    /* ------------------<div class="background-image">------------------ */





    /* ------------------<div class="cow-header">------------------ */
    .cow-header {
        pointer-events: none;
        /* クリックを無効化 */
        opacity: 0;
        /* 初期状態は透明 */
        position: fixed;
        top: 50%;
        /* 親要素の中央に配置 */
        left: 50%;
        /* 親要素の中央に配置 */
        width: 95%;
        /* 親要素の幅の80% */
        height: 100%;
        /* 親要素の高さの80% */
        transform: translate(-50%, -50%);
        background-color: rgba(12, 12, 36, 0.8);
        /* ネイビーの半透明背景色 */
        text-align: center;
        z-index: 10;
        /* 他の要素より手前に表示 */
        color: #DDDDDD;
        border-radius: 60px;
        /* 角を丸くする */
        transition: opacity 0.5s ease;
        /* アニメーションを追加 */
        overflow: auto;
        /* コンテンツがオーバーレイの外にはみ出た場合にスクロールする */
        font-family: 'Roboto', sans-serif;
        /* Makaフォントを適用 */
        max-width: 600px;
        /* 最大幅を600pxに制限 */
    }

    .cow-header-content {
        width: 80%;
        height: 100%;
        padding: 30px 0px;
        margin: 30px auto;
        /* 水平方向に中央寄せ */
    }

    .cow-header.active {
        opacity: 1;
        /* 表示時に不透明にする */
        pointer-events: auto;
        /* クリックを有効化 */
    }

    .cow-header-image {
        height: auto;
        /* 高さは自動調整 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        margin: 20px 0px;
    }

    .cow-header-image img {
        width: 80%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }

    .cow-header h1 {
        font-size: 24px;
        margin: 2px 0px;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h2 {
        font-size: 18px;
        margin: 2px 0px;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h3 {
        font-size: 16px;
        margin-top: 0px;
        /* 上側のマージンを2pxに設定 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: gray;
        /* 文字色をグレーにする */
        letter-spacing: 0.5em;
        /* 文字の間隔を広げる */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h4 {
        font-size: 12px;
        margin: 10px 0px;
        color: gray;
        /* 文字色をグレーにする */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }

    .cow-header h5 {
        font-size: 12px;
        margin-top: 0px;
        /* 上側のマージンを2pxに設定 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: gray;
        /* 文字色をグレーにする */
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }



    .cow-header h7 {
        font-size: 10px;
        padding: 50px 0px;
        font-family: 'Roboto', sans-serif;
        /* Makaフォントを適用 */
    }


    .cow-header p {
        font-size: 11px;
        margin: 5px 0px;
        color: #CCCCCC;
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
    }


    .cow-header-articlexx-frame {
        margin: 10px 0px;
        /* 上下の余白 */
        padding: 10px 0px;
        /* 上下の余白 */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .cow-header-articlexx-title {
        margin: 10px 10px;
        /* 上下の余白 */
    }

    .cow-header-articlexx-frame h1 {
        font-size: 16px;
        margin: 5px 0;
    }

    .cow-header-articlexx-frame h3 {
        font-size: 12px;
        margin: 2px 0;
    }

    .cow-header-articlexx-frame p {
        font-size: 10px;
        margin: 2px 0;
        /* 上下のマージンを設定 */
        line-height: 1.5;
        /* 行間の余白を設定 */
        letter-spacing: 0.2em;
        /* 文字の間隔を広げる */
    }



    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 30px;
        font-weight: bold;
        color: #CCCCCC;
    }


    /* ------------------<div class="cow-header">------------------ */


    /* ------------------<div class="header">------------------ */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
        background-color: rgba(150, 150, 150, 0.8);
        /* 透明度を設定した背景色 */
        color: white;
        box-shadow: 0 4px 50px rgba(0, 0, 0, 0.1);
        /* 下に影をつける */
        position: fixed;
        /* スクロールしても固定 */
        top: 0;
        /* ページの上部に固定 */
        width: 100%;
        /* 横幅を画面いっぱいに設定 */
        left: 50%;
        /* 水平方向の中央に配置 */
        transform: translateX(-50%);
        /* 自身の幅の半分だけ左にずらして中央揃え */
        z-index: 5;
        /* 他の要素より前面に表示 */
        max-height: 50px;
        /* 最大幅を500pxに制限 */
    }

    .niyasaka-header-image {
        flex: 3;
        /* 左側の要素を全体の2/10 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        padding-left: 15px;
    }

    .niyasaka-header-image img {
        width: 100%;
        /* 親要素の幅の100%に設定 */
        max-width: 200px;
        /* 最大幅を600pxに制限 */
        border-radius: 5px;
        /* 角丸 */
    }

    .logo h1 {
        margin: 0;
    }

    .nav-menu {
        flex: 7;
        /* 右側の要素を全体の8/10 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        padding: 0px 10px;
    }

    .nav-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        /* 子要素を水平方向に右寄せにする */
    }

    .nav-menu ul li {
        display: flex;
        /* フレックスボックスを使用 */
        justify-content: center;
        /* 水平方向に中央揃え */
        align-items: center;
        /* 垂直方向に中央揃え */
        padding: 0px 0px;
        /* 横のパディングはそのまま */
    }

    .nav-menu ul li h1 {
        margin: 0px 0px;
        font-size: 14px;
        text-align: center;
        /* テキストの中央揃え */
        white-space: nowrap;
        /* テキストの改行を防ぐ */
    }

    .nav-menu ul li h2 {
        margin: 0px 0px;
        font-size: 12px;
        color: #CCCCCC;
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
        text-align: center;
        /* テキストの中央揃え */
        white-space: nowrap;
        /* テキストの改行を防ぐ */
    }

    .nav-menu ul li a {
        text-decoration: none;
        color: white;
        padding: 5px 30px;
        transition: background-color 0.7s ease;
        /* 背景色と角丸の変化を0.3秒かけてスムーズに */
    }

    .nav-menu ul li a:hover {
        background-color: #555;
        border-radius: 5px;
    }

    /* ------------------<div class="header">------------------ */

    /* ------------------<div class="mainpage">------------------ */
    .mainpage {

        margin: 0px auto;
        /* 中央寄せするためのマージン */
        position: absolute;
        /* 要素を絶対位置に配置 */
        top: 0;
        /* 親要素の上端に合わせる */
        left: 50%;
        /* 親要素の中央に配置 */
        transform: translateX(-50%);
        /* 水平方向に中央に移動 */
        z-index: 1;
        /* ビデオより手前に配置 */
        text-align: center;
        /* 中央揃え */
        width: 100%;
        /* 親要素の幅の100%に設定 */
        color: black;
        /* 文字色を黒に設定 */
    }

    /* ------------------<div class="mainpage">------------------ */

    /* ------------------<div class="top-style">------------------ */
    .top-style {
        display: flex;
        /* Flexbox を使用 */
        justify-content: center;
        /* 水平方向（横）の中央揃え */
        align-items: center;
        /* 垂直方向（縦）の中央揃え */
        flex-direction: column;
        /* 子要素を縦方向に並べる */
        margin: 0 auto;
        /* 横方向の中央揃え */
        text-align: center;
        /* 中央揃え */
        color: black;
        /* テキスト色 */
        width: 100%;
        /* 親要素の幅の80%に設定 */
        background-color: rgba(244, 244, 244, 0.8);
        /* 透明度を設定した背景色 */
        padding-top: 100px;
    }

    .niyasaka-top-style-image {
        display: flex;
        /* フレックスボックスの設定を追加 */
        justify-content: center;
        /* 子要素を水平方向に中央揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央揃えにする */
        width: 100%;
        /* 親要素の幅の80%に設定 */
        max-width: 300px;
        /* 最大幅を600pxに制限 */
    }

    .niyasaka-top-style-image img {
        width: 100%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }

    /* ------------------<div class="top_style">------------------ */


    .gradient-overlay {
        width: 100%;
        height: 10vh;
        /* ビューポートの高さいっぱいに設定 */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(244, 244, 244, 1) 100%);
        /* 上から下への透明から不透明へのグラデーション */
        opacity: 0.8;
        /* オーバーレイの不透明度 */
    }


    .container {
        margin: 0 auto 20px;
        /* 上は0px、下は20px、水平方向は自動で中央寄せ */
        padding: 5px 20px;
        background-color: rgba(244, 244, 244, 0.8);
        /* 透明度を設定した背景色 */
        text-align: center;
        /* 文字を左寄せに設定 */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }


    .image-container {
        text-align: center;
        /* 画像を中央寄せ */
    }

    .image-container img {
        width: 100%;
    }

    /* ------------------------------------<div class=".pc-box01">------------------------------------ */
    .pc-box01 {
        display: flex;
        width: 100%;
        /* 親要素の幅を指定 */
    }

    .box01 {
        flex: 5;
        /* 左側のコンテンツの比率を3に設定 */
        padding: 10px;
    }

    .box02 {
        flex: 5;
        /* 右側のコンテンツの比率を5に設定 */
        padding: 10px;
        font-family: 'Roboto', sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        /* この設定が親要素に依存している */
        min-height: 300px;
        /* 最低限の高さを設定 */
        text-align: center;
    }

    .box02 p {
        font-size: 12px;
        margin: 0px;
        /* 上下マージンを統一 */
        margin-bottom: 5px;
        /* 下側のマージンを5pxに設定 */
        color: #555;
        letter-spacing: 0.5em;
    }

    /* ------------------------------------<div class=".pc-box01">------------------------------------ */

    .profile p {
        font-size: 12px;
        margin: 10px;
        /* 上下マージンを統一 */
        color: #555;
        letter-spacing: 0.5em;
        font-family: 'Roboto', sans-serif;
    }

    /* ------------------------------------<div class="video-container">------------------------------------ */

    .video-container {
        width: 80%;
        margin: 0 auto;
        /* センタリングされるが、video自体は左に寄せられる */
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 10px;
        max-width: 500px;
        /* 最大幅を300pxに制限 */
    }

    /* 動画自体のスタイル */
    .video-container video {
        width: 100%;
        /* コンテナより大きくならないように制限 */
        height: auto;
        border-radius: 10px;
        pointer-events: none;
        /* コントロール非表示中は操作不可 */
    }

    /* ------------------------------------<div class="video-container">------------------------------------ */


    /* ------------------------------------<div class="cow-grid">------------------------------------ */

    .cow-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* 2列のグリッドを作成 */
        gap: 5px;
        /* グリッドアイテム間の間隔 */
        padding: 0px;
        /* グリッド全体の内側の余白 */
        margin: 5px;
        /* グリッド全体の内側の余白 */

    }

    .cow-widget {
        position: relative;
        /* 子要素を相対的に配置するための基準 */
        height: 150px;
        /* div1の高さ */
        display: flex;
        justify-content: center;
        /* 横方向中央寄せ */
        align-items: center;
        /* 縦方向中央寄せ */
        cursor: pointer;
        /* クリック可能にする */
    }

    .cow-widget-background-image {
        z-index: 2;
        /* div2 は div1 の下に配置 */
        position: absolute;
        /* 絶対位置指定 */
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        overflow: hidden;
        /* はみ出た部分を隠す */
    }

    .cow-widget-background-image img {
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        object-fit: cover;
        /* 画像のアスペクト比を保ちながら親要素に収まるように */
        border-radius: 5px;
        /* 角丸 */
        filter: brightness(0.9);
        /* 明るさを20%下げる */
    }

    .cow-widget-content {
        z-index: 3;
        /* div1 を div2 の上に重ねる */
        padding: 5px;
        position: absolute;
        /* 絶対位置指定 */
        align-items: center;
        /* 中央寄せ */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .cow-widget-content h3 {
        font-size: 16px;
        margin: 0px 0;
        color: white;
        /* 白色に設定 */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        /* 影の設定 */
        font-family: 'maka', sans-serif;
        /* Makaフォントを適用 */
    }


    /* ------------------------------------<div class="cow-grid">------------------------------------ */

    /* ------------------------------------<div class="member-frame">------------------------------------ */

    .member-widget {
        padding: 10px;
        /* 上下左右の余白 */
        margin: 10px 0;
        /* 上下左右の余白 */
        background-color: rgba(0, 0, 0, 0.1);
        /* 背景色を黄緑の透明度80%に設定 */
        color: black;
        /* 文字色を白に設定 */
        border-radius: 5px;
        /* 角丸 */
    }

    .member-image-with-description {
        display: flex;
        /* Flexboxを使用して子要素を横並びにする */
        align-items: stretch;
        /* 子要素の高さを揃える */
        align-items: center;
        /* 中央寄せ */
        margin: 5px 0;
        /* 上下の余白 */
    }

    .member-image-container {
        flex: 4;
        /* 左側の画像コンテナがフレックスアイテム内で自動的に伸縮する */
        display: flex;
        /* 子要素をフレックスコンテナにする */
        justify-content: flex-start;
        /* 子要素を左揃えにする */
        align-items: center;
        /* 子要素を垂直方向にも中央寄せする */
    }

    .member-image-container img {
        width: 90%;
        height: auto;
        /* 高さは自動調整 */
        border-radius: 5px;
        /* 角丸 */
    }

    .member-description {
        flex: 6;
        /* 右側の説明文コンテナがフレックスアイテム内で自動的に伸縮する */
        padding: 0px 10px;
        /* 左右のパディング */
        line-height: 1.4;
        /* 行間を1.5倍に設定 */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .member-description h3 {
        font-size: 16px;
        margin: 8px 0;
    }

    .member-description h4 {
        font-size: 12px;
        margin: 8px 0;
    }

    .member-description h5 {
        font-size: 10px;
        margin: 4px 0;
    }


    .member-description p {
        font-size: 10px;
        margin: 5px 0;
    }

    .member-frame {
        margin: 10px 0;
    }


    .member-frame h2 {
        font-size: 12px;
        margin: 0px 0;
    }

    /* ------------------------------------<div class="member-frame">------------------------------------ */





    .widget {
        position: relative;
        /* 子要素を相対的に配置するための基準 */
        height: 120px;
        /* div1の高さ */
        display: flex;
        justify-content: center;
        /* 横方向中央寄せ */
        align-items: center;
        /* 縦方向中央寄せ */
    }


    .widget-background-image {
        z-index: 2;
        /* div2 は div1 の下に配置 */
        position: absolute;
        /* 絶対位置指定 */
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        height: 100%;
        /* widgetの高さと同じに設定 */
        align-items: center;
        /* 中央寄せ */
        background-image: url('image03.jpg');
        /* 背景画像の設定 */
        background-size: cover;
        /* 背景画像を要素全体にカバーさせる */
        background-position: center;
        /* 背景画像を中央寄せする */
        opacity: 0.8;
        /* 背景画像の透明度を設定（0.5で50%の透明度） */
    }


    .widget-content {
        z-index: 3;
        /* div1 を div2 の上に重ねる */
        padding: 20px;
        position: absolute;
        /* 絶対位置指定 */
        align-items: center;
        /* 中央寄せ */
        text-align: center;
        /* テキストを中央寄せ */
    }

    .widget-content h3 {
        font-size: 1.5em;
        margin: 0px 0;
    }







    .horizontal-line {
        border-top: 1px solid #FFF;
        /* 黒色の水平線 */
        margin-top: 20px;
        /* 上の余白 */
        margin-bottom: 20px;
        /* 下の余白 */
    }

    .profile-image-container06 {
        width: 80%;
        display: flex;
        justify-content: center;
        /* 横方向の中央寄せ */
        align-items: center;
        /* 縦方向の中央寄せ */
        margin: 0 auto
    }

    .profile-image-container06 img {
        max-width: 100%;
        /* 画像の最大幅を設定 */
        max-height: 100%;
        /* 画像の最大高さを設定 */
    }


    .gray-line {
        height: 0.5px;
        /* ラインの高さ */
        width: 100%;
        /* ラインの幅 */
        background-color: gray;
        /* ラインの色 */
        margin: 5px 0;
        /* 上下の余白 */
    }


    /* ------------------<フッター>------------------ */

    /* フッター全体のスタイル */
    footer {
        padding: 20px 0;
        /* 上下の余白を追加 */
        text-align: center;
        /* テキストを中央寄せ */
        font-family: 'Noto Serif JP', sans-serif;
        color: #111;
    }

    /* フッター内コンテンツのスタイル */
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 要素を中央寄せ */
        justify-content: center;
        max-width: 1200px;
        /* 最大幅 */
        margin: 0 auto;
        /* 横方向の中央寄せ */
    }

    /* キャッチフレーズのスタイル */
    .footer-company-info p {
        font-size: 14px;
        /* キャッチフレーズのフォントサイズ */
        font-weight: bold;
        /* 太字で強調 */
        color: #555;
        /* 文字色を中間のグレーに */
        margin-top: 2px;
        /* 上に余白を追加 */
        margin-bottom: 4px;
        /* 下に余白を追加 */
    }

    /* 会社名のスタイル */
    .footer-company-info .company-name {
        font-size: 24px;
        /* 会社名を大きく表示 */
        font-weight: bold;
        /* 太字にして強調 */
        margin-top: 4px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
        color: #333;
        /* 文字色をダークグレーに */
    }

    /* 英語名のスタイル */
    .footer-company-info .company-english-name {
        font-size: 12px;
        /* 英語名のフォントサイズをやや小さめに */
        font-weight: normal;
        /* 標準の太さ */
        margin-top: 0px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
        color: #666;
        /* 文字色を薄めのグレーに */
    }

    /* フッター全体のレイアウト調整 */
    .footer-company-info {
        text-align: center;
        /* フッター内のテキストを中央寄せ */
        padding-top: 20px;
        /* 上に余白を追加 */
        padding-bottom: 10px;
        /* 下に余白を追加 */
    }

    /* 連絡先のスタイル */
    .footer-contact-info {
        margin: 10px 0;
        /* 上下の余白 */
    }

    .footer-contact-info p {
        margin: 0;
        /* 上下の余白 */
    }

    /* フッター内のロゴ画像 */
    .footer-logo img {
        width: 100%;
        /* 横幅を親要素の100%に */
        max-width: 200px;
        /* 最大幅を600pxに制限 */
        height: auto;
        /* 縦幅は自動調整 */
        margin-top: 0px;
        /* 上に余白を追加 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
    }

    /* フッター内のリンク */
    .footer-contact-info a {
        text-decoration: none;
        /* アンダーラインを削除 */
    }

    .footer-contact-info a:hover {
        text-decoration: underline;
        /* マウスオーバー時にアンダーライン表示 */
    }

    /* ソーシャルメディアのリンクを横並びにする */
    .footer-social {
        display: flex;
        justify-content: center;
        /* コンテンツを中央揃え */
        gap: 10px;
        /* アイコン間のスペースを設定 */
        margin-top: 10px;
    }

    /* ソーシャルメディアアイコンのスタイル */
    .footer-social a {
        display: inline-block;
    }

    .footer-social img {
        width: 20px;
        /* アイコンのサイズ */
        height: auto;
        /* 高さを統一 */
        margin: 0 10px;
        /* アイコン間のスペース */
    }

    .footer-social a {
        display: inline-block;
    }

    /* 著作権情報のスタイル */
    .footer-copyright {
        padding: 10px 0;
        /* 上下の余白 */
        margin-top: 20px;
        /* 上側の余白 */
        width: 100%;
        text-align: center;
        /* 中央寄せ */
        font-size: 8px;
        /* フォントサイズを指定 */
    }

    /* ------------------<フッター>------------------ */

    a {
        text-decoration: none;
        /* 下線をなくす */
        color: inherit;
        /* 親要素の色を継承する */
    }



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆PC☆☆☆☆☆☆☆☆☆☆☆☆ */