@charset "utf-8";
/* CSS Document */

.clearfix:after {
    content: "";
  clear: both;
    display: block;
}
ul{list-style: none;}

:root{
--bg: #f8fafc;
--surface: #ffffff;
--ink: #0f172a;
--muted: #475569;
--accent: #16a34a;
--accent-weak: #bbf7d0;
--line: #e2e8f0;
--warn: #dc2626;
--shadow: 0 10px 30px rgba(2,6,23,.08);
--radius: 16px;
--max-width: 1100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}


.tamoku-container{ max-width: var(--max-width); margin: 0 auto; padding: clamp(16px, 3vw, 32px);}



/* ------------ Sections ------------ */
.tamoku-section-title{ font-size: clamp(22px, 3.6vw, 28px); margin:0 0 18px; }


.tamoku-grid{ display:grid; gap: clamp(14px, 2vw, 20px); }
@media(min-width:700px){ .tamoku-grid.cols-2{ grid-template-columns: repeat(2, 1fr); } }


.tamoku-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.tamoku-card .tamoku-media{ aspect-ratio: 16/9; background: linear-gradient(135deg, #dcfce7, #e0f2fe); display:grid; place-items:center; color:#065f46; font-weight:700; font-size: clamp(16px, 2vw, 18px);}
.tamoku-media img{width: 100%; height: auto;}
.tamoku-card .tamoku-body{ padding: 16px 18px;text-align: justify; }
.tamoku-card h3{ margin: 0 0 8px; font-size: 24px;  color:#379ad3;}


.tamoku-tag{ display:inline-block; padding:2px 8px; border-radius: 999px; background: var(--accent-weak); color:#065f46; font-weight:700; font-size:24px; }


.tamoku-def{ display:grid; grid-template-columns: 1fr; gap:8px; border:1px solid var(--line); background:var(--surface); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);}
@media(min-width:640px){ .tamoku-def{ grid-template-columns: 180px 1fr; align-items:start; } }
.tamoku-def dt{ font-weight:800; color:#064e3b; }
.tamoku-def dd{ margin:0; color: var(--muted); }



  .rss-feed { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", Arial, sans-serif; line-height: 1.6;font-size: 12px; }
  .rss-item { padding: 10px 0; border-bottom: 1px solid #eee; }
  .rss-item a { text-decoration: none; color: #0b72e7; }
  .rss-item a:hover { text-decoration: underline; }
  .rss-date { display: block; font-size: 12px; color: #666; margin-top: 2px; }
  .rss-empty, .rss-error { color: #b00020; }






#wrapper{
	margin:0;
	padding:0;
}

#top_mainbox{
	width: 100%;
	height:auto;
	background-color:#F1F1EF;
	margin-bottom: 2em;
}

#contents{
	max-width:920px;
	width: 100%;
	height:auto;
	margin:0 auto;
	background-color:#fff;
	text-align:center;
}

#header{
	width:920px;
	margin:0 auto;
	text-align:center;
	padding-top:40px;
	padding-bottom:40px;
}

#main_box{
	float:left;
	line-height: 150%;
	max-width: 920px;
	color: #696969;
	padding-bottom:40px;
}
/* バー全体 */
#menu-box{
  width:100%;
  background:#5cbee0;
}


/* メニューUL：中央寄せ＆折返し可 */
#menu{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;   /* ← 高さを各行で揃える */
  gap:0;
  list-style:none;
  font-size:18px;
	line-height: 20px;
  background:#5cbee0;
	text-align: center;
}

/* 各アイテム：等幅にするなら flex:1 推奨（固定幅なら width 指定でもOK） */
#menu li{
  flex:1 1 20%;          /* 例：PCで5等分。固定幅派は width:180px; などに変更 */
  display:flex;          /* ← li をflex化して高さを受け取る */
  background:#5cbee0;
  font-size:18px;
  font-weight:900;
  margin:0;
  padding:0;
  border-right:#FFF 1px solid;
  box-sizing:border-box;
}
#menu li.left_child{ border-left:#FFF 1px solid; }

/* リンク：箱いっぱいに伸ばして中央配置 */
#menu li a{
  flex:1;                /* ← a を親(li)いっぱいに伸ばす */
  display:flex;          /* ← 中身を中央に */
  align-items:center;    /* 垂直中央 */
  justify-content:center;/* 水平中央 */
  padding:10px 21px;
  min-height:44px;       /* タップしやすい最低高（任意で調整） */
  color:#fff;
  text-decoration:none;
}

/* 現在地/hover */
#ov, #menu #ov{ background:#39a8d8; }
#menu li a:hover{ background:#39a8d8; }

/* スマホ：2列でも高さが揃う */
@media screen and (max-width:600px){
  #menu{ justify-content:center; }
  #menu li{
    flex:1 1 50%;        /* 2列均等 */
    font-size:14px;
    text-align:center;
    border-right:#FFF 1px solid;
	  border-bottom:#FFF 1px solid; 
  }
  #menu li:nth-child(2n){ border-right:none; }
}

}







.top_slider{
	width:100%;
	height:auto;
}

/* スライドショー */
#slider {
    overflow:hidden;
    position:relative;
    width:100%;
}

#sliderInner {
    position:relative;
    left:50%;
    width:3040px;
    margin-left:-1520px;
}
#sliderInner li {
    width:511px;
}

#slideFilterL, #slideFilterR {
    position:absolute;
    top:0;
    width:511px;
    height:631px;
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter:"alpha( opacity=80 )";
    background:#fff;
}
#slideFilterL {
    left:0;
}
#slideFilterR {
    right:0;
}


#information_box{
	width:920px;
	text-align:left;
	margin:20px auto;
}

#information_box_center{
		width:920px;
		text-align:center;
	margin:20px auto;
}

#information_box h3{
	font-size:40px;
	font-weight:100;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}

.ifrm-box{
	width:920px;
	height:260px;
	padding-bottom:10px;
	margin:0 auto;
	text-align:center;
	position:relative;
}

.ifrm-box img.top_info{
	position:absolute;
	top:-30px;
	left:350px;
	background-color:#FFF;
}

.box_line{
	width:920px;
	margin-top:100px;
	height:150px;
	padding-top:40px;
	border:solid 1px #2982b4;
}
	
.ifrm{
	width:890px;
	height:150px;
	font-size: 18px;
}

#footer_back{
	background-color:#f1f1ef;
}
/* 全体の横幅を最大920pxにして中央寄せ */
.footer_box {
  max-width: 920px;
  margin: 0 auto;
  padding:30px 16px; /* 端の余白(任意) */
}

/* デフォルト：4列 */
.sns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* 画像間の余白 */
  align-items: center;
  justify-items: center;
}

/* 画像を包んでいる a をボタンっぽくする */
.sns-list a {
  display: inline-block;
  padding: 4px;              /* 画像の周りに少し余白 */
  border-radius: 6px;        /* 角丸（お好みで） */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);  /* 影 */
  transition: 
    opacity 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* マウスオーバーで画像を薄くする */
.sns-list a:hover img {
  opacity: 0.6;
}

/* ホバー時に影を強く＆少し持ち上げる */
.sns-list a:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* 画像はコンテナ幅にフィット */
.sns-list img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* タブレット・スマホ：2列のまま */
@media (max-width: 900px) {
  .sns-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ※スマホ1列はナシにしたので、このメディアクエリは削除 */


#footer_logo{
    text-align: center;
	background-color:#f1f1ef;
}

.footerlogo_box {
	max-width:920px;
	margin: 0 auto;	padding: 0;
}

.footerbana_box {
	max-width:920px;
	margin: 0 auto;	padding: 0;
}

.footerlogo_box ul{	
	display:table;
	margin: 0 auto;	padding: 0;
}

.footerlogo_box li{
    display: table-cell;
    text-align: center;
    vertical-align:middle;
	padding: 0.5em;
}

#footer_logo p{
	font-size:11px;
	padding: 0.5em 0;
}


.banner{
	width: 100%;
	max-width: 560px;
	height: auto;
	padding: 10px 20px;
	border: 2px #2276a1 solid;
text-align: center;
	margin: 40px auto 20px;
		font-size: 24px;
	font-weight: bold;
	color: #2276a1;
}

.top_comment{
	width: 100%;
	max-width: 560px;
		height: auto;
	padding: 10px 20px;
			font-size: 16px;
	color: #2276a1;
	background-color: #e8f7fa;
		margin: 0px auto 60px;
}


@media screen and (max-width:768px)
{
.footerlogo_box {
	display:block;
}
.footerlogo_box li{
	display:block;
}
}


.mouseover img:hover { 
	opacity: 0.6; filter: brightness(110%);
	-webkit-transition: all .3s; transition: all .3s;
}

#map_canvas{
	width:90%;
	height:800px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

.G_map_btn {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  margin:0 auto;
}
.G_map_btn::before,
.G_map_btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.G_map_btn,
.G_map_btn::before,
.G_map_btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.G_map_btn {
  background-color: #2982b4;
  border: 2px solid #2982b4;
  color: #fff;
  line-height: 50px;
}
.G_map_btn:hover {
  background-color: #fff;
  border-color: #2982b4;
  color: #2982b4;
}

.googlemap{
	position:relative;
	margin:2em auto;
	padding-bottom:56.25%;
	height:100%;
	width:100%;
	overflow:hidden;
}
.googlemap iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
}


/* SNS 設定 */

	.feed {
		width: 100%;
		max-width: 284px;
		height: 300px;
		float: left;
		margin: 2em 0.5em;
		padding:2px;
		background-color:#D6D6D6;
		overflow: hidden;
		  overflow-y: scroll;
	}
	.fb {
		width: 100%;
		max-width: 288px;
		float: left;
		margin: 2em 0.5em;
		padding:2px;
}

	.insta{
		max-width: 920px;	
		width:100%;
		height: auto;
}

@media screen and (max-width:768px)
{
	
	.tw {
		float: none;
		margin: 1em auto;
	}
	.fb {
		float: none;
		margin: 1em auto;
		max-width: 100%;
}
	
	.insta{
		margin: 0 auto;
		width:96%;
}
}


/* blog 設定 */
.rss-box{
	float: left;
	max-width: 256px;
	width: 100%;
	max-height: 300px;
	height: auto;
	margin: 2em 0.5em;
	text-align: left;
	border: 2px #C6C6C6 solid;
	list-style:square;
	padding:0px 15px;
	overflow: scroll;

}

.rss-box a{
	text-decoration: none;	
}

p.rss-title{
	width: 100%;
	height: 40px;
	border-bottom: 1px #C6C6C6 solid;
	text-align: center;
	background-repeat: repeat;
	background-image: url("../img/blog_bg.gif")
}

a.rss-title{
	font-size:16px;
	margin:30px;
	line-height:40px;
	color:#1C1C1C;
	font-weight: bold;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

ul.rss-items{
	font-size:13px;
	padding:0 15px;
}

li.rss-item{
	list-style:square;
	padding-bottom:5px;
}

@media screen and (max-width:768px)
{
	
.rss-box{
		float: none;
		margin: 1em auto;
	}
}


.footer-note{margin-top:26px;color:var(--muted);font-size:.95rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);}

.riyou-pdf a {
	background:#f1f5f9;
	border: 1px solid transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 200px;
	height: 40px;
	color: #333;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
	margin: 0 auto;
	margin-bottom: 20px;
}

.riyou-pdf a::before {
	content: '';
	position: absolute;
	top: 0px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid #333;
}

.riyou-pdf a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -35px;
	transform: translateY(-50%);
	width: 70px;
	height: 1px;
	background-color: #333;
}

.riyou-pdf a:hover {
	background-color:#c4dfe4;
}

/* ラッパー */
.wrap{
  max-width: 1200px;
  margin: 40px auto 300px;
  padding: 0 20px;
}

/* PC：3列モザイクレイアウト */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ★ 3列固定 */
  grid-auto-rows: 180px;                             /* ★ 1マスの高さの基準 */
  gap: 12px;

  /* ★ モザイクの配置を完全指定 */
  grid-template-areas:
    "p1  p1  p2"
    "p1  p1  p3"
    "p4  p5  p6"
    "p4  p5  p6"
    "p7  p8  p6"
    "p10 p10 p10";
}

/* 共通カード */
.event-photo{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:transform .3s ease, box-shadow .3s ease;
}

/* 画像をマスいっぱいに（ピッタリおさまる） */
.event-photo img{
  width:100%;
  height:100%;
  object-fit:cover;    /* 枠いっぱいに表示（はみ出しはトリミング） */
  display:block;
}

/* hover */
.event-photo:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

/* 各写真の配置（モザイク指定） */
.photo1  { grid-area: p1; }  /* 左上を大きく 2x2 */
.photo2  { grid-area: p2; }  /* 右上小さめ */
.photo3  { grid-area: p3; }  /* 2段目右 */
.photo4  { grid-area: p4; }  /* 3〜4段目 左 */
.photo5  { grid-area: p5; }  /* 3〜4段目 中央（★縦に広い） */
.photo6  { grid-area: p6; }  /* 3〜5段目 右（★05 の右隣と2段分そろう） */
.photo7  { grid-area: p7; }  /* 5段目 左 */
.photo8  { grid-area: p8; }  /* 5段目 中央 */
.photo10 { grid-area: p10;}  /* ★ 最下段フル幅 1 行だけ */

  /* photo10 だけ特別：1列＆高さは画像に合わせる */
  .photo10{
    width: 100%;
    aspect-ratio: auto;      /* 固定比率をやめる */
    height: 440px;            /* 中身の画像の高さに合わせる */
  }


/* ▼ スマホ用（768px以下） */
@media (max-width: 768px){
	
	.wrap{
		margin-bottom: 40px;
}
	
  /* スマホでは Flex で2列レイアウト */
  .gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 通常の写真（1〜8枚目） */
  .event-photo{
    width: calc(50% - 4px);  /* 2列 */
    margin: 0;
    padding: 0;
    aspect-ratio: 4 / 3;     /* 全部の高さを揃える */
    overflow: hidden;
  }

  /* photo10 だけ特別：1列＆高さは画像に合わせる */
  .photo10{
    width: 100%;
    aspect-ratio: auto;      /* 固定比率をやめる */
    height: auto;            /* 中身の画像の高さに合わせる */
  }

  /* 画像は枠いっぱいに表示 */
  .event-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* photo10 だけは画像の高さも自動にして「余白ゼロ」に */
  .photo10 img{
    height: auto;
  }
}

/* 施設ページ */

.f_box{
	width:460px;
	padding: 0px 0px 0px 4px;
	background-color: #000000;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	  display: flex;
  justify-content: space-between; /* 左に「リブインラボの施設紹介」、右に「1F」 */
  align-items: center;
	margin: 0 auto;
	margin-bottom: 10px;
}

.f_box .kaisu{
	background-color: #DD7B7C;
	padding: 2px;
}

.floor-2f{margin-top: 60px}

.labo_box{
	width: 100%;
	padding: 10px;
	margin-top: 40px;
}


    .container {
      max-width: 1600px;
      margin: 24px auto;
      padding: 0 16px;
    }


    /* 共通UI */

    .card{
      background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08);
      overflow:hidden; border:1px solid #eef1f4;
    }
    .card-header{padding:14px 16px; border-bottom:1px solid #eef1f4; display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; color:#379ad3;}
    .card-header .label{font-weight:800; font-size:clamp(16px, 2.6vw, 20px);}
    .card-header .subtitle{color:#6b7280; font-size:.80em}
    .card-media{width:100%}
    .card-body{padding:16px; text-align: justify}
    .meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:10px}
    .chip{background:#f4f6f8; border:1px solid #e5e8eb; padding:.25em .7em; border-radius:999px; font-size:.92em}

    /* レイアウト */
    .one-col{display:block}
    .two-col{
      display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem;
      align-items:start;
    }
    .three-col{
      display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem;
      align-items:start;
    }
    section.floor{display:flex; flex-direction:column; gap:1.5rem}

    .labo_box img{max-width:760px}

    /* レスポンシブ */
    @media (max-width: 1024px){
      .three-col{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 640px){
		      .two0-col{grid-template-columns: 1fr;}
      .three-col{grid-template-columns: 1fr;}
    }

/* 施設ページここまで */



  .archive { max-width: 880px; margin: 2rem auto; padding: 0 1rem; }
  .archive__title { font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin-bottom: 1rem; }
  .archive__year { font-size: 1.125rem; margin: 1.5rem 0 .75rem; }
  .archive__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

  .archive__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    align-items: center;
    padding: 1rem 1.125rem;
    border: 1px solid hsl(0 0% 86%);
    border-radius: 12px;
    background: white;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .02s ease, border-color .2s ease;
  }
  .archive__row:where(:hover, :focus-visible) {
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    border-color: hsl(210 100% 65%);
    outline: none;
  }
  .archive__row:active { transform: translateY(1px); }

  .archive__date { font-weight: 500; }
  .archive__issue { font-weight: 700; }
  .archive__cta { font-size: .875rem; opacity: .7; white-space: nowrap; }

  /* モバイル対応 */
  @media (max-width: 520px) {
    .archive__row {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "date issue"
        "cta cta";
      gap: .5rem .75rem;
    }
    .archive__date { grid-area: date; }
    .archive__issue { grid-area: issue; text-align: right; }
    .archive__cta { grid-area: cta; font-size: .8rem; }
  }

  /* ダークモード */
  @media (prefers-color-scheme: dark) {
    .archive__row {
      background: hsl(0 0% 10%);
      border-color: hsl(0 0% 22%);
    }
    .archive__row:where(:hover, :focus-visible) {
      border-color: hsl(210 100% 70%);
      box-shadow: 0 8px 20px rgba(0,0,0,.4);
    }
  }

    .access-wrap {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px 16px 40px;
    }

    .access-card {
      background-color: #e5f7fb;
      padding: 10px 20px 24px;
      box-sizing: border-box;
		text-align: center
    }

    .section-title {
      font-size:1.8rem;
      margin: 30px 0 4px;
      font-weight: bold;
	color: #4192be;
    }

    p {
      margin: 0 0 6px;
      font-size: 1.2rem; 
		font-weight: bold;
	color: #4192be;
    }

    ul {
      margin: 4px 0 10px 1.2em;
      padding: 0;
    }

    li {
      margin-bottom: 4px;
      font-size: 0.95rem;
    }

    .note {
      font-size: 0.88rem;
      margin-top: 8px;
    }

    /* レスポンシブ調整 */
    @media (max-width: 600px) {
      .access-card {
        padding: 18px 14px;
      }

      .access-title {
        font-size: 1.3rem;
      }

      .section-title {
        font-size: 1rem;
      }
    }