@charset "utf-8"; /* 文字エンコーディングを指定する */

/* 全部の制御 ---------------------------------------------------------------------- */

:root {
    /* --- フォント --- */
    --global-fonts: 'Roboto', 'Noto Sans JP', sans-serif; /* ベースのフォント（欧文フォントを先に記述する） */
    --global-size: 16px; /* ベースのフォントサイズ */
    
    /* --- カラー（色） --- */
    --color-navy: #1C1C72; 
    --color-lightblue: #1E99D4; 
    --color-black: #1C1C1C; 
    --color-yellowgreen: #89C33F; 
    --color-white: #FFFFFF; 
    --color-bluegray: #F1F1F1; 
    --color-gray:#C9C9C9;

    /* --- その他 --- */ 
    scroll-behavior: smooth; /* スクロールの挙動をなめらかに */
}

html, ::before, ::after {
    font-family: var(--global-fonts);
    font-size: var(--global-size);
}


.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.l-inner{
    margin:0 auto;
}


/* header ---------------------------------------------------------------------- */

.header {
    width: 100%;
    height: 80px; /* ※実際のデザインに合わせて高さを指定してください */
    background-color: var(--color-white);
    position: fixed;
    z-index: 9999;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

.header .l-inner {
    display: flex;
    justify-content: space-between; /* ロゴを左、ナビを右に配置 */
    align-items: stretch; /* 子要素の高さをヘッダーいっぱいに伸ばす */
    height: 100%;
    
}

.header__logo{
    display: flex;
    align-items: center; /* 上下中央揃え */
    color: var(--color-navy);
    font-weight: bold;
    font-size: 1rem;
    margin-left: 32px;

    @media(width <= 479px){
        font-size: 0.75rem;
    }
}

.header__nav{
    display: flex;
    height: 100%;

    @media(width <= 1024px){
        display: none;
    }

}

.header__list {
    display: flex;
    background-color: var(--color-navy); /* 背景を紺色に */
}

.header__item {
  position: relative; /* 縦線の基準位置にするため */
}

.header__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 30px; /* 文字の左右の余白 */
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
}

.header__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 上下中央に配置 */
    width: 1px;
    height: 40%; /* 線の長さを調整（上下に少し余白ができる） */
    background-color: var(--color-white);
}

.header__btn {
    display: flex;
    align-items: center;
    background-color: var(--color-black); /* 背景を黒色に */
    transition: opacity 0.3s ease;
}

.header__btn:hover{
    opacity: 0.8;
}

.header__btn--image{
    width:40px;
    padding-left: 10px;
    transform: translateY(-3px);
}

.header__btn .c-btn {
    display: flex;
    align-items: center;
    gap: 8px; /* 文字とアイコンの隙間 */
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    width: 100%;
    height: 100%;
    background-color: var(--color-black); 
    padding: 0 40px; /* <a>タグ自身に40pxの余白を持たせることでクリック可能になります！ */
}

/* ハンバーガー部分 ------------------------------------------------------------- */

.globbalMenu{
    height:50px;
    position: relative;
    z-index: 9999;
}

.menuButton{
    display: none; /* 初期表示でメニューの中身を隠す */
}

.menuButton__contents{
    width:100%;
    background-color: var(--color-white);
    position: absolute;
    top:0;
    right:0;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

.menuButton_group__each{
    line-height: 80px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    list-style: none;
    border-top: solid 1px var(--color-bluegray);
    text-align: left;
}

.menuButton_group__each:last-child{
    border-bottom: solid 0px var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.menuButton_group__each_text{
    text-decoration: none;
    color: var(--color-black);
    display: block; 
    padding-left: min(10%, 40px); /* 数値はお好みで調整してください（20px〜40pxくらいがおすすめです） */
}

.menuButton_group__each:last-child .menuButton_group__each_text {
    color: var(--color-white);
}

.hamburger{  /* 三本線 */
    width:30px;
    height:30px;
    position: absolute;
    top:-55px;
    right:15px;
    cursor: pointer;
    z-index: 9999;

    background:url(../img/hamburger-button.svg)no-repeat;
    background-size: 200%;
    &.menu-is-open{
        background-position: top 0 left -30px;
    }

    @media(width >= 1025px){
        display: none;
    }
}

.inHamburger{
    width:50px;
    transform: translateY(12px);
}

/* MV ---------------------------------------------------------------------- */

.mv { 
    display: block; 
    width: 100%; 
    background-image: url('../img/main_img.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    
    /* 上下のみここで指定し、背景画像を下に伸ばします */
    padding: 250px 0 250px 0; 
    color: var(--color-white);

    @media(width <= 1024px){
        padding: 215px 0 250px 0;
    }

    @media(width <= 479px){
        padding: 160px 0 220px 0;
    }
}

.mv  .l-inner {
    padding-left: 126px; /* デザインに合わせて調整してください */

    @media(width <= 1024px){
        padding: 0 15px;
    }
}

/* 「中部圏デジタルツイン推進イニシアティブ」の黄緑ラベル */
.mv__sub-title {
    display: inline-block;
    background-color: var(--color-black);
    color: var(--color-yellowgreen); /* または濃い紺色 */
    padding: 6px 16px;
    font-weight: 500;
    font-size: 1.625rem;
    margin-bottom: 24px;
    transform: translateX(-14px);

    @media(width <= 1024px){
        font-size: 1.25rem;
    }

    @media(width <= 479px){
        font-size: 1rem;
    }
}

/* 大見出し */
.mv__copy {
    font-size: 4.375rem; /* スマホ用には後で小さく調整（メディアクエリ）が必要です */
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    text-shadow: 5px 5px 14.8px rgba(23, 48, 140, 0.8);

    @media(width <= 1024px){
        font-size: 3.75rem;
    }

    @media(width <= 479px){
        font-size: 2.65rem;
    }
}

/* リード文 */
.mv__lead {
    font-size: 1.375rem;
    line-height: 1.8;
    font-weight: 600;

    @media(width <= 1024px){
        font-size: 1rem;
    }

    @media(width <= 479px){
        font-size: 0.875rem;
    }
}

/* NEWS ---------------------------------------------------------------------- */


.news {
    background-color: transparent; 
    margin-top: -130px; /* メインビジュアルの上に重ねる量（デザインに合わせて数値を調整してください） */
    position: relative; /* z-indexを効かせるために必要 */
    z-index: 100; /* メインビジュアルより手前（上）に表示させる */
    
}

/* NEWSタイトルとリストを横並びにする */
.news .l-inner {
    background-color: var(--color-white); 
    /* 白い箱の内側に余白をつけて見栄えを整えます */
    padding: 0 60px; 
    display: flex;
    align-items: center;
    gap: 64px; /* 左の「NEWS」と右のリストの間隔 */
    max-width: 1120px;
    margin-left: 0px; /* ← これを追加することで左揃えになります */
    
    
    @media(width <= 1024px){
        flex-direction: column;
        gap: 24px;
    }

}

/* 左側のタイトルエリア */
.news__header {
    flex-shrink: 0; /* 幅が縮まないようにする */
    width: 120px;

    @media(width <= 1024px){
        margin-top: 40px;
    }
    
}

.news__title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
}

.news__list {
  flex-grow: 1; /* 左の「NEWS」以外の余白をすべてリストの幅として使う */
}

.news__item {
    width: 100%; /* 横罫線を親要素(ul)の幅いっぱいに伸ばす */
    border-bottom: 1px solid var(--color-black); /* 各ニュースの下線（既存のまま） */
}

.news__item:last-child {
    border-bottom: 0px solid var(--color-black); /* 各ニュースの下線 */
}

.news__link {
    display: flex;
    align-items: center; /* 日付・カテゴリ・テキストを縦中央で揃える */
    padding: 20px 0;
    text-decoration: none;
    color: var(--color-black);

    @media(width <= 1024px){
        flex-wrap: wrap; /* 要素の折り返しを許可する */
    }
}

.news__date {
    font-size: 0.95rem;
    margin-right: 24px;
}

/* カテゴリ（枠線付きのラベル） */
.news__category {
    display: inline-block;
    border: 1px solid var(--color-navy); /* 紺色の枠線 */
    color: var(--color-navy);
    font-size: 0.85rem;
    padding: 4px 12px;
    margin-right: 24px;
    width: 120px; /* カテゴリの幅を固定すると、右側のテキストの開始位置が綺麗に揃います */
    text-align: center;
}

.news__text {
    font-size: 1rem;
    line-height: 1.5;

    @media(width <= 1024px){
        width: 100%; /* 幅を100%にすることで、強制的に次の行に落とす */
        margin-top: 12px; /* 日付・カテゴリとの間に少し余白をとる */
    }
}


/* Top Banner (上部メルマガ誘導) ---------------------------------------------------------------------- */


.top-banner {
    background-color: var(--color-navy); /* ヘッダー等と同じ紺色 */
    color: var(--color-white);
    text-align: center;
    padding: 8px 0;
    max-width:1120px;
    transition: background-color 0.3s ease;

    @media(width <= 1024px){
        margin-top:30px;
    }
}

.top-banner:hover {
    background-color: var(--color-lightblue);
}

.top-banner__text {
    font-size: 1rem;
    font-weight: 400;
    padding:0 15px;
    line-height: 1.5;
}

.top-banner__link {
    color: var(--color-white);
    text-decoration: none;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 文字とアイコンの隙間 */
}

.top-banner__link:hover {
    text-decoration: underline; /* ホバー時に下線を引く */
}

/* 外部リンクの矢印アイコン（疑似要素で表現） */
.top-banner__link::after {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('../img/mailmaga_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-2px);
}


/* MESSAGE ---------------------------------------------------------------------- */


.message {
    padding: 100px 0;
    background-color: var(--color-white);
    position: relative; 
    overflow: hidden; /* 画像が画面外にはみ出た際に、横スクロールバーが出るのを防ぐ */

    @media(width <= 1024px){
        padding:100px 0 50px 0;
    }
}

/* 1. 左右の2カラムレイアウト（Flexbox） */
.message__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上端で揃える */
    gap: 137px; /* 左右ブロックの間の余白 */
    max-width:1200px;
    margin: 0 auto; /* ★ここを追加：画面の中央に配置する */
    position: relative; 
    z-index: 10; 

    @media(width <= 1024px){
        flex-direction: column;
        padding:0 0 0 15px ;
        gap: 45px;
        transform: none; 
        padding: 0 5%;
    }

}

/* --- 左側エリア --- */
.message__left {
    width: calc(50% - 131px); /* 左側の幅（デザインに合わせて微調整してください） */

    @media(width <= 1024px){
        width: 100%;
        
    }
}

.message__header {
    margin-bottom: 60px;
    text-align: right;

    @media(width <= 1024px){
        text-align: center;
        
    }
}

.message__left--nuru{
    width:320px;
    margin:0 auto;
    position: relative;
}

/* タイトルの装飾 */
.message .c-section-title {
    display: inline-block; /* 文字の幅にぴったり合わせる（右下の線を引くため） */
    font-size: 5rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--color-black);
    position: relative;
    z-index: 10;

    @media(width <= 1024px){
        font-size: 3rem;
        
    }
    
}

/* ▼ messageのスマホ用地球（1024px以下）　▼ */

@media(width <= 1024px){
    .message__left--img{
        width:150px;
        opacity: 0.3;
        position: absolute;
        top:-150px;
        left:-40px;
        z-index: 5;
    }

}

/* ▼ messageのスマホ用地球（1025px以上）　▼ */

@media(width >= 1025px){
    .message__left--img{
        display:none;
    }

}



.message .c-section-subtitle {
    display: block; /* 改行させる */
    font-size: 1.5rem;
    font-weight: 400;
    position: relative;
    text-align: left;

    @media(width <= 1024px){
        font-size: 1rem;
        
    }
}

/* 2. サブタイトル右下の「黄緑と黒の2色ライン」 */
.message .c-section-subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; /* inline-blockにしたタイトルの右端に揃える */
    width: 80px; /* 線の長さ */
    height: 6px; /* 線の太さ */
    /* linear-gradientを使って左半分を黄緑、右半分を黒に塗り分けます */
    background: linear-gradient(45deg, var(--color-yellowgreen) 50%, var(--color-black) 50%);
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

/* 3. 画像の重なり表現（絶対配置の活用） */
.message__images {
    padding-bottom: 150px; /* 後ろの画像が下にはみ出す分の余白 */
    padding-left: 0;   /* 後ろの画像が左にはみ出す分の余白 */

    @media(width <= 1024px){
        display:none;
        
    }
}

/* 後ろのドット画像 */
.message__img-back {
    position: absolute;
    bottom: 0;
    left: -99px;
    width: 307px; /* 画面幅に対するパーセンテージ（デザインに合わせて数値を調整してください） */
    z-index: 1; /* 一番後ろに配置 */
}

/* 前の地球画像 */
.message__img-front {
    position: relative;
    z-index: 2; /* 重なり順を上にする */
    width: 352px;
    display: block;
    margin-left: auto; /* 右端に寄せる */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 少し影をつけるとより立体的になります */
}

/* --- 右側エリア --- */
.message__right {
    width: 50%; /* 右側の幅 */
    padding: 90px 0 0 0; /* 左側のタイトルとの高さバランスを調整 */

    @media(width <= 1024px){
        width:100%;
        padding: 40px 15px 0 15px; 
    }

}

.message__lead {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.875;
    margin-bottom: 40px;
    color: var(--color-black);

    @media(width <= 1024px){
        font-size: 1.25rem; 
        line-height: 1.875;
    }
}

.message__text {
    font-size: 1rem;
    line-height: 2.25; /* ゆったりとした行間 */
    color: var(--color-black);
}

.message__text--paddingTop {
    padding-top:32px;
}

@media screen and (max-width: 1024px) {
    .message__lead br,
    .message__text br {
        display: none; /* brタグを非表示にして改行をなくす */
    }
}


/* OUR ACTIVITIES ---------------------------------------------------------------------- */

/* セクション全体の背景を薄いグレーにする */
.activities {
    background-color: var(--color-bluegray); /* デザインに合わせて色を調整してください */
    padding: 100px 0;

    @media(width <= 1024px){
        padding:100px 0 50px 0;
    }
}

/* 内側の枠組み（幅を揃える） */
.activities .l-inner {
    max-width: 1200px;
    margin: 0 auto;

    @media(width <= 1024px){
        margin: 15px 0 15px;
        
    }
}

/* --- タイトルエリア --- */
.activities__header {
    text-align: center;
    margin-bottom: 60px;
}

/* 透かし文字のような英語タイトル */
.activities .c-section-title {
    font-size: 5rem; 
    color: var(--color-white); /* 白にすることで、薄いグレー背景の上で透かしのように見えます */
    line-height: 1;
    font-weight: 500;
    padding-bottom: 12px;

    @media(width <= 1024px){
        font-size: 3rem;
        
    }
}

/* 日本語のサブタイトル */
.activities .c-section-subtitle {
    display: block; /* 英語タイトルと同じh2の中に入っているため、blockにして改行させます */
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-black);
    position: relative;
    padding-top: 14px;
    padding-bottom: 18px;

    @media(width <= 1024px){
        font-size: 1rem;
        padding-top: 10px;
    }
}

/* 2色の斜めライン（中央揃え版） */
.activities .c-section-subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    
  /* ▼ここがポイント：要素をど真ん中に配置する */
    left: 50%;
    transform: translateX(-50%); 
    width: 96px;
    height: 6px;
    background: linear-gradient(45deg, var(--color-yellowgreen) 50%, var(--color-black) 50%);
    
}

/* --- 3カラムのカードレイアウト（Flexbox） --- */
.activities__list {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* カード同士の隙間 */
    margin: 0 15px 40px 15px;
    list-style: none; /* リストの黒丸を消す */
    padding: 0; /* リスト特有の左の余白を消す */

    @media(width <= 1024px){
        flex-direction: column;
        margin: 0 15px;
    }
}

/* 各カード本体 */
.activities__card {
    flex: 1; /* 3つのカードを同じ幅に均等割する */
    background-color: var(--color-white);
    border-radius: 0 70px 0 0; /* 少し大きめの角丸 */
    padding: 40px 30px;
    text-align: center; /* ラベルやアイコンを中央揃えにする */
}

/* 黒いラベル（DIGITAL TWIN） */
.activities__card-head {
    display: inline-block;
    background-color: var(--color-black);
    color: var(--color-yellowgreen);
    font-size: 0.85rem;
    font-weight: 400;
    width:200px;
    padding: 4px 16px;
    margin-bottom: 16px;
}

/* カードの見出し */
.activities__card-title {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 24px;

    @media(width <= 1024px){
        font-size: 1.875rem;
    }
}

/* アイコン画像 */
.activities__card-icon {
    margin-bottom: 24px;
    height: 100px; /* アイコンの大きさに合わせて調整してください */
    display: flex;
    justify-content: center;
    align-items: center;
}

.activities__card-icon img {
    max-height: 100%;
    width: auto;
}

/* カード内のテキスト */
.activities__card-text {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text-main);
    text-align: left; /* ★文章だけは読みやすいように左揃えに戻す */
}

/* --- 注釈テキスト --- */
.activities__note {
    text-align: center;
    font-size: 1rem;
    color: var(--color-black);
    text-align: left;
    line-height: 1.5;
    margin: 30px 15px
}


/* topics ---------------------------------------------------------------------- */


.topics {
    /* ▼ 背景画像の設定（実際の画像ファイル名に合わせて変更してください） */
    background-image: url('../img/topics_img.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 上下の余白と、セクション全体の中央揃え */
    padding: 100px 0;
    text-align: center; 
    color: var(--color-white); /* 基本の文字色を白にする */
}

/* 内側の枠組み（他のセクションと幅を揃える） */
.topics .l-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding:0 15px;

    @media(width <= 1024px){
        margin: 0 15px 0 15px;
        
    }
}

/* --- タイトルエリア --- */
.topics__header {
    margin-bottom: 50px; /* 下のテキストとの余白 */
}

/* 英語タイトル（TOPICS） */
.topics .c-section-title {
    font-size: 5rem; 
    color: var(--color-white); /* 背景が暗いので白文字にします */
    line-height: 1;
    font-weight: 500;

    @media(width <= 1024px){
        font-size: 3rem;
        
    }
}

/* 日本語のサブタイトル（活動内容） */
.topics .c-section-subtitle {
    display: block; /* 英語タイトルと横並びにならないように改行させます */
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-white); /* こちらも白文字にします */
    position: relative;
    padding-top: 14px;
    padding-bottom: 18px; /* 下の2色ラインとの隙間 */

    @media(width <= 1024px){
        font-size: 1rem;
        padding-top: 10px;
    }
}

/* 2色の斜めライン（中央配置版） */
.topics .c-section-subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    
    /* ▼ここがポイント：要素をど真ん中に配置する */
    left: 50%;
    transform: translateX(-50%); 
    width: 96px;
    height: 6px;
    background: linear-gradient(45deg, var(--color-yellowgreen) 50%, var(--color-black) 50%);
}

/* --- テキストエリア --- */
.topics__text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--color-white);

    @media(width <= 1024px){
        font-size: 1rem;
        line-height: 1.5;
    }
}


/* member ---------------------------------------------------------------------- */


.member {
    padding: 100px 0; 
}

/* 内側の枠組み */ 
.member .l-inner {
    max-width: 1200px;
    margin: 0 auto;

    @media(width <= 1024px){
        margin: 0 15px;
        
    }
}

/* --- タイトルエリア --- */ 
.member__header {
    text-align: center;
    margin-bottom: 60px;
}

/* 英語タイトル（MEMBER） */ 
.member .c-section-title { 
    font-size: 5rem; 
    color: var(--color-gray); 
    line-height: 1; 
    font-weight: 500;

    @media(width <= 1024px){
        font-size: 3rem;
        
    }
}

/* 日本語のサブタイトル（メンバー） */ 
.member .c-section-subtitle { 
    display: block; 
    font-size: 1.725rem; 
    font-weight: 700; 
    color: var(--color-black); 
    position: relative; 
    padding-top: 14px; 
    padding-bottom: 18px; 

    @media(width <= 1024px){
        font-size: 1rem;
        padding-top: 10px;
    }
}

/* 2色の斜めライン（中央配置） */ 
.member .c-section-subtitle::after { 
    content: "";
    position: absolute;
    bottom: 0;
    
    /* ▼ここがポイント：要素をど真ん中に配置する */
    left: 50%;
    transform: translateX(-50%); 
    width: 96px;
    height: 6px;
    background: linear-gradient(45deg, var(--color-yellowgreen) 50%, var(--color-black) 50%);
}

/* --- リスト全体の枠組み --- */
.member__group { 
    max-width: 900px; 
    margin: 0 auto 60px; 
}

.member__group + .member__group { 
    border-top: 1px solid var(--color-black); 
    padding-top: 60px; 
}

/* 〈推進委員会〉の小見出し */ 
.member__sub-title { 
    font-size: 1.25rem; 
    font-weight: 400; 
    margin-bottom: 20px; 
    color: var(--color-black); 
    padding-top: 40px; 
    width: 200px; 
    text-align: center; 
}

/* 1行のまとまり */ 
.member__item { 
    display: flex; 
    align-items: center; 
    padding: 30px 0; 
}

/* 上下の空き広げる */ 
.member__item--space{
    margin:50px 0;

    @media(width <= 1024px){
        margin:0;
        
    }
}

/* 役職名（左側の dt ） */ 
.member__role { 
    font-size: 1.25rem; 
    width: 200px; 
    flex-shrink: 0; 
    font-weight: 400; 
    text-align: center; 
}

/* 氏名・所属（右側の dd ） */ 
.member__name { 
    font-size: 1rem; 
    color: var(--color-black); 
    border-left: solid 1px var(--color-black); 
    min-height: 70px; 
    
    /* ▼ 変更：flexをやめてブロック要素に戻し、上下に少し余白を入れて中央揃えっぽく見せる */
    display: block; 
    padding: 0 0 0 41px; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
}

/* ▼ 今回追加：人物（pタグ）ごとの行間と隙間の設定 */
.member__name p {
  line-height: 1.5; /* 人物が2行になった時の行間は 1.5 */
  margin-bottom: 1.25em; /* 違う人物との隙間は 1.5 空ける（これで合計3.0になります） */
}

/* ▼ 今回追加：一番最後の人の下には隙間を作らない */
.member__name p:last-child {
    margin-bottom: 0;
}

/* --- 注釈テキスト --- */ 
.member__note { 
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: right; 
    font-size: 1rem; 
    color: var(--color-black); 
}

/* --- 委員上揃え用 --- */ 
.member__role--committee{
    transform: translateY(-178px);

    @media(width <= 1024px){
        transform: translateY(0);
        
    }

}

/* --- 人物名のなき別れ禁止 --- */ 
.no-wrap {
    display: inline-block;
}

/* --- スマホ・タブレット（1024px以下）向けのレスポンシブ --- */
@media(width <= 1024px){
    
    .member__item { 
        flex-direction: column; 
        align-items: flex-start; /* 左寄せにする */
        padding: 40px 0; 
    }

  /* 役職名を左揃えにする */
    .member__role {
        width: 130px;
        margin:0 auto;
        text-align: center;
        margin-bottom: 24px;
        border-bottom: solid 1px var(--color-black);
        padding-bottom: 12px;
    }

  /* 名前を左揃えにする */
    .member__name {
        width: 100%;
        text-align: center;
        word-break: keep-all; /* 全角スペースでのみ改行 */
        overflow-wrap: anywhere;
        padding-left: 0; /* 左の余白を消す */
        border-left: none; /* 縦線を消す */
        min-height: auto; 
        display: block; 
    }

  /* 〈推進委員会〉を左揃えにする */
    .member__sub-title {
        width: 100%;
        text-align: center;
    }

    .member__note { 
        text-align: center; 
        line-height: 1.5;
    }

}

/* ---CTA (下部メルマガ誘導)
 (メルマガ誘導エリア専用スタイル)---------------------------------------------------------------------- */

.cta {
    position: relative;
    width: 100%;
    background: url('../img/cta_bg.jpg') no-repeat center center / cover; 
    box-sizing: border-box;
    min-height: 400px;
    padding: 60px 20px;
    display: flex;
    align-items: center;
}

.cta .l-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta__text {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2.25;
    color: var(--color-black);
    margin-bottom: 2.5rem;

    @media(width <= 1024px){
        font-size: 1rem;
        line-height: 1.75;
    }
}


/* ボタンの配置用ラッパー */
.cta__btn-wp {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* CTAボタン本体 */
.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 276px;
    min-height: 80px;
    background-color: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    padding: 15px 40px;
    transition: opacity 0.3s ease;
}

/* ホバー時の視覚効果 */
.cta__btn:hover {
    opacity: 0.8;
}

/* ボタン内のアイコン設定 */
.cta__btn-icon {
    width: 40px;
    height: auto;
    transform: translateY(-2px); /* 縦位置の微調整（ヘッダーの仕様を参考） */
}


/* フッター */
/* 1. 事務局情報エリア（背景を左右幅いっぱいに） */
.footer__info {
    width: 100%;
    min-height: 200px;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 40px 0;
    font-style: normal;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 事務局情報のインナー（最大幅1200pxで中央寄せ ＋ 左側の余白） */
.footer__info-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 事務局タイトル */
.footer__title {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: left;    /* 1200pxの枠内で左揃え */
    margin-bottom: 15px; /* 下の空き15px */
}

/* 住所・連絡先 */
.footer__address {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2;
    text-align: left;
}

/* ★メールアドレス単体のスタイル */
.footer__mail {
    display: inline-block;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    padding-left: 40px;
    transition: opacity 0.3s;
}

.footer__mail:hover {
    opacity: 0.7;
}

/* レスポンシブ（他のパーツに合わせて 1024px 以下で一括調整） */
@media (max-width: 1024px) {
    /* PC用の改行を無効化する */
    .u-br-pc {
        display: none;
    }

    /* 文字サイズを少しだけ縮小して調整 */
    .footer__title {
        font-size: 1.125rem;
        margin-bottom: 10px;
        line-height: 1.5;
    }
    .footer__address {
        font-size: 0.9375rem;
    }

    /* 現状のスマホ用コードをここに統合 */
    .footer__mail {
        display: block;
        padding-left: 0;
        margin-top: 8px;
    }
}

/* ---コピーライト--- */
.footer__copyright {
    width: 100%;
    background-color: var(--color-navy);
    color: var(--color-white);
    text-align: center; /* 中央揃え */
    padding: 15px 0;    /* 上下の余白 */
}

/* コピーライトテキスト */
.footer__copyright-text {
    display: block;
    font-size: 0.875rem;
}


/* 1400px以上の設定 */
@media (width >= 1400px) {
    .mv .l-inner {
        max-width: 1200px; /* 他のMEMBERやMESSAGEセクションの幅（1200px）に合わせる */
        margin: 0 auto;    /* 1200pxの箱を画面のど真ん中に配置する */
        padding-left: 0;   /* PC版で設定していた左側の余白(126px)をリセットして、箱の左端に揃える */
    }

    .news .l-inner,
    .top-banner {
        /* 1. 帯を画面左端から塗ったまま、中身だけを1200pxの箱の左端まで押し出す */
        /* 画面の半分(50%)から、1200pxの半分(600px)を引いた距離を左の余白にします */
        padding-left: calc(50% - 600px); 
    
        /* 2. 中身の幅が潰れないように、増えた左余白の分を最大幅(max-width)にも足す */
        /* calc(50% - 600px) ＋ 元の幅(1120px) ＝ calc(50% + 520px) */
        max-width: calc(50% + 520px); 
    }

    .news__title {
        text-align: left;
    }
}