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

/* CSS リセット ※基本的にリセット部分は修正しない事 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
　　margin: 0;
　　padding: 0;
　　border: 0;
　　font-size: 100%;
　　font: inherit;
    font-weight: inherit;
　　vertical-align: baseline;
　　outline: none;
　　-webkit-box-sizing: border-box;
　　-moz-box-sizing: border-box;
　　box-sizing: border-box;
}

html { height: 101%; }

/* ゆっくり遷移する */
html {
	scroll-behavior: smooth;
}

/* クロスブラウザ対応（半透明可） */
.transparent {
　　filter: alpha(opacity=50);
　　-khtml-opacity: 0.5;
　　-moz-opacity: 0.5;
　　opacity: 0.5;
}

/* PC用プログラム回り込み */
.program_flex{
	display: flex;
}
.program_item{
	width:50%;
	/*height:100px;*/
}
.program_item_herf{
	width:25%;
	/*height:100px;*/
}
.program_between{
	justify-content: space-between;
}
.program_box1{
}
.program_box2{
}


.row {
    padding-top: .25rem!important;
    padding-bottom: .25rem!important;
}
.ui.celled.table tr td:first-child, .ui.celled.table tr th:first-child {
    border-left: 1px solid rgba(34,36,38,.1);
}

/* 水平垂直に配置 */
.vertically-centered {
　　min-height: 6.5em;
　　display: table-cell;
　　vertical-align: middle;
}

/* テーブルのゼブラストライプ化 */
tbody tr:nth-child(odd) {
　　background-color: #ddd;
}
    
/* 段落のドロップキャップ化 */
p:first-letter{
　　display: block;
　　margin: 5px 0 0 5px;
　　float: left;
　　color: #ff3366;
　　font-size: 5.4em;
　　font-family: Georgia, Times New Roman, serif;
}
 
/* メインコンテンツの中央配置 */
    
.wrap {
  position: unset;
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */
 
  max-width: 960px; /* 2 */
 
  padding-right: 0px; /* 3 */
  padding-left:  15px; /* 3 */
}    
    
/* 要素を横に並べるだけ */
#columns-3 {
　　text-align: justify;
　　-moz-column-count: 3;
　　-moz-column-gap: 12px;
　　-moz-column-rule: 1px solid #c4c8cc;
　　-webkit-column-count: 3;
　　-webkit-column-gap: 12px;
　　-webkit-column-rule: 1px solid #c4c8cc;
}
    
/* 01.切り取り線 */
.pline{
    position: relative;
    padding: 5px;
    text-align: center;
    color: #655;
    border-top: 1px dashed #109CE5;
    border-bottom: 1px dashed #aaa;
    background: #eee;
    text-shadow: 1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0px 5px 4px -4px rgba(0,0,0,0.3) inset;
    line-height: 1.4em;
}

/* ページ内リンク枠 */
.pagelink{
    position: relative;
    padding: 5px;
    text-align: center;
    color: #f9c03c;
    /* border-top: 1px dashed #109CE5; */
    /* border-bottom: 1px dashed #aaa; */
    background: #fff;
    /* text-shadow: 1px 1px 0 rgba(255,255,255,1); */
    /* box-shadow: 0px 5px 4px -4px rgba(0,0,0,0.3) inset; */
    line-height: 1.4em;
}


/* 新ボタン */
.button_lab a {
		/* background: #eee; */
		/* background: #f9c03c; */
		border-style: solid;
		border-color: #645417 ;
		/*background: #f3e68a;*/ /* 黄色 */
		background: #8cdfe7; /* 水色 */
		border-radius: 3px;
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* margin: 0 auto; */
		margin: 0 0;
		/* max-width: 280px; */
		max-width: 100%;
		padding: 10px 25px;
		color: #645417 ;
		transition: 0.3s ease-in-out;
		font-weight: bold;
		font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}
.button_lab a:hover {
		/* background: #313131; */
		/*background: #d3c32f;*/
		background: #49a4ce;
		color: #FFF;
}
.button_lab a:after {
		content: '';
		width: 5px;
		height: 5px;
		border-top: 3px solid #313131;
		border-right: 3px solid #313131;
		transform: rotate(45deg) translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20px;
		border-radius: 1px;
		transition: 0.3s ease-in-out;
}
.button_lab a:hover:after {
		border-color: #FFF;
}
.buttonleadtext{
	font-size: 0.6em;
	}
.buttonleadtext_m{
	font-size: 0.65em;
	}
.buttonleadtext_l{
	font-size: 0.7em;
	}
.leadbox{
	font-size: 0.8em;
    padding: 0 0.5em 0.1em;
	}
.leadbox p {
    line-height: 0.8em !important;
    font-weight: bold;
}



/* テキストリスト */
table.column3-list {
    font-size: 80%!important;
    line-height: 1.4em;
}
.column2-list div{
    font-size: 1.5em;
}


/* Page top */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 2%;
  bottom: 7%;
  background: #645417;
  opacity: 0.7;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* Footer */
footer{
    margin-top: 2em;
    font-size: 0.9rem;
    background-color: #109CE5;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
}

/* メディアクエリ（端末ごとの専用変更） */

@media (max-width: 1440px) {
.bg-lab{ background-position: center;}
/*table {
  width: 100%;
  table-layout: fixed;
}*/

table td {

  /*word-break: break-all;*/
  overflow-wrap : break-word;
}
table.ui.celled.striped.table.column3-list.table5s {
    display: inherit;
}
}
@media (max-width: 1220px) {
.bg-lab{ background-position: center;}
}
@media (max-width: 1060px) {
.bg-lab{ background-position: center;}
}

/* iPad　横 以下 */
@media (max-width: 1024px) {
.bg-lab{ background-position: center;}
}
@media (max-width: 920px) {
.bg-lab{ background-position: center;}
}
@media (max-width: 820px) {
.bg-lab{ background-position: center;}
}

/* iPad 縦 以下 */
@media (max-width: 769px) {    
.bg-lab{ 
    background-position: right 30% bottom 68%;
    background-image: url("../../feature/content/images/topimg_oc2024_2_sp.jpg");
    background-color: none;
	background-size: 100% auto;
    min-height: 170px;
    }
    
}

/* PC以下 */
@media (max-width: 767px) {
.bg-lab{background-position: center;}

.fleftsp{float:left;}
.frightsp{float:right;}
.cbsp{clear:both!important;}

.ml-10sp{margin-left: -10px!important;}/* 話題の研究室SP調整用 */
    
.w-50.center.tsto.pt-3 {
    width: 100%!important;}
h1.justify {
    font-size: 160%;
}

#ui{height: 0px; margin: 0 auto;}
#ui .text {
    font-size: 2rem;}
    
    
#map {
    background-size: 95%;
    width: 100%;
    height: 280px;
}
    
.modal-content {
    width: 100%!important;
    top: 0;
    }
    .modal-body{
        width: auto;
    }

.bg-change.no3 {
    top: 0;
    right: -22%;
    left: 25%;
    margin-top: -10%;
}
.bg-change.no4 {
    top: 0;
    right: -22%;
    left: 25%;
    padding-bottom: 5%;
    margin-top: -8%;
}
    
    


/* SPテーブル調整 */
.column3-list tr {
    padding: 0!important;
}
.ui.table:not(.unstackable) tr>td.list-title-sp3, .ui.table:not(.unstackable) tr>th {
    height: auto!important;
    /*font-size: 75%!important;*/
    line-height: 1.2em;
    width: 100%!important;
    border-top: 1px solid #666!important;
    border-bottom: 1px solid #666!important;
    background-color: #e2e2e2;
    padding: 10px 5px 5px 12px!important;
}

.linkbutton-sp3 {
    font-size: 100%!important;
    position: relative;
    height: auto!important;

}
td.center.aligned.collapsing.linkbutton-sp3.pclinktxt {
    width: auto!important;
    white-space: normal!important;
    font-size: 100%!important;
}
td.left.aligned.collapsing.linkbutton-sp3.pclinktxt {
    width: auto!important;
    white-space: normal!important;
    font-size: 100%!important;
}

    
    

/* PC以下指定の閉じ（消さない用注意） */
}
/* PC以下指定CSSの終了 */

@media (max-width: 600px) {
.bg-lab{background-position: center;}
}
@media (max-width: 540px) {
.bg-lab{background-position: center;}
}
@media (max-width: 520px) {
.bg-lab{background-position: center;}
}
@media (max-width: 414px) {
.bg-lab{background-position: center;}
}
@media (max-width: 375px) {
.bg-lab{background-position: center;}
}

/* iphone5s */
@media (max-width: 330px) {
    
.bg-lab{background-position: center;}
.ui.column.grid>[class*="eight wide"].column, .ui.grid>.column.row>[class*="eight wide"].column, .ui.grid>.row>[class*="eight wide"].column, .ui.grid>[class*="eight wide"].column {
    width: 50%!important;
    margin-right: 2px;
    font-size: smaller!important;
}
.ui.column.grid>[class*="eight wide"].column, .ui.grid>.column.row>[class*="eight wide"].column, .ui.grid>.row>[class*="eight wide"].column, .ui.grid>[class*="eight wide"].column {
    width: 50%!important;
    margin-right: 2px;
    font-size: 74%!important;
}
.ui.sortable.table#tableS1:not(.unstackable) td.t-play{width: 100%; padding-top: 1em!important;}
.ui.sortable.table#tableS2:not(.unstackable) td.t-play{width: 100%; padding-top: 1em!important;}
.ui.sortable.table#tableS3:not(.unstackable) td.t-play{width: 100%; padding-top: 1.2em!important;}
.ui.sortable.table#tableS2:not(.unstackable) td.t-play1{padding-top: 1em!important;}
.ui.sortable.table#tableS2:not(.unstackable) td.t-play2{padding-top: 2.3em!important;}
.ui.sortable.table#tableS3:not(.unstackable) td.t-play{padding-top: 1em!important;}
td.h10vh { height: 15vh!important; }
.justify {
    display: flex;
    justify-content: space-between;
  }

h2.live {
    position: relative;
    overflow: hidden;
    padding: 2rem 0rem 2rem 7rem;
    border: 2px solid #000;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
	cursor: pointer;
    background: linear-gradient(
80deg
,#05FBFF, #1E00FF);
    width: 100%;
}
.ui.table:not(.unstackable) tr>td, .ui.table:not(.unstackable) tr>th {
    background: 0 0;
    border: none!important;
    padding: .25em .75em!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    font-size: initial;
}
.ui.table.table5s:not(.unstackable) td {
    font-size: smaller;
}
.font-5s-96 { font-size: 96%!important; }
.font-5s-82 { font-size: 82%!important; }
.font-5s-78 { font-size: 78%!important; }
.font-5s-76 { font-size: 76%!important; }
.font-5s-72 { font-size: 72%!important; }
.font-5s-70 { font-size: 70%!important; }
    
}


@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}


/* 配置用リスト */
    .fukidashi-parts {
        max-width: 700px;
        margin: 0 auto;
    }
    .fukidashi-parts ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: table;
        table-layout: fixed;
        width: 100%;
        /* list-style: none;
        display: table;
        table-layout: fixed;
        width: 100%;
        max-width: 960px;
        display: block; 
        margin: 0 auto;
        padding: 0 auto; */
    }
    .fukidashi-parts ul li {
        display: table-cell;
        box-sizing: border-box;
    }
    .fukidashi-parts ul li a {
        display: block;
        /*padding: .4em .8em;*/
        text-decoration: none;
        color: #333;
        background: none;
        text-align: center;
    }
    .fukidashi-parts ul li a:hover {
        background: none;
    }

/*clubとlaboratory_eventのタブ切り替え全体のスタイル*/
.tabs {
    margin-top: 50px;
    padding-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: 0 auto;} 
  /*タブのスタイル*/
  .tab_item_none {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #e7e7e7;
    line-height: 50px;
    font-size: 0.9em;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .tab_item_none_blue {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #5ab4bd;
    line-height: 50px;
    font-size: 0.9em;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 0.9em;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .tab_item:hover {
    opacity: 0.75;
  }
  /*ラジオボタンを全て消す*/
  input[name="tab_item"] {
    display: none;
  }
  /*タブ切り替えの中身のスタイル*/
  .tab_content {
    display: none;
    padding: 20px 20px 0;
    clear: both;
    overflow: hidden;
    font-size: 0.8em;
  }
  /*選択されているタブのコンテンツのみを表示*/
  #page_01:checked ~ #page_01_content,
  #page_02:checked ~ #page_02_content,
  #page_03:checked ~ #page_03_content {
    display: block;
  }
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item {
    background-color: #5ab4bd;
    color: #fff;
  }

/*indexのタブ切り替え全体のスタイル*/
.maintabs {
    margin-top: 50px;
    padding-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: 0 auto;} 
  /*タブのスタイル*/
  .maintab_item_none {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #e7e7e7;
    line-height: 50px;
    font-size: 0.9em;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .maintab_item {
    width: calc(100%/5);
    height: 50px;
    border-bottom: 3px solid #5ab4bd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 0.9em;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .maintab_item:hover {
    opacity: 0.75;
  }
  /*ラジオボタンを全て消す*/
  input[name="maintab_item"] {
    display: none;
  }
  /*タブ切り替えの中身のスタイル*/
  .maintab_content {
    display: none;
    padding: 20px 20px 0;
    clear: both;
    overflow: hidden;
    font-size: 0.8em;
  }
  /*選択されているタブのコンテンツのみを表示*/
  #page_01:checked ~ #page_01_content,
  #page_02:checked ~ #page_02_content,
  #page_03:checked ~ #page_03_content,
  #page_04:checked ~ #page_04_content,
  #page_05:checked ~ #page_05_content {
    display: block;
  }
  /*選択されているタブのスタイルを変える*/
  .maintabs input:checked + .maintab_item {
    background-color: #5ab4bd;
    color: #fff;
  }
  /* PC以下 */
@media (max-width: 767px) {
    .maintab_item {
        font-size: 0.65em;
        width: calc(100%/3);
    }
 }

/* PDF下の文字が大き過ぎるの調整 */
.ui.cards.ml-1 {
    font-size: 0.75em;
}

/* ぱんくず */
.breadcrumb_campas {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8em;
  }
  .breadcrumb_campas li {
    display: inline;
    list-style: none;
    font-weight: bold;
  }
  .breadcrumb_campas li a:after {
    content: ' >';
    padding: 0 0.2em;
    color: #555;
  }
  .breadbreadcrumb_campascrumb li:last-child:after {
    content: '';
  }
  .breadcrumb_campas li a {
    text-decoration: none;
    color: blue;
  }
  .breadcrumb_campas li a:hover {
    text-decoration: underline;
  }

/* 動画サムネ一覧 */
figure {
    float: left;						 
    margin: 0px 10px 10px 10px; 
    background-color: none;	
}
figure img {
    display: block;					
    /*margin: 0px 0px 10px 0px;*/ 
}
.video-btn.figure img {
    margin: 10px 10px 5px;
    cursor: pointer;
}
figcaption {
    font-size: 0.9em;				
    text-align: left;			
    margin: 5px 10px;
    display: block;
    width: 270px;
    height: 180px;
}
figcaption span{
    font-weight: bold;
    text-align: center !important;			
    margin: 10px 0;
    display: block;
    text-decoration: underline;
}
div.youtube_tmb {
    display: block;
    background-color: #efefef;
    /*width: 360px;*/
    width: 290px;
    margin: 0px 10px 10px 0px;
    float: left;
}
div.block_tmb:after {
    content: "";			
    clear: both;
    display: block;
}
.video-btn.figure {margin: 0px 10px 10px 0px;}


@media screen and (max-width: 640px) {
  div.youtube_tmb {
		width: 100%;
		margin: 0 0 10px 0;
	}
	.video-btn.figure {
	    margin: 0;
	}
	.video-btn.figure img {
		padding: 5px 5px 0 5px;
		cursor: pointer;
		width: 95%;
	}
	figcaption {
		font-size: 0.9em;				
		text-align: left;			
		margin: 5px 10px;
		display: block;
		width: auto;
		height: 90px;
	}
}



/* 画像回り込みテキストボックス */
.imgSection {
    overflow: hidden;
    font-size: 0.9em;
}
.imgSection .imgR {
    margin-bottom: 0;
}
.imgSection .imgR {
    float: right;
}
.section img, .section .imgblock img {
    max-width: 100%;
    height: auto;
}
.boxType {
    background-color: #efefef;
    padding: 10px 15px 10px 15px;
}


.pre_table {
	font-size: 0.8em;
	width: 100%;
}
.pre_table th {
  background: #ebebeb;
  border: solid 1px #ccc;
  color: #565656;
  padding: 10px;
	font-size: 1.0em;
	font-weight: bold;
}
.pre_table tr th.ichirui {
  background: #ebdbe0 !important;
}
.pre_table tr th.nirui {
  background: #d8dbeb !important;
}
.pre_table tr th.sanrui {
  background: #d1e8ea !important;
}
.pre_table td {
  border: solid 1px #ccc;
  padding: 10px;
}
@media screen and (max-width: 640px) {
  .pre_table {
    width: 100%;
  }
  .pre_table tr {
    display: block;
    float: left;
  }
  .pre_table tr td, 
  .pre_table tr th {
    border-left: none;
    display: block;
    /*height: 50px;*/
  }
  .pre_table thead {
    display: block;
    float: none;
    width: 100%;
  }
  .pre_table thead tr {
    width: 100%;
	font-size: 1.2em;
	font-weight: bold;
  }
  .pre_table tbody {
    display: block;
    float: left;
    width: 100%;
  }
  .pre_table tbody tr {
    width: 30%;
	font-size: 1.0em;
  }
  .pre_table tbody tr.last {
    border-left: none;
	width: 70%;
	padding-bottom: 7px;
  }
  .pre_table tbody td:last-child {
    border-bottom: solid 1px #ccc;
  }
.pre_table tr td.haight_50 {
	height: 50px;
  }
.pre_table tr th.haight_50 {
	height: 50px;
  }
.pre_table tr td.haight_80 {
	height: 150px;
  }
.pre_table tr th.haight_80 {
	height: 150px;
  }
.pre_table tr td.haight_200 {
	height: 200px;
  }
.pre_table tr th.haight_200 {
	height: 200px;
  }
.pre_table tr td.haight_300 {
	height: 300px;
  }
.pre_table tr th.haight_300 {
	height: 300px;
  }
.pre_table tr td.haight_350 {
	height: 350px;
  }
.pre_table tr th.haight_350 {
	height: 350px;
  }
.leadbox p {
    line-height: 1.1em !important;
    font-weight: bold;
	}
}