/**************************************************************************
 design 共通（細かい書式）
**************************************************************************/

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Meiryo", sans-serif;
    color: #333333;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

a {
    transition: all 0.2s ease;
}

.trans a:hover img,
a:hover img.trans,
.trans a:hover,
a:hover.trans {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

p {
    font-size: 14px;
    font-size: 1.4rem;
}

.bold {
    font-weight: bold;
}

.red01 {
    color: #d82c2c; 
    font-weight: bold;
}

.size12r,
.size12 {
    font-size: 12px;
    font-size: 1.2rem;
}

.size12r {
    text-align: right;
    margin: 5px 0;
}

.s14 {
    font-size: 14px;
    font-size: 1.4rem;
}

.s18 {
    font-size: 18px;
    font-size: 1.8rem;
}

.need {
    padding: 4px 8px;
    background: #fff4e5;
    border-radius: 2px;
}

.need p {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #e65100;
}

/**************************************************************************
 layout
**************************************************************************/

#wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 16px;
}

/**************************************************************************
 header
**************************************************************************/

#header {
    padding: 12px 0 8px 0;
    /* ★ PC時はロゴが浮くため、高さを確保 */
    min-height: 60px; 
}

#hl {
    /* ★ ボタン幅の制約を無視して常に画面左端に配置 */
    position: absolute;
    top: 12px;
    left: 24px; /* 画面左端から少しだけ離す */
    width: auto;
    z-index: 100;
}

#hl img {
    display: block;
    height: 40px;
    width: auto;
}

#hr {
    float: right;
    text-align: right !important;
    margin-top: 10px;
    position: relative;
    z-index: 10;
}

#top_link02 {
    margin: 0;
}

#top_link02 a {
    font-size: 12px;
    font-size: 1.2rem;
    color: #666666;
    text-decoration: none;
}

#top_link02 a:hover {
    color: #2e96be;
    text-decoration: underline;
}

/**************************************************************************
 ページベース（背景色）
**************************************************************************/

.common-bg {
    background: #e8f4f8;
}

html, body {
    overflow-x: hidden;
}

/**************************************************************************
 タイトル画像エリア
**************************************************************************/

#page-title {
    width: 100vw;
    margin: 16px calc(50% - 50vw) 16px calc(50% - 50vw);
    padding: 0;
    text-align: center;
}

#page-title img {
    width: 100%;
    height: auto;
    display: block;
}

/**************************************************************************
 グローバルナビ
**************************************************************************/

#global-nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 1050px;
    margin: 0 0 8px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#global-nav a {
    box-sizing: border-box;
    flex: 1 1 200px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 14px 0;
    border-radius: 4px 4px 0 0; 
    font-weight: 700;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.4;
    background: #2e96be;
    border: none;
}

#global-nav a:hover,
#global-nav a.is-active {
    background-color: #048db7;
}

/**************************************************************************
 メインコンテナ（白い大きなカード）
**************************************************************************/

.common-card {
    box-sizing: border-box;
    background: #ffffff;
    width: 100%;
    max-width: 1050px;
    margin: 0 0 40px 0;
    padding: 40px; 
    text-align: left;
    border-radius: 0 0 8px 8px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.common-card img {
    max-width: 100%;
    height: auto;
}

/**************************************************************************
 ページタイトル・見出し
**************************************************************************/

.common-box h2 {
    color: #333333;
    font-weight: 700;
    font-size: 22px;
    font-size: 2.2rem;
    letter-spacing: 1.5px;
    margin: 0 0 32px 0 !important;
    text-align: left;
    padding: 12px 16px;             
    border-left: 6px solid #2e96be;
    border-bottom: 1px solid #c5d4e5;
    background: #f4f8fa;            
}

.common-box h3 {
    width: auto; 
    font-size: 18px;
    font-size: 1.8rem;
    /* ★ marginを [上:0] [右:22px] [下:20px] [左:22px] に変更 */
    margin: 0 22px 20px 22px; 
    padding: 8px 0; 
    border-bottom: 2px solid #2e96be;
    font-weight: 700;
}

/**************************************************************************
 お知らせ
**************************************************************************/

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5; 
}

.news-list li:first-child {
    padding-top: 0;
}
.news-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.news-date {
    flex: 0 0 120px;          
    font-weight: 700;
    color: #333333; 
    font-size: 15px;
    font-size: 1.5rem;
    padding-top: 2px;
}

.news-text {
    flex: 1;
    font-size: 15px;
    font-size: 1.5rem;
    color: #333333;
    line-height: 1.6;
}

.news-text a {
    color: #2e96be; 
    text-decoration: none;
}

.news-text a:hover {
    color: #f58b05;
    text-decoration: underline;
}

.news-new {
    display: inline-block;
    background: #ffffff;
    color: #e65100;
    border: 1px solid #e65100; 
    font-size: 11px;
    font-size: 1.1rem;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 700;
    transform: translateY(-2px);
}

/**************************************************************************
 連絡先（お問い合わせ枠）
**************************************************************************/

.contact-box {
    margin-top: 64px; 
}

.contact-name {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 16px;
    line-height: 1.5;
}

.contact-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-size: 1.4rem;
    color: #333333;
    line-height: 1.8;
    border-top: 2px solid #2e96be;    
    border-bottom: 2px solid #e5e5e5; 
}

.contact-list dt, 
.contact-list dd {
    border-bottom: 1px solid #e5e5e5; 
    padding: 16px;                
}

.contact-list dt {
    width: 25%;               
    font-weight: 700;
    color: #333333;     
    background: #f7f9fa;
}

.contact-list dd {
    width: 75%;               
    margin: 0;
}

.contact-list dd a {
    color: #2e96be;
    text-decoration: none;
    font-weight: 600;
}

.contact-list dd a:hover {
    color: #f58b05;
    text-decoration: underline;
}

/**************************************************************************
 コンテンツブロック（会議の開催状況）
**************************************************************************/

.common-box .waku_ti {
    display: block;                 
    background: transparent;        
    color: #333333;                 
    /* ★ marginを [上:0] [右:22px] [下:24px] [左:22px] に変更 */
    margin: 0 22px 24px 22px; 
    padding: 0 0 8px 0; 
    border-radius: 0;               
    box-shadow: none;               
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;    
    border-bottom: 2px solid #2e96be; 
}

/* ▼ その下の本文（第1回〜 など） */
.common-box .waku {
    border: none;                   
    background: transparent;
    /* ★ 本文も「有」に合わせるため、marginで左に余白を取る */
    margin: 0 0 0 22px;            
    padding: 0;
}

.common-box .meeting-title {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 32px 0 16px 0;
    padding-top: 32px;
    border-top: 1px solid #e5e5e5; 
    display: flex;
    align-items: center;
}

.common-box .meeting-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.common-box .meeting-badge {
    display: inline-block;
    background: #fff4e5;
    color: #d84315;
    border: none;
    border-radius: 3px;
    margin-right: 12px;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 4px 12px;
    line-height: 1.4;
}

.common-box .aramashi {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #333333;
}

.common-box .aramashi a {
color: #333333; /* 普段の本文色に合わせる（必要なら別の色に） */
text-decoration: none;
font-weight: 400; /* 太字が不要なら削除してください */
}

.common-box .aramashi a:hover,
.common-box .aramashi a:focus {
color: #1e90b8; /* ホバー時の水色（任意の色に変更可） */
text-decoration: underline;
outline: none;
}

.common-box .aramashi a::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 6px;
vertical-align: text-bottom;
background-image: url("../img/pdf.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* ホバー時に少し動かす */
.common-box .aramashi a:hover::after {
transform: translateY(-1px);
transition: transform 0.15s ease;
}

/* モバイル用に小さくする（必要なら） */
@media screen and (max-width: 768px) {
.common-box .aramashi a::after {
width: 12px;
height: 12px;
margin-left: 4px;
}
}

.common-box .aramashi a + img {
    margin-left: 2px;
}

.common-box .meeting-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap; 
}

.common-box .meeting-text {
    flex: 1 1 100%;
    min-width: 0;
}

.common-box .meeting-files {
text-align: left; 
padding: 0; 
margin: 12px 0 0 0; 
}


.common-box .file-box {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
}


/* もし meeting-files 内で横並びのアイテムを使うなら .materials-row を使う想定 */
.materials-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
padding: 0;
width: 100%;
justify-content: flex-start; / 左端揃え */
align-items: flex-start;
box-sizing: border-box;
}

/* 1行に最大4列にする（余白 gap により実際は自動調整） */
.material-item {
flex: 0 0 calc((100% - (16px * 3)) / 4);
box-sizing: border-box;
text-align: center;
}

/* 表紙画像 */
.material-item img {
width: 100%;
height: auto;
display: block;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* キャプション */
.material-caption {
margin-top: 6px;
font-size: 13px;
color: #333;
}


/* レスポンシブ：幅狭いときは列数を減らす */
@media screen and (max-width: 1100px) {
.material-item { flex: 0 0 calc((100% - (16px * 2)) / 3); }
}
@media screen and (max-width: 760px) {
.material-item { flex: 0 0 calc((100% - 16px) / 2); } 
}
@media screen and (max-width: 420px) {
.material-item { flex: 0 0 100%; }
}



.common-box .file-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #2e96be;  
    font-weight: 700;
    font-size: 13px;
    font-size: 1.3rem;
    width: 100%;
}

.common-box .file-link img {
    width: 100%;              
    max-width: 140px;         
    height: auto;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.common-box .file-link:hover img {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.common-box .file-link span:hover {
    text-decoration: underline;
}

/**************************************************************************
 footer
**************************************************************************/

#copy {
    color: #666666;
    padding: 24px;
    text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
    margin-top: 16px;
}

/**************************************************************************
 レスポンシブ対応（スマホ等：幅 768px 以下）
**************************************************************************/

@media screen and (max-width: 768px) {

    #header {
        padding: 10px 0 8px 4px;
        min-height: auto; /* スマホ時は高さを自動に戻す */
    }
    
    #hl, #hr {
        width: 100%;
        float: none;
        text-align: left;    
    }
    
    #hl {
        /* ★ スマホ時は画面端の絶対配置をやめて通常の位置に戻す */
        position: static; 
    }
    
    #hl img {
        width: 35%;          
        min-width: 140px;    
        max-width: 100%;
        height: auto;
    }

    #wrapper {
        width: 100%;
        padding: 0 12px;
    }

    #page-title {
        width: 100vw;
        margin: 12px calc(50% - 50vw) 4px calc(50% - 50vw);
        padding: 0;
    }

    #global-nav {
        margin: 0 0 8px 0;
        display: block;
    }

    #global-nav a {
        margin-bottom: 4px;
        border-radius: 4px; 
    }

    .common-card {
        padding: 24px 16px;
        border-radius: 8px;
    }

    .common-box h2 {
        font-size: 20px;
        font-size: 2.0rem;
        padding: 12px;
        margin-bottom: 24px !important;
    }
    
    /* ★ スマホ時のインデント位置（18px）に合わせる */
    .common-box h3 {
        margin: 0 18px 20px 18px;
        padding: 8px 0;
    }

    /* ★ 右側にも18pxの余白を追加 */
    .common-box .waku_ti {
        margin: 0 18px 24px 18px;
        padding: 0 0 8px 0;
    }

    .common-box .waku {
        margin: 0 0 0 18px;
        padding: 0;
    }

    .common-box .meeting-content {
        display: block;
    }

    .common-box .meeting-text {
        width: 100%;
        margin-bottom: 16px;
    }

    .common-box .meeting-files {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 16px;                   
        margin-top: 16px;
        padding: 0;
    }

    .common-box .file-box {
        flex: 0 0 80px;              
        margin-bottom: 0;
    }

    .common-box .file-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        width: 100%;
    }

    .common-box .file-link img {
        width: 100%;
        max-width: 75px;             
        height: auto;
        margin-right: 0;
        margin-bottom: 4px;
    }

    .common-box .file-link span {
        font-size: 11px;             
        line-height: 1.3;            
    }

    .news-list li {
        display: block;
    }
    
    .news-date {
        margin-bottom: 4px;
    }

    .contact-list dt {
        width: 100%;             
        padding: 12px 12px 4px 12px; 
        border-bottom: none;       
    }
    
    .contact-list dd {
        width: 100%;             
        padding: 0 12px 16px 12px;
    }
}