/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

@container( max-width:959px ) {

/* ベース */
section.content-block.top-content { border-radius:20px 20px 0 0; margin-bottom:0; }
section.content-block.exchange-block.first-block { border-radius:0; }

}

@container( min-width:960px ) {

/* 見出しイラスト */
h2.top-midashi { position:relative; z-index:1; }
h2.top-midashi::after { aspect-ratio:212/211; content:''; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url(../img/page/exchange/top-content-illustration.png); display:inline-block; position:absolute; top:100px; left:50%; transform:translateX(-50%); height:auto; max-width:212px; width:211px; z-index:1; }

/* 見出し */
.ye-midashi { font-size:18px; font-weight:500; }

}

/* ==================================================================================================== */
/* 連携と交流 */
/* ==================================================================================================== */


/* テキスト */
div.block-item p,div.block-item ul li, div.block-item dt, div.block-item dd, div.space p, div.space ul li, div.content-text p, div.content-text li { font-size:16px; font-weight:400; line-height:200%; letter-spacing:-0.8px; }

/* 地域交流 */
div.block-item { margin:auto; margin-bottom:40px; }
div.block-item ul { margin:16px 0; }
div.block-item ul li { list-style:disc; margin:0 0 0 1rem; }
div.block-item dl { gap:16px; margin-bottom:24px; }
div.block-item dl.last-block { margin-bottom:0; }
div.block-item dl dt { align-items:center; background-color:var(--ye-02); border-radius:20px; font-size:14px; font-weight:500; justify-content:center; height:37px; width:130px; }
div.block-item dl dd { font-size:14px; text-align:left; width:calc( 100% - 150px ); }

/* 各コラム */
.column-block a { border-bottom:1px solid var(--bk); }

/* 交流スペース */
div.space { flex-direction:column; gap:40px; margin-bottom:64px; }
div.space-ph { margin:8px auto; }
div.space-ph img { height:auto; max-width:100%; }
div.space h3 { font-size:16px; font-weight:800; text-align:center; line-height:200%; }
div.space-item ul li { list-style:disc; margin:0 0 0 1rem; }

/* 連携協力機関 */
div.kyoryoku { margin-bottom:80px; }
div.kyoryoku p { margin-bottom:24px;}
div.kyoryoku h3 { font-weight:800; }
div.hyo {
  font-size: 14px;
  font-weight: 400;
  margin: 24px 0;
  line-height: 200%;
  flex-direction: column;
  gap: 8px;
}

/* 各施設ブロック */
div.facility {
  flex-direction: column;
  gap: 4px;
}

/* 名称 */
div.name {
  background-color: var(--ye-02);
  text-align: center;
  padding: 4px 8px;
}

/* 住所＋電話部分 */
div.info {
  flex-direction: row;
  gap: 4px;
  justify-content: flex-start;
}

/* 住所・電話セル */
div.address-cell, div.tel-cell { background-color:#ecf7f9; display:flex; padding:0 8px; }

div.address-cell {
  width:55%;
}

div.tel-cell {
align-items:center;
 display:flex;
  width:45%;
  white-space: nowrap;
}

/* 電話アイコン */
div.tel-cell::before {
  aspect-ratio: 1/1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/page/exchange/tel-icon.svg');
  content: '';
  display:inline;
min-height: 12px;
height: 12px;
min-width: 12px;
width: 12px;
  margin-right: 4px;
  vertical-align:middle;
}

@container( min-width:960px ) {

/* 地域交流 */
div.block-item { max-width:830px; width:100%; }

/* テキスト */
div.block-item p,div.block-item ul li, div.block-item dt, div.block-item dd, div.space p, div.space ul li, div.content-text p, div.content-text li { font-size:18px; line-height:32px; letter-spacing:-0.9px; }
div.block-item p, div.block-item ul li, div.column-block p, div.space-block p, div.block-item ul li { font-weight:400; }

/* 交流スペース */
div.space-block { position:relative; z-index:1; }
div.space-block::before { aspect-ratio:362/256; background-image:url('../img/page/exchange/content-illustration01-pc.png'); background-size:contain; background-position:center; background-repeat:no-repeat; content:''; position:absolute; top:50px; right:-120px; height:256px; width:362px; z-index:-1; }
div.space { flex-direction:row; flex:1; margin:auto; margin-bottom:80px; max-width:830px; width:100%; }
div.space h3 { font-size:18px; font-weight:400; line-height:32px; letter-spacing:-0.9px; }
div.column-block p, div.space-block p, div.block-item ul li { list-style-type:none; text-align:center; margin:0; }
div.block-item ul { text-align:center; margin-left:auto; margin-right:auto; max-width:350px; }
div.block-item ul li { text-align:left; }
div.block-item ul li::before { content:'・'; font-weight:600; }
div.block-item dl { gap:56px; margin-bottom:10px; }
div.block-item dl dt { font-size:18px; }
div.block-item dl dd { font-size:18px; width:calc( 100% - 250px ); }
div.block-item dl dd br { display:none; }

/* 連携協力機関 */
div.kyoryoku { margin-bottom:250px; }
div.kyoryoku p { text-align:center; }
div.hyo { margin-inline:auto; max-width:830px; width:100%; }
div.facility { align-items:stretch; flex-direction:row; gap:4px; }
.facility > .name { align-items:stretch; flex:1; display:flex; justify-content:center; }
.facility > .info { align-items:stretch; flex:2; display:flex; flex-direction:row; gap:4px; }
.info .address-cell { align-items:center; flex:5; justify-content:center; width:auto; }
.info .tel-cell { align-items:center; flex:5; justify-content:center; width:auto; }

}