{
    box-sizing: border-box;
}

html{
   background: -moz-linear-gradient(left, #87CEEB, #FFF 20%, #FFF 80%, #87CEEB);
   background: -webkit-linear-gradient(left, #87CEEB, #FFF 20%, #FFF 80%, #87CEEB);
   background: linear-gradient(to right, #87CEEB, #FFF 20%, #FFF 80%, #87CEEB);     /* 背景色 */
   overflow-x: hidden;
}




/* ================================================= */
/* 1. モバイル（スマートフォン）の基本スタイル (767px以下) */
/* ================================================= */

body{
   width : auto; 
   margin : 0px auto;
   padding: 0px;
   overflow-x : hidden;
   -webkit-text-size-adjust: 100%;
   background-color:white ;     /* 背景色 */
}


/* 文字の設定 */
h1.midashi{
   font-size: 24px;
   font-weight: 700;
   padding: 0.5em 0.5em;
   color: black;
   background: none;
   border-bottom: solid 10px #87CEEB;
   max-height: 100%;
   text-align: center;
}
h1.komidashi{
   font-size: 22px;
   font-weight: 700;
   padding: 0.3em 0.5em;
   margin: 0;
   color: black;
   background: none;
   max-height: 100%;
}
/* ... */
h3.newsmidashi {
   border-bottom:solid 2px #C30;
   font-weight:bold;
   color:#C30;
   font-size:1.5em;
   max-height: 100%;
   margin-bottom: 0;
   line-height: 1; 
   padding-bottom: 0.5em; 
   text-align: center;
}

p{
   text-align: justify;
   text-justify: inter-ideograph;
   margin: 0.5 0em;
   text-indent: 0em;
   font-size: 1.1rem;
   line-height: 1.8;
}

p.signature {
   text-align: right;
   text-indent: 0;
   margin-top: 1em;
   line-height: 1;
}

p.important {
   font-weight: bold;
   color: #000; 
   letter-spacing: 0.05em; 
   margin: 0;
}

p.m-bottom-0 {
   margin-bottom: 0em;
}

p.m-top-0 {
   margin-top: 0em;
}

p.m-0 {
   margin: 0;
}

#main-content-side h1.midashi{
   line-height: 1.15; /* 行の高さを固定し、安定させます */
}

.office-info p {
   text-indent: 0; 
   margin-left: 0.5em; /* ほんの少しだけ左に隙間を作る */
}

/* ----------- */
/* 上段メニューエリアのfloat解除 */
/* ------------*/
.header-wrapper {
   clear: both;
   overflow: hidden; /* 子要素のfloatを内部で完結させるため */
}


/* ----------- */
/* スマホメニュー*/
/* ------------*/
.menu-open {
    width: 40px;
    height: 40px;
    position: absolute; /* ロゴと重ねて右上に配置するため */
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 100; /* 最前面に表示 */
}
.menu-open .bar {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: 0.3s ease-in-out;
}
.menu-open .bar.top {
    top: 5px; /* 上段の棒 */
}
.menu-open .bar.middle {
    top: 18px; /* 中段の棒 */
}
.menu-open .bar.bottom {
    top: 31px; /* 下段の棒 */
}
/* JSで追加するクラス。アイコンをX印に変形する */
.menu-open.is-open .bar.top { /* */
    transform: rotate(45deg);
    top: 18px;
}
.menu-open.is-open .bar.middle { /* */
    opacity: 0;
}
.menu-open.is-open .bar.bottom { /* */
    transform: rotate(-45deg);
    top: 18px;
}

/* ----------- */
/* 上段メニュー（モバイルでは縦積み・中央寄せ）*/
/* ------------*/
a.logo{
   float: none; 
   text-decoration: none;
   margin: 1em 0;
   display: block; 
   text-align: center;
}
a.logo img{
   width: 80%; 
   max-width: 400px; 
   border:none;               
}
a.logo:hover{
   opacity:0.5;　　　　　
}

/* 右上のやつ */
ul.sitemap{
   float: none; 
   background-color:white;
   margin: 0;
   text-align: center; 
}
ul.sitemap li{
   display: inline-block; 
   font-size: 12px;
}
ul.sitemap img{
    vertical-align: bottom; 
    width: 50px; 
    height: 25px;
}


/* --------------- */
/* メインメニュー  */
/* --------------- */
ul.ddmenu {
   width: 100%;
   margin: 0px;                 
   padding: 0px 0px 0px 0px;    
   background-color: #87CEEB;   
   text-align:center ;
   display: none;
   position: absolute;
   top: 55px;
   clear:both;
   z-index: 99;
   font-size:0;
}
ul.ddmenu a {
   background-color: #87CEEB; 
   color: black;              
   line-height: normal;         
   font-size: 15px; 
   text-align: center;        
   text-decoration: none;     
   font-weight: bold;         
   font-family:'Meiryo';
   display: block;            
   padding: 10px 10px; 
}
ul.ddmenu a:hover {
   background-color: #3B7FB9; 
   color: white;            
}
ul.ddmenu.is-open {
   display: block;
}
ul.ddmenu li {
   width: 100%; 
   display: block; 
   list-style-type: none; 
   position: relative;    
   line-height: 0px;     
}
ul.ddmenu li .submenu {
    display:none; /* 初期状態で非表示 */
    position: static; /* absoluteを解除 */
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%; /* 親要素の幅いっぱいに */
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: none;
}
/* JSでサブメニューが開いた時のスタイル */
ul.ddmenu li .submenu.is-open-submenu {
    display: block; /* 開いたら表示 */
}
ul.ddmenu li .submenu li {
   width: 100%;
   display: block;
}
ul.ddmenu li .submenu a {
   background-color: #5aaad1; /* サブメニュー専用の背景色（親メニューより少し濃く） */
   color: black;
   line-height: normal;         
   font-size: 14px; 
   text-align: center; /* 中央揃え */
   text-decoration: none;     
   font-weight: normal; 
   display: block;            
   padding: 8px 10px; /* 親メニューより少し小さめのパディング */
   border-top: 1px solid #75aace; 
}
ul.ddmenu li .submenu a:hover {
   background-color: #3B7FB9;
   color: white;
}
/* サブメニューを持つ親リンク (例: プログラム) にアイコンを追加 */
ul.ddmenu > li > a {
   position: relative; /* アイコンの位置基準とする */
   padding-right: 30px; /* アイコン分の右側のスペースを確保 */
   display: block; /* リンク全体をブロック化 */
}

/* サブメニューを持つリンクに下向きの矢印アイコンを追加 */
ul.ddmenu > li:has(.submenu) > a { 
   padding-right: 30px !important; 
   position: relative !important; 
   display: block !important;
}
ul.ddmenu > li:has(.submenu) > a:after {
   content: '\25bc'; /* 下向き三角形 (▼) のユニコードエスケープ */
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%) rotate(0deg); 
   font-size: 0.8em;
   transition: transform 0.3s ease;
   color: #333; 
}
/* サブメニューが開いたときに矢印を上向きに回転 */
ul.ddmenu > li:has(.submenu) > a[aria-expanded="true"]:after {
   transform: translateY(-50%) rotate(180deg); /* アイコンを180度回転させて上向きにする */
}

/* --------------- */
/* メインコンテンツ（モバイルでは縦積み）*/
/* ----------------*/
div.content-wrapper {
   display: block; 
   clear: both;
   padding: 0 1em; 
   width: 90%; 
}
#newsbox{
   width: 100%; 
   margin: 1em auto; 
   padding: 1em ;
   padding-bottom: 1em; 
   margin-bottom: 1em; 
   background-color: white; 
   /* Flexbox用プロパティをリセット */
   flex: none;
   margin-right: auto;
}
/* メインコンテンツ */
div.main-content{
   width: 90%;
   margin: 0 auto;
   padding: 0;
}

/* メインコンテンツ（サイドあり） */
#main-content-side{
   width: 95%; 
   margin: 1em auto; 
   padding: 1em;
   padding-bottom: 1em; 
   margin-bottom: 1em; 
   background-color: white; 
   /* Flexbox用プロパティをリセット */
   flex: none;
   margin-right: auto;
}
/* マップのラッパー (アスペクト比の制御) */
.iframe-container {
    position: relative; /* 子要素の絶対配置の基準とする */
    width: 100%;       /* 親要素（#map）の幅いっぱいに広げる */
    overflow: hidden;  /* はみ出しを防ぐ */
    padding-top: 56.25%; /* 9/16 = 56.25% で 16:9 のアスペクト比を維持 */
}

/* iframe自体 */
.iframe-container iframe {
    position: absolute; /* 親要素内で絶対配置 */
    top: 0;             /* 上端に配置 */
    left: 0;            /* 左端に配置 */
    width: 100%;        /* 親要素の幅に合わせて100% */
    height: 100%;       /* 親要素の高さに合わせて100% */
    border: 0;          /* 枠線を削除 */
}
#map{
   width: 100%; 
   margin: 1em auto; 
   padding: 1em;
   padding-bottom: 1em; 
   margin-bottom: 1em; 
   background-color: white; 
   /* Flexbox用プロパティをリセット */
   flex: none;
   margin-right: auto;
}
/* お知らせボックスのニュースリストの調整 */
ul.news-list li {
   display: flex; 
   flex-wrap: wrap; /* モバイルでは日付とテキストを折り返す */
   padding: 1em 0;
   align-items: flex-start;
}
.news-icon {
   background-image: url("IMG/News.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   flex-shrink: 0;
   display: block;
   width: 100px; 
   height: 60px;
   padding-top: 0; 
   margin-right: 0.5em; 
   background-color: #ccc;
}
.news-details {
   flex-grow: 1;              
   width: calc(100% - 100px - 0.5em); 
   margin: 0; 
   padding: 0; 
}
.news-date, .news-text {
   float: none;
   display: block;
   line-height: 1.2;
   margin-top: 0; 
   font-size: 1.2em; 
   word-break: break-word; 
}
.news-date {
   font-size: 1.2em;
   color: #C30;
   line-height: 1;
   margin-top: -1.3em;
}
.news-text {
    font-size: 1em;
}

/* サイドバー */
div.side-content {
   width: 100%;
   margin: 0 auto;
}
/* ポスター/バナー画像の調整 */
div.poster-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
div.poster, div.banner {
   background-color: white;
   padding: 1em;
   margin-bottom: 1em;
   text-align: center;
}
div.poster img {
    width: 80%;
    max-width: 300px;
}
div.banner img {
   width: 80%;
   max-width: 300px;
}

/* 大会長挨拶 */
div.img_kaityou{
   width: 200px;
   margin: 0 auto;
   padding: 0 0 1em 0;
}
div.img_kaityou img{
   width: 100%;
}

/* 一般公開講座 */
div.ippan_koukai{
   text-align: center;   /* 子要素を中央寄せにする */
   width: 100%;          /* 親の幅いっぱいに広げる */
   padding: 0;           /* 余計な余白をリセット */
   margin: 0 auto;
}

div.ippan_koukai img{
   display: block;       /* ←重要！インラインの隙間を消す */
   width: 80%;           /* スマホ画面の8割の幅 */
   max-width: 500px;     /* 大きくなりすぎない制限 */
   height: auto;         /* 比率を維持 */
   margin: 0 auto;       /* ←重要！ブロック要素として中央寄せ */
}
/* 講師紹介エリアのスタイル */
.lecturer-sns-only{
   margin-top: 15px;
   text-align: center; /* 中央に寄せてバランスを取る */
}

.sns-link{
   display: inline-block;
   margin: 0 5px;
   padding: 8px 15px;
   border-radius: 20px; /* 角を丸くして柔らかい印象に */
   color: #fff !important;
   font-weight: bold;
   text-decoration: none !important;
   font-size: 0.85em;
   transition: 0.3s;
}

/* 各SNSの色 */
.x-link{
   background-color: #000;
}
.fb-link{
   background-color: #1877f2;
}
.ig-link{
   background-color: #e4405f;
}
.sns-link:hover {
   opacity: 0.8; /* 少し透けて明るく見える */
   box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 少し影をつけて浮かび上がらせる */
}


/* 文字(スマホ時のみ表示) */
p.sumahoonly{
   display: block; 
}

/* 表について */
div.scroll {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch; 
}

div.scroll table {
   width: 100%;
   min-width: 500px; 
   border-collapse: collapse;
}
table {
   border-collapse: collapse;
   margin: 0 auto 1em auto;
}

table th, table td {
   border: 1px solid #ccc;
   padding: 10px;
   text-align: left;
}

table th {
   background-color: #f0ffff; 
}



/* -------- */
/* 準備中   */
/* -------- */

div.kouji{
   text-align: center;
}
div.kouji img{
   width:50%;
}

/* ================================================= */
/* 2. タブレット用 Media Query (768px-959px) */
/* ================================================= */
@media screen and ( min-width: 768px ) and ( max-width: 959px )
{
 


/* 文字の設定 */
h1.midashi{
   text-align: left;
}
div.poster h1{
   text-align: center;
}
div.banner h1{
   text-align: center;
}

/* 上部メニューエリアのfloat解除 */
.header-wrapper {
   clear: both;
   overflow: hidden;
}
/* 上段メニューをPC寄りに調整 */
a.logo{
   float: left;
   text-align: left;
   margin: 0 0 0 1em;
}
a.logo img{
   width: 300px; 
   max-width: none;
}
ul.sitemap{
   float: right;
   margin: 0 5em 0 0;
   text-align: right;
}
ul.sitemap li{
   display: inline;
}



/* Flexboxの比率を適用 */
#newsbox {
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em;
   margin-bottom: 0;
}
#main-content-side {
   width: 100%; 
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em;
   margin-bottom: 0;
}
#map {
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em;
   margin-bottom: 0;
}

/* ポスター/バナー画像の調整 */
div.side-content {
   display: block; 
   width: 100%;
}
div.poster-group{
   flex-direction: row;
   justify-content: space-between;
   margin-bottom: 15px;
}
div.poster{
   flex: 0 0 48%;
   margin-bottom: 0;
}
div.banner{
   width: 100%;
}
div.banner a {
   width: 30%; /* バナーは3つ横並び */
}
div.poster img{
   width: 80%;
   max-width: none; 
} 
div.banner img {
   width: 30%;
   max-width: none; 
}

/* お知らせボックスのFlex調整をタブレット用に再設定 */
ul.news-list li {
   flex-wrap: nowrap; 
   align-items: flex-start;
}
.news-icon {
   width: 200px; 
   height:120px;
   padding-top: 0;
   flex-shrink: 0; /* アイコンを縮小させない */
}
.news-details {
   width: auto;
   flex-grow: 1;
   margin: 0; 
   padding: 0; 
}
.news-date, .news-text {
   margin-top: 0em;
}
.news-date {
   font-size: 1.3em; 
   line-height: 1;
   margin-top: -1.2em;
}
.news-text {
   font-size: 1.1em;
}


/* 大会長挨拶 */
div.img_kaityou{
   width: 200px;
   float: left;
   margin: 0 2em 0 0;
}


/* 一般公開講座 */
div.ippan_koukai img {
   max-width: 800px;
}


/* 文字(スマホ時のみ表示) */
p.sumahoonly{
   display: none; 
}

}


/* ================================================= */
/* 3. PC用 Media Query (960px以上) */
/* ================================================= */
@media screen and ( min-width: 960px ) 
{
/* PCの固定幅を適用 */
body{
   width : 90%;
   max-width : 1200px;   
   min-width : 960px;    
   margin : 0px auto;
   overflow: auto;
}
.header-wrapper {
    clear: both;
    overflow: visible;
}


/* 文字の設定 */
h1.midashi{
   text-align: left;
}
div.poster h1{
   text-align: center;
}
div.banner h1{
   text-align: center;
}


/* 上段メニューをPC配置に */
a.logo{
   float: left;
   text-align: left;
   margin: 0 0 0 1em;
}
a.logo img{
   width:400px;
   max-width: none;
}
ul.sitemap{
   float: right;
   margin: 0 1em 0 0;
   text-align: right;
}
ul.sitemap li{
   display: inline;
}
ul.sitemap img{
   width: 60px;
   height: 30px;
}
.menu-open {
    display: none !important; 
}
/* ナビゲーションメニューの調整 */
ul.ddmenu {
   display: block !important;
   position: static; 
   top: auto; 
   clear: both;
}
ul.ddmenu li {
   display: inline-block; /* blockからinline-blockに変更 */
   position: relative;
   width: auto;
}
ul.ddmenu a {
   padding: 10px 20px; 
   font-size: 15px;
   white-space: nowrap;
}
ul.ddmenu li .submenu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 10;
   width: auto;
   padding: 0;
   margin: 0;
   list-style: none;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
ul.ddmenu li:hover .submenu {
   display: block;
}
ul.ddmenu li .submenu li {
   display: block;
   width: 100%;
}
ul.ddmenu li .submenu a {
   background-color: #87CEEB; /* サブメニューの背景色 */
   color: black;
   line-height: normal;         
   font-size: 14px; 
   text-align: left; /* 左揃え */
   text-decoration: none;     
   font-weight: normal; 
   display: block;            
   padding: 10px 15px; 
   border-top: 1px solid #75aace; /* 項目間の区切り線 */
}
ul.ddmenu li .submenu a:hover {
   background-color: #3B7FB9;
   color: white;
}
/* PCではアコーディオンクラスは無効化 */
ul.ddmenu li .submenu.is-open-submenu {
    display: none; 
}



/* メインコンテンツをFlexboxで横並びに */
div.content-wrapper {
   display: flex; 
   flex-wrap: nowrap; 
   align-items: flex-start; 
   padding: 0; 
   overflow: hidden; /* 背景色のため、あえてoverflow: hiddenを残す */
   clear: both;
   width: 100%; 
}

/* Flexboxの比率を適用（9999pxハックは削除！） */
#newsbox {
   margin: 1em auto; 
   padding: 1.5em 0 0 1em;
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em; /* 通常パディング */
   margin-bottom: 0; /* 通常マージン */
}

#main-content-side {
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em;
   margin-bottom: 0;
}
#map {
   flex: 3; 
   margin-right: 1em;
   padding-bottom: 1em;
   margin-bottom: 0;
}
div.side-content {
   flex: 0.8; /* side-contentは newsboxに対して2の比率 */
   display: flex; /* side-content内部をFlexコンテナにする */
   flex-direction: column; /* <-- 縦に並べる設定 */
   width: auto;
   padding: 0.5em 2em 0 0;
}
div.poster-group {
   flex-direction: column;
}

div.poster{
   flex: 1; 
   margin: 0 0 1em 0;
   padding: 1em 0 0 0;
}

div.banner{
   display: block; 
   margin: 0;
   padding: 0;
}

/* お知らせボックスのFlex調整をPC用に再設定 */
ul.news-list li {
   flex-wrap: nowrap; 
   align-items: flex-start;
}
.news-icon {
   width: 250px;
   height: 140px;
   padding-top: 0;
}
.news-date {
   font-size: 1.5em; 
   margin-top: -1em;
   line-height: 1;
}
.news-text {
   font-size: 1.3em; 
   margin-top: 0;
}


/* 大会長挨拶 */
div.img_kaityou{
   width: 25%;
   float: left;
   margin: 0 2em 0 0;
}


/* 一般公開講座 */
div.ippan_koukai img{
   width: 90%;           
   max-width: none;
}


/* ポスター/バナー画像の調整 */
div.poster img, div.banner img {
   width: 100%;
   max-width: none;
}
    
/* 文字(スマホ時のみ表示) */
p.sumahoonly{
   display: none; 
}




} /* PC Media Query 終了 */


/* ================================================= */
/* 共通スタイル（Media Queryの外側に残る要素） */
/* ================================================= */

/* ----------*/
/* 階層の位地*/
/* ----------*/
ul.kaisou li{
   display: inline-block;
   list-style-type: none;
}
ul.kaisou li a{
   text-decoration: underline;
   color: blue;
}
ul.kaisou li a:visited{
   text-decoration: none;
   color: blue;
}
ul.kaisou li a:hover{
   text-decoration: none;
   color: blue;
}


/* ... */
ul.news-list {
   list-style: none;
   padding: 0;
   /* margin: -2em 0 0 0; は削除し、newsbox内のパディングで対応が望ましい */
   margin: 0; 
}

ul.news-list li:not(:last-child) {
    border-bottom: 1px dotted #ccc; /* ニュース項目間の区切り線を追加 */
}
.news-details{
   display: block; 
   padding: 0;
   margin: 0;
}
.news-dete {
   display: block; 
   margin-top: -0.2em
}
p.border{
   clear:both;
   border-top:solid 1px;
   width:100%;
   padding: 0 0 1em 0;
   margin: 2em 0 0 0;
}



/* ------ */
/* footer */
/* ------ */
.footer {
   clear: both;
   text-align: center; 
   width: 100%;
   padding: 40px 15px; /* 上下の余白と、スマホで端に寄らないための左右余白 */
   box-sizing: border-box;
}

.copyright-box small {
   font-size: 14px;
   color: #666;
   display: block;
   letter-spacing: 0.05em;
}

/* 既存の線を少し綺麗に調整 */
p.border_footer {
   clear: both;
   border-top: solid 1px #ccc; 
   width: 100%;
   margin: 2em 0 0 0;
}

/* ------ */
/* Link   */
/* ------ */
ul.link_list {
   list-style: none;
   padding: 0;
   margin: 0 0 2em 0;
}
ul.link_list li a {
   display: block;
   padding: 15px 10px;
   text-decoration: none !important;

   position: relative;
   transition: 0.3s;
   font-size: 1.1rem;
}
ul.link_list li a:hover {
   background-color: #f0faff; /* 非常に薄い水色 */
   color: #004a99 !important; /* 文字を濃い青に */
   padding-left: 15px; /* 右に少し動く演出 */
}
ul.link_list li a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 4px;
   height: 60%;
   background-color: #87CEEB; /* サイトのテーマカラー */
   opacity: 0;
   transition: 0.3s;
}

ul.link_list li a:hover::before {
   opacity: 1; /* ホバーした時だけ線が出る */
}


/* -------- */
/* 上に戻る */
/* -------- */
div.returntop{
   position:fixed;
   bottom: 15px;
   right: 15px;
   opacity:0.5;
}
img.return{
   width:50px;
}
div.returntop:hover{
   opacity:1;
}