@charset "utf-8";

/* ---------- 共通設定 ----------------------------------------------------------- 共通設定 ------------ */
*, *::before, *::after {
    margin:0;
    padding:0;
    box-sizing: border-box;
}/* 全ての余白をリセット */

:root {
	interpolate-size: allow-keywords; 
	}/* サイズキーワードによるアニメーションを許可（detailsの開閉を滑らかに）*/

html {
    font-size:62.5%;
	scroll-padding-top: 75px;
    scroll-behavior: smooth;
}/* ルート設定 */

body {
    font-size:1.8rem;
    line-height:1.8;
    font-family:"Noto Sans JP", sans-serif;
    color: #333;
    background:#fff;
}/* 基本設定 */

h1, h2 {
	width: 100%;
	margin-bottom:10px;
	background: linear-gradient(-90deg, rgba(254, 254, 254, 0.7), #F3F5F5);
	font-size: 5rem;
	font-weight: 900;
	padding-left:75px;
	position: relative;
	text-shadow: 1px 4px 3px rgba(0,0,0,0.2), 0 -2px 18px rgba(255,255,255,0.3);
	}
@media screen and (max-width:768px) {
h1, h2 {
	font-size:2.5rem;
	padding-left:30px;
}}/* 見出し枠h1設定 */

h1 span, h2 span {
	display: block;
	font-size: 2rem;
	font-weight: 500;
	text-shadow: none;
	position: relative;
	top:-13px;
}
@media screen and (max-width:768px) {
h1 span, h2 span {
	font-size:1.6rem;
	padding-bottom:5px;
	top:-3px;
}}/* 見出し枠h1サブ設定 */

h1::before {
	width: 8px;
	border-radius: 3px;
	content: "";
	display: inline-block;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 25px;
	background-color: #1e5799;
	box-shadow: 0 0 .5rem #fff, inset 0 0 .5rem #fff, 0 0 1rem rgb(26, 148, 255), inset 0 0 1rem rgb(26, 148, 255);
}
@media screen and (max-width:768px) {
h1::before {
	left: 7px;
}}/* 見出し枠h1設定（左の飾り）*/

h2::before {
	font-family: "Font Awesome 7 Free";
	content: "\f14a";
	font-weight: 400;
	position: absolute;
	top:3px;
	left:18px;
}
@media screen and (max-width:768px) {
h2::before {
	left: 3px;
}}/* 見出し枠h2設定（左の飾り）*/

h3, h2.h3 {
	background: #1e5799;
	color:#fff;
	font-weight:700;
	font-size:2.4rem;
	line-height: 2.4;
	border-radius: 4px;
	padding:4px 0 4px 55px;
	margin-bottom:30px;
	text-shadow: 0 4px 3px rgba(0,0,0,0.4), 0 8px 13px rgba(0,0,0,0.1), 0 18px 23px rgba(0,0,0,0.1);
	position:relative;
}
@media screen and (max-width:768px) {
h3, h2.h3 {
	font-size:1.8rem;
	line-height: 2;
	margin-bottom:15px;
	padding-left:45px;
}}/* 見出し枠3設定 */
	
h3::before, h2.h3::before {
	font-family: "Font Awesome 7 Free";
	content: "\f124";
	font-weight: 700;
	transform:rotate(45deg);
	position:absolute;
	top:5px;
	left:15px;
}/* 見出し枠3アイコン設定 */

h4 {
	font-size:2.2rem;
	font-weight: 700;
	padding-left:25px;
}
@media screen and (max-width:768px) {
h4 {
	font-size:1.8rem;
	padding-left:15px;
}}/* 見出し枠4設定 */

a {
	color:#3366cc;
	text-decoration:none;
	}/*リンク・アクセス済みリンク設定*/
	
a:hover {
	color:#ff6600;
	}/*リンク上にマウス→赤色＋下線表示*/

img {
    border-width:0;
    vertical-align: middle;
}/* 画像設定初期化 */

.fa {
   margin-right:0.2em;
}/* 右に半角スペース */

.faa {
   margin-right:1em;
}/* 右にスペース */
	
.fb {
   margin-left:0.2em;
}/* 左に半角スペース */

.em {
	color:#d63838;
	font-weight: 700;
}/* 強調 */

.graph {
	max-width: 100%;
	box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
	background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
	background-size: 14px 14px;
	background-repeat: repeat;
	background-color: #ffffff;
	color: #333333;
	}/* 背景の罫線効果 */

.section {
    padding: 10px 20px;
    margin-bottom: 80px;
	border:1px solid #ddd;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}
@media screen and (max-width:768px) {
.section {
	margin-bottom: 30px;
	padding: 10px 10px;
}}/* セクション設定 */

.section:last-child {
	margin-bottom: 0;
}/* セクション最後の余白は無 */

.btn_link {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width:120px;
  	padding:5px 1px 5px 0;	
  	margin: 0 auto;
  	font-size:1.7rem;
  	line-height: 1.7;
  	font-weight: bold;
  	border-radius: 4px;
  	color: #036;
  	background: linear-gradient(#FEFEFE, #F3F5F5);
  	box-shadow: rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;
  	position: relative;
  	transition: 0.5s;
}/* リンクボタン共通設定 */

.btn_link:hover {
  	color: #fff;
  	background:#004789;
}/* リンクボタン共通設定ホバー時 */

.generated_img {
	text-align: right;
	margin-right:30px;
	color:#aaa;
	font-size:1.5rem;
}/* 生成AI記述書式 */

a[target="_blank"]::after {
    content: url("../image/target_blank.png");
    margin-right:0.2em;
    margin-left:0.1em;
}/* 窓アイコン設定 */

a.target_blank_icon_cancel[target="_blank"]::after {
	content:none;
}/* 窓アイコンキャンセラー */





/* -------------------- ヘッダー ------------------------------------------ ヘッダー ------------ */
/* -------------------- ヘッダー領域 ------------- */
header {
    width:100%;
	height:64px;
	display: flex;
	align-items: center;
    background: #00305c;
	padding:0 20px;
    color: #fff;
    position: sticky;
    top: 0;
  	z-index: 10;
	visibility:hidden;
	animation: increase_height linear both;
  	animation-timeline: scroll();
  	animation-range: 0 200px;
}/* ヘッダー　sticky固定設定 */
@media screen and (max-width:768px) {
header {
	padding:0 10px;
}}/* スマホは初期から表示 */

@keyframes increase_height {
    0% {height:0;background: #fff;visibility:hidden;}
  100% {height:64px;background: #00305c;visibility:visible;}
}/* スクロールするとヘッダー領域が現れる設定 */

.wrap_header {
	width:100%;
	height:100%;
	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	align-items: center;
}/* ヘッダー内コンテンツ大枠 */

/* ------------- ヘッダー領域内タイトル・メニュー ------------- */
.header_flag_labo {
  	display: flex;
  	align-items: center;
  	border-radius: 50px;
  	padding: 2px 15px 2px 2px;
  	font-size:2.4rem;
	line-height: 2;
  	font-weight: 900;
  	color:#036;
  	background:linear-gradient(#FEFEFE, #F3F5F5);
  	opacity: 0;
  	transform: translate(0, 50px) scale(0.70);
  	filter: blur(14px);
  	letter-spacing: 0.20em;
  	animation: title_fadeIn linear both;
  	animation-timeline: scroll();
  	animation-range: 0 200px; /* 必要に応じて調整 */
}/* 学章＋研究室名枠設定(ふわっと右斜め下から表示) */

.header_flag_labo p:last-child {
  	font-size:1.6rem;
	line-height: 1.6;
  	color:#333;
 	margin-left:4px;
  	padding-top:4px;
}/* 「研究グループ」設定 */

.header_flag_labo img {
  	width:50px;
  	height:50px;
  	margin-right:10px;
}/* ヘッダー内学章 */

.header_flag_labo a {
	position: absolute;
	width:100%;
	height:100%;
}

/* -------- アニメーション ------------- */
@keyframes title_fadeIn {
  0% {
    opacity: 0;
    transform: translate(0, 50px) scale(2.5);
    filter: blur(14px);
    letter-spacing: 0.20em;
  }
  50% {
    opacity: 0.15;
    transform: translate(0, 25px) scale(1.3);
    filter: blur(6px);
    letter-spacing: 0.10em;
  }
 75% {
    opacity: 0.85;
    transform: translate(0, 13px) scale(1.05);
    filter: blur(2px);
    letter-spacing: 0.03em;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
    letter-spacing: 0;
}}/* ヘッダー内研究室名用アニメーション(ふわっと下から表示) */



/* ------------- ヘッダー内グローバルメニュー ------------------------------------------------------ */
nav.header_menu {
	height:64px;
  	display:flex;
	justify-content: space-between;
  	align-items: center;
	z-index: 1;
}/* メニュー枠設定 */

.header_menu > ul {
	height:100%;
  	list-style: none;
  	display: flex;
	align-items: center;
	font-weight: 700;
  	gap:15px;
}/* メニュー並び調整 */
@media screen and (max-width:768px) {
.header_menu ul {
  	display: none;
}}/* メニュー スマホは表示しない */

.header_menu > ul > li {
	width:93px;
	height:100%;
	padding:0;
	display: flex;
	justify-content: center;
	align-items: center;
}/* リスト（リンク）設定 */

.header_menu > ul > li span {
	padding:0 15px;
	border-radius: 50px;
	position: relative;
}/* リスト（リンク）背景（角丸）設定 */

.header_menu > ul > li span::before {
	content: "";
	width:12px;
	height:13px;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 50% 50%);
	position: absolute;
	top:calc(100% - 2px);
	left:calc(50% - 6px);
}/* リスト（リンク）下の▼設定 */

.header_menu > ul > li:hover span {
	background: #1e5799;
	text-shadow: rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 3px, rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 8px;
}/* リストホバー時設定 */

.header_menu > ul > li:hover span::before {
	top:calc(100% + 4px);
}/* リスト（リンク）下の▼ ホバー時設定 */

/* --------------------------------- グローバルメニュー展開 ----------------------------------- */
.wrap_menu_top, .wrap_menu_lab, .wrap_menu_study, .wrap_menu_news {
	width:100%;
	position:fixed;
	top:64px;
	left:0;
	z-index: 2;
	opacity:0;
	visibility: hidden;
	background:#1e5799;
	transition:all 0.3s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px, rgba(0, 0, 0, 0.3) 0 7px 13px -3px, rgba(0, 0, 0, 0.2) 0 -3px 0 inset;
}/* グローバルメニュー大枠　通常は表示しない設定 */

.header_menu ul li:hover .wrap_menu_top, .header_menu ul li:hover .wrap_menu_lab, .header_menu ul li:hover .wrap_menu_study, .header_menu ul li:hover .wrap_menu_news,
.wrap_menu_top:hover, .wrap_menu_lab:hover, .wrap_menu_study:hover, .wrap_menu_news:hover{
	opacity:1;
	visibility: visible;
}/* ヘッダーメニューホバー時　グローバルメニューホバー時に表示する設定 */

/* ----- グローバルメニュー（展開後） -------------- */
.menu_top, .menu_lab, .menu_study, .menu_news {
	width:80%;
	margin:30px auto;
	display: flex;
	justify-content: center;
	gap:40px;
	padding:20px;
	border-radius: 10px;
	background: #fefefe;
	box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
}/* グローバルメニュー枠設定 */

/* ----- グローバルメニュー 写真 ---- */
.photo_container {
  	position: relative;
  	display: block;
	justify-content: right;
	width:calc(100vw * 4.5 / 18);
	height:auto;
}/* グローバルメニュー　写真枠設定 */

.photo_container img {
	width:100%;
	height:100%;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
	transition:0.3s ease;
}/* 写真 */

.photo_effect_overlay {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	color: #fefefe;
  	font-size: 1.8rem;
  	font-weight: bold;
	letter-spacing: 0.2em;
	text-shadow: 1px 1px 1px #000;
}/* グローバルメニュー　写真オーバーレイ */

.photo_effect_overlay p {
	font-family: "Noto Serif JP", sans-serif;
	background:rgba(0, 0, 0, 0.3);
	border:1px solid #fff;
	padding:5px 20px;
}/* グローバルメニュー　写真オーバーレイにかぶせる文字設定 */

/* ----- グローバルメニュー リンク ---- */
ul.global_menu_list {
	display: flex;
	padding:5px 20px;
	gap:10px;
	flex-direction: column;
	justify-content: center;
	list-style: none;
}/* グローバルメニュー　リンク枠設定 */

ul.global_menu_list li {
	position: relative;
	margin-left:15px;
}/* グローバルメニュー　リスト設定 */

ul.global_menu_list li::before {
	font-family: "Font Awesome 7 Free";
	content: "\f06c";
	font-weight: 900;
	position: absolute;
	top:1px;
	left:-28px;
	color:green;
}/* グローバルメニュー　リストのマーク設定 */

ul.global_menu_list a {
	color:#036;
	font-weight: normal;
	display: block;
	transition:0.3s;
}/* グローバルメニュー　リンクリスト書式 */

ul.global_menu_list a:hover {
	font-weight: 500;
	animation: text-blur 0.5s;
}/* グローバルメニュー　リンクリストホバー時設定 */

@keyframes text-blur {
    0% {filter: blur(0);}
   50% {filter: blur(4px);transform: scale(1.08);}
  100% {filter: blur(0);}
}/* テキストをぼかす */

/* ----- ハンバーガーメニュー -------------- */
.hamburger {
    width: 25px;
    height: 18px;
    cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index:20;
}
@media screen and (min-width:768px) {
.hamburger {
  	display: none;
}}/* ハンバーガーメニュー枠設定 */

.hamburger span {
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.3s;border:none;
}/* 三本線設定 */

/* --------- ×印アニメーション --------- */
.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(405deg) scale(0.7);
}/* 上の三本線設定 */

.hamburger.active span:nth-child(2) {
    opacity: 0;
}/* 中央の三本線設定 */

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-405deg) scale(0.7);
}/* 下の三本線設定 */

/* --------- ハンバーガーメニューの内容 --------- */
#modalOverlay {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:15;
	background: #000;
	opacity:0;
	pointer-events: none;
	transform: scale(1.02);
  	transition: opacity .3s ease, transform .3s ease;
}/* ハンバーガーメニューのオーバーレイ設定 */

#modalOverlay.active {
	opacity:0.8;
	transform: scale(1);
	pointer-events: auto;
}/* ハンバーガーメニュー表示時設定 */

#accordionMenu.active {
	display: block;
	position:fixed;
	top:50px;
	left:50%;
	transform:translateX(-50%);
	z-index:100;
}/* ハンバーガーメニューのオーバーレイにアコーディオンメニュ表示設定 */




/* ------------------------ タイトル ------------------------------------------------------------- */
/* --- タイトル大枠 ------ */
.area_title {
  width: 100%;
  padding: 30px 0 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}/* タイトル領域の設定 */

.wrap_title {
  width:100%;
  margin:0 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width:1980px) {
.wrap_title {
  margin:0 300px;
}}
@media screen and (max-width:768px) {
.wrap_title {
  flex-direction: column;
}}/* タイトル大枠 */

/* ------- 学章 タイトル --------------------------- */
.wrap_flag_title {
  width:calc(100% - 185px);
  display: flex;
  padding-right:30px;
}
@media screen and (max-width:768px) {
.wrap_flag_title {
  width:100%;
  padding-right:0;
}}/* 学章 タイトル枠 */

.flag {
  width:160px;
  aspect-ratio: 1 / 1;
  margin:auto 0;
}
@media screen and (max-width:768px) {
.flag {
  width:100px;
  min-width:100px;
}}/* 学章枠 */

.flag img {
	width:100%;
}/* 学章大きさ */

.univ_labo {
  width:530px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}/* 大学　研究科　研究室名　大枠設定 */

.univ_labo p:first-child {
  font-size:1.5rem;
  line-height: 1.5;
  margin-top:12px;
}
@media screen and (max-width:768px) {
.univ_labo p:first-child {
  font-size:1.2rem;
  line-height: 1.2;
  margin-top:-2px;
}}/* タイトル（大学名）*/

.univ_labo p:nth-child(2) {
  font-size:1.65rem;
  line-height: 1.65;
  text-indent: 1rem;
  margin-top:-3px;
  margin-bottom: 30px;
}
@media screen and (max-width:768px) {
.univ_labo p:nth-child(2) {
  font-size:1.35rem;
  line-height: 1.35;
  margin-bottom: 15px;
  margin-top:-3px;
  }}/* タイトル（研究科名）*/

.univ_labo p:last-child {
  text-indent: 1rem;
  font-size:4rem;
  line-height: 4rem;
  font-weight:900;
  letter-spacing:0.8rem;
  border-bottom: 5px solid #CBA45C;
  position: relative;
}
@media screen and (max-width:768px) {
.univ_labo p:last-child {
  text-indent: 1rem;
  font-size:3rem;
  line-height: 3rem;	
}}/* タイトル（熱化学）*/
	
.flicker {
  animation: flicker 20s infinite linear;	
  font-family:"Noto Serif JP","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}/* タイトル（熱化学）設定 */

@keyframes flicker {
  0%, 25%, 29%, 35%, 37%, 49%, 100% {color:#036;text-shadow:none;}
  27%, 36%, 37.5%, 95% {color:red;text-shadow: 0 0 20px #fb3636;}
}/* タイトル（熱化学）色の変化設定 */

.univ_labo p:last-child span:last-child {
  margin-left:7px;
  font-size:2.8rem;
  letter-spacing: 0.2rem;
}
@media screen and (max-width:768px) {
.univ_labo p:last-child span:last-child {
  font-size:1.8rem;
}}/* タイトル（研究グループ）書式 */

.univ_labo p:last-child::before {
  content:"";
  width:190px;
  border-bottom: 5px solid #0860A8;
  position: absolute;
  top:45px;
  left:150px;
}
@media screen and (max-width:768px) {
.univ_labo p:last-child::before {
  width:160px;
  top:35px;
  left:123px;
}}/* タイトル(研究グループ)青下線_熱化学のbefore */

.univ_labo p:last-child::after {
  content:"";
  width:200px;
  border-bottom: 5px solid #00305c;
  position: absolute;
  top:45px;
  left:340px;
}
@media screen and (max-width:768px) {
.univ_labo p:last-child::after {
  width:290px;
  top:35px;
  left:250px;
}}/* タイトル（研究グループの後）濃紺下線_熱化学のafter */


/* ---------- 各種日付 -------------------------------- */
.wrap_date {
  width:180px;
  display: flex;	
  flex-direction:column;
  align-items: center;
  gap:5px;
  margin-right:5px;
}
@media screen and (max-width:768px) {
.wrap_date {
  	width:100%;
  	height:30px;
  	padding-right:5px;
  	flex-direction: row-reverse;
  	justify-content: flex-end;
}}/* 各日付 更新履歴 表示大枠設定 */

/* ----- 更新履歴リンクボタン --------- */
.btn_log {
  	top:-5px;
}
@media screen and (max-width:768px) {
.btn_log {
  	width:100px;
  	margin:0;
  	top:0;
  	font-size:1.4rem;
  	line-height: 1.4;
}}/* 更新履歴ボタンの設定 */

/* ----- 更新日・公開日・DATE ------------ */
.dates {
  	width:100%;
  	display: flex;
  	flex-direction: column;
  	margin:0 auto;
  	padding:6px 10px;
  	font-size:1.5rem;
  	line-height:1.5;
 	color:#036;
  	font-weight:700;
	text-align: center;
 	background: linear-gradient(#FEFEFE, #F3F5F5);
 	box-shadow: rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;
}
@media screen and (max-width:768px) {
.dates {
  	width:150px;
  	padding:3px;
  	margin:0 0 0 auto;
  	background: none;
  	box-shadow: none;
}}/* 各日付表示大枠設定 */

/* --- 更新日・公開日 ---- */
.date {
  	width:100%;
  	display: flex;
  	flex-direction:column;
  	margin:0 auto;
}
@media screen and (max-width:768px) {
.date {
  	gap:0;
  	margin:0 0 0 auto;
  	box-shadow: none;
}}/* 更新日・公開日表示大枠設定 */

.date p {
  	width:100%;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	align-items: center;
  	padding:2px 0;
}
@media screen and (max-width:768px) {
.date p {
  	background:none;
  	box-shadow: none;
  	text-shadow: none;
  	gap:10px;
  	justify-content: flex-end;
  	font-size:1.3rem;
  	line-height: 1.3;
}}/* 更新日・公開日書式 */

.date p span:first-child {
  	border-radius: 2px;
  	background: rgba(0, 0, 0, 0.08);
  	padding:0 7px;
  	letter-spacing: 0.2rem;
}/* [更新日][公開日]書式 */

/* ------- 時刻 -------------------- */
.clock {
  	width:100%;
  	margin:2px auto 0;
  	display: flex;
  	flex-direction: column;
  	gap:3px;
}/* 時計大枠設定 */

/*-----DATE 日付-------*/
.clock_date {
  	width:100%;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	margin-top:1px;
}/* DATE 日付枠設定 */

.clock_date p:first-child {
  	border-radius: 2px;
  	background: rgba(0, 0, 0, 0.08);
  	padding:0 11px;
  	letter-spacing: 0.1rem;
}/* DATE書式 */

/* ---- 曜日　時刻 -------- */
.clock_current_time {
  	width:100%;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	align-items: center;
}/* 曜日 時間枠 */

#time-weekday {
  	margin-left:14px;
  	font-size: 1.4rem;
 	line-height: 1.4;
 	font-weight: 500;
 	border-radius: 50px;
  	box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0 inset;
  	padding:0 7px 0 8px;
}/* 曜日書式 */

.hhmmss {
  	display:flex;
  	justify-content: center;
  	align-items: center;
  	font-weight: 500;
  	padding:0 5px;
  	border:1px solid #ccc;
  	background: rgba(0, 0, 0, 0.02);
  	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}/* 時刻設定 */

.colon {
  	animation: blink 1.0s ease-in-out infinite;
  	padding:0 2px;
}/* 点滅設定 */

@keyframes blink {
  	0%   {opacity: 0;}
  	100% {opacity: 1;}
}/*点滅アニメーション設定*/

.clock_current_time p:last-child {
  	margin:2px 0 2px 6px;
  	padding:0 2px;
  	background: rgba(0, 0, 0, 0.1);
 	border-radius: 50px;
}/*秒書式*/

@media screen and (max-width:768px) {
.date > p:last-child, .clock {
	display: none;
}}/*公開日と時計はスマホでは表示しない*/




/* ---------------- コンテンツ --------------------------------------- コンテンツ ----------------*/
/* -------- レイアウト設計 ------- */
.wrap_menu_main {
	width:100%;
	margin-bottom: 80px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
@media screen and (max-width: 768px) {
.wrap_menu_main {
    margin-bottom: 30px;
}}/*メインコンテンツ大枠*/

.accordion-menu {
    width: 390px;
	padding:0 20px;
	height: fit-content;
	position: sticky;
    top: 90px;
}
@media screen and (max-width: 1400px) {
.accordion-menu {
    display: none;
}}/* メニュー大枠設定 */

.wrap_main {
	flex:1;
}
@media screen and (max-width: 1400px) {
.wrap_main {
    width:100%;
}}/* メイン大枠設定 */

/* ---------------------- アコーディオンメニュー ---------------- */
.accordion-menu details {
	box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
	}/* メインメニューのdetails */	

.accordion-menu summary {
	display: block;
	overflow: hidden;
	cursor: pointer;
	padding-left:35px;
	border:1px solid #999;
	border-bottom:none;
	background: linear-gradient(#FEFEFE, #F3F5F5);
  	color:#333;
	font-weight: 600;
	font-size:2rem;
	line-height: 2.5;
	transition:0.5s ease-in;
	position: relative;
}
@media screen and (max-width: 768px) {
.accordion-menu summary {
    font-size:1.7rem;
	line-height: 1.7;
}}/* 見出し設定 */

.accordion-menu details:last-child summary {
	border-bottom:1px solid #999;
}/* 見出し設定(最後は下線あり) */

.accordion-menu summary::-webkit-details-marker {
	display: none; 
}/* summaryの三角印を消す（Chrome_Safari) */

.accordion-menu details[open] summary {
	border-left:8px solid #1E5799;
	padding-left:28px;
	border-bottom: 1px solid #999;
}/* detailsがopenになった時のsummaryの角丸 */
	
.accordion-menu details summary:hover {
	background: linear-gradient(#F3F5F5,#FEFEFE );
}/* summaryのホバー時設定 */

.accordion-menu details summary::after {
	font-family: "Font Awesome 7 Free";
	content: "\f0fe";
	font-weight: 900;
	font-size: 1.8rem;
	line-height: 1.8;
	color:#666;
	position: absolute;
	top:8px;
	right:15px;
	transition:0.3s;
}
@media screen and (max-width: 768px) {
.accordion-menu details summary::after {
    top:-1px;
}}/* summaryの開く印（+）設定 */

.accordion-menu details[open] summary::after {
	content: "\f146";
	transform: rotate(180deg);
}/* summarの閉じる印（-）設定 */

.accordion-menu .details_content {
	width:100%;
	background: #FEFEFE;
	padding:10px;
	border-right:1px solid #999;
	border-left:1px solid #999;
}
@media screen and (max-width: 768px) {
.accordion-menu .details_content {
    font-size:1.7rem;
	line-height: 1.7;
}}/* detailsコンテンツ枠設定 */

.accordion-menu details:last-child .details_content {
	border-bottom:1px solid #999;
}/* detailsコンテンツ枠　最後は下線あり */

.accordion-menu .details_content p {
	padding-left:30px;
	position: relative;
}/* detailsコンテンツ書式 */

.accordion-menu .details_content a {
	color:#333;
	display: block;
}/* detailsコンテンツ リンク書式 */

.accordion-menu .details_content p:hover {
	font-weight:500;
	background: #F3F5F5;
}/* detailsコンテンツ(リンク) マウスホバー時設定 */

.accordion-menu details:not([open])::details-content {
    opacity: 0;
	block-size: 0;
	background-color: #deecff;
}/* details開閉時のアニメーション設定（閉じているとき）*/

.accordion-menu details::details-content {
	overflow: clip;
	transition-duration: 0.5s;
    transition-property: content-visibility, opacity, block-size, background-color;
	transition-behavior: allow-discrete;
}/* details開閉時のアニメーション設定（開くとき）*/

/* -------- アコーディオンメニュー階層アイコン設定 ---------- */
.accordion-menu .details_content p.here {
	background:#ebf4fd;
	font-weight: 700;
	color:#1E5799;
}/* 現在のページ表示 */

.accordion-menu .details_content p.here::before {
	font-family: "Font Awesome 7 Free";
	content:"\f07c";
	font-weight: 500;
	color:#333;
	position: absolute;
	top:1px;
	left:6px;
}/* 現在のページアイコン表示 */

.accordion-menu .details_content p.pagelink a {
	font-weight: 500;
	color:#1E5799;
}/* サイト内ページリンクの場合 */

.accordion-menu .details_content p.pagelink::before {
	font-family: "Font Awesome 7 Free";
	content:"\e185";
	font-weight: 500;
	color:#036;
	position: absolute;
	top:1px;
	left:6px;
}/* サイト内ページリンクの左側アイコン(フォルダー)表示 */

.accordion-menu .details_content p.pagelink:hover::before {
	content:"\f07c";
}/* サイト内ページリンクの左側アイコン（フォルダー）表示 マウスホバー時設定 */

.accordion-menu .details_content p.pagelink::after {
	font-family: "Font Awesome 7 Free";
	content:"\f2f5";
	font-weight: 700;
	font-size:1.6rem;
	color:#036;
	position: absolute;
	top:4px;
	right:20px;
	transition:0.5s;
}/* サイト内ページリンクの右側アイコン（→）表示設定 */

.accordion-menu .details_content p.pagelink:hover::after {
	right:5px;
}/* サイト内ページリンクの左側アイコン（フォルダー）表示 マウスホバー時設定 */

.accordion-menu .details_content p.sub {
	padding-left:45px;
}/* 第2階層メニュー位置設定 */

.accordion-menu .details_content p.sub::after {
	font-family: "Font Awesome 7 Free";
	content:"\f105";
	font-weight: 700;
	font-size:1.3rem;
	position: absolute;
	top:5px;
	right:25px;
	transition:0.5s;
}/* 第2階層メニューアイコン（>）設定 */

.accordion-menu .details_content p.sub:hover::after {
	font-weight: 900;
	right:20px;
}/* 第2階層メニューアイコン（>）ホバー設定 */

.accordion-menu .details_content p.sub_sub {
	padding-left:65px;
}/* 第3階層メニュー位置設定 */

.accordion-menu .details_content p.sub_sub::after {
	font-family: "Font Awesome 7 Free";
	content:"\f105";
	font-weight: 700;
	font-size:1.3rem;
	position: absolute;
	top:5px;
	right:25px;
	transition:0.5s;
}/* 第3階層メニューアイコン（>）設定 */

.accordion-menu .details_content p.sub_sub:hover::after {
	font-weight: 900;
	right:20px;
}/* 第3階層メニューアイコン（>）ホバー設定 */




/* -------- メインコンテンツ ----------------------------------------------------------------------------------- */
/*-----------トップ画像-----------------------------------------トップ画像---------*/
.top_img {
	width: 100%;
	margin:30px auto 50px;
	}
@media (max-width: 768px) {
.top_img {
    margin:15px auto;
}}/*トップ画像枠設定*/

.top_img_top {
	width:100%;
	margin:0 auto 50px;
}
@media (max-width: 768px) {
.top_img_top  {
    margin:0 auto 20px;
}}/*トップ画像（一番上の場合）枠設定*/

.top_img img, .top_img_top img {
	width:100%;
}/*画像おおきさ*/


/*------------ページトップボタン--------------------------------------------------------------------------------------------------------ページトップボタン---*/
.pagetop {
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}/*ページトップ設定*/

.pagetop a {
	display: flex;
	justify-content: center;
	width: 60px;
	height:60px;
	border-radius: 50%;
	text-decoration: none;
	color: #094582;
	background:#deecff;
	font-size:2.2rem;
	font-weight: bold;
	position: fixed;
	bottom: 70px;
	right:30px;
	z-index:9999;
	border:3px solid #fff;
	transition:0.5s;
	box-shadow: rgba(0, 0, 0, 0.07) 0 1px 2px, rgba(0, 0, 0, 0.07) 0 2px 4px, rgba(0, 0, 0, 0.07) 0 4px 8px, rgba(0, 0, 0, 0.07) 0 8px 16px, rgba(0, 0, 0, 0.07) 0 16px 32px, rgba(0, 0, 0, 0.07) 0 32px 64px;
	}
@media screen and (max-width: 768px) {
.pagetop a {
	bottom: 48px;
	right:10px;
}}/*ページトップ書式*/

.pagetop span {
	position: relative;
	}/*PageTop 位置調整起点*/

.pagetop span::before {
	content:"TOP";
	font-size: 1.4rem;
	width:50px;
	position: absolute;
	top:25px;
	left:0;
	}/*PageTop 位置調整*/

.pagetop a:hover {
	color:#fff;
	background:#094582;
	box-shadow: inset rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 3px, rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 8px; 
	text-shadow: rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 3px, rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 8px;
	}/*マウスオーバー時の色変化*/

.pagetop a:hover i.arrow_top {
	translate:0 -3px;
	text-shadow: rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 3px, rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 8px;
	}/*マウスオーバー時の位置変化*/




/* ----------- フッターの設定 ----------------------------------------------------------------------------------------------------------------- フッターの設定 --------- */
footer {
	background: #F3F5F5;
	border-top:1px solid #094582;
	border-bottom:1px solid #094582;
	box-shadow:0 2px 2px rgb(60 60 60 / 0.6) inset;
}/* フッター枠設定 */

/* ------------- サイト内リンクリスト ------------------- */	
.link_footer {
	width:100%;
	margin:50px auto 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:10px 10px;
}
@media screen and (max-width:768px) {
.link_footer {
	margin:30px auto;
	gap:50px 25px;
}}/* リスト大枠設定 */

.link_footer div {
	border-bottom:1px solid #333;
	width:19%;
}
@media screen and (max-width:768px) {
.link_footer div {
	width:38%;
}}/* 各リスト枠設定 */

.link_footer div > p {
	font-weight: 700;
	letter-spacing: 0.1rem;
	color:#036;
	text-align: center;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	margin-bottom: 5px;
}/* フッター リスト見出し設定 */
	  
.link_footer li {
	list-style: none;
	font-size:1.5rem;
	font-weight: 500;
	margin-bottom: 5px;
	text-align: center;
	position: relative;
}/* リストシンボルなし設定 */

/* -------------- 兵庫県立大学　工学研究科/工学部 リンク枠 -------------- */
.link_UH {
	width:100%;
	margin:50px 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap:50px;
}
@media screen and (max-width:768px) {
.link_UH {
	margin:30px 0;
}}/* 兵庫県立大学　工学研究科/工学部　リンク枠 */

.link_UH > a {
	font-weight: 500;
	color:#036;
	text-align: center;
	letter-spacing: 0.1rem;
	position: relative;
}
@media screen and (max-width:768px) {
.link_UH > a {
	font-size:1.6rem;
}}/* 兵庫県立大学　工学研究科/工学部　リンク枠 */

.link_UH > a::before {
	font-family: "Font Awesome 7 Free";
	content: "\f14d";
	font-weight: 400;
	position: absolute;
	top:0;
	left:-25px;
	transition:0.3s;
}/* 兵庫県立大学　工学研究科/工学部　リンクアイコン設定 */

.link_UH > a:hover::before {
	font-weight: 700;
	left:-23px;
}/* 兵庫県立大学　工学研究科/工学部　リンクアイコンホバー時設定 */

/* ------------- フッター内リンク設定 ------------------- */
.link_footer a, div.link_footer a:visited, .link_UH a {
	display: inline-block;
	text-decoration: none;
	position: relative;
	color:#036;
}/*リストリンク設定*/

.link_footer a::after, .link_UH a::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #036;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s;
}/* アンダーラインが伸びる */

.link_UH a::after {
	height:2px;
}/* 兵庫県立大学　工学研究科へのリンクは太下線 */

.link_footer a:hover::after, .link_UH a:hover::after {
	transform: scale(1, 1);
	transform-origin: left top;
}/*ホバー後、x軸方向に1（相対値）伸長*/

/* ------------- フッター内サイトポリシー・サイトマップ ------------------- */
.footer_sitepolicy {
	width:100%;
	padding:10px 20px;
	text-align: right;
	font-size:1.2rem;
	color:#fff;
	background:#1e5799;
}/* フッター サイトポリシー・サイトマップ枠設定 */

.footer_sitepolicy a {
	color:#fff;
}/* フッター サイトポリシー・サイトマップリンク設定 */

/* ------------- フッター内ページトップボタン ------------------- */
.footer_pagetop {
	width:100%;
	padding-bottom:25px;
	text-align: center;
	background:#1e5799;
}/* ページトップボタン枠設定 */

.footer_pagetop a {
	display: inline-block;
	width:150px;
	padding:0 15px 3px 35px;
	text-align: center;
	background:#00305C;
	color:#fff;
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 400;
	border-radius: 50px;
	border:2px solid rgb(255 255 255 / 0);
	position: relative;
}/* ページトップボタン設定 */

.footer_pagetop a:hover {
	font-weight: 700;
	background:rgb(45 60 86 / 0.6);
	box-shadow: 0 0 3px 5px rgba(136, 202, 255, 0.6);
	text-shadow: rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 3px, rgba(97, 202, 246, 0.7) 0 0 5px,rgba(97, 202, 246, 0.7) 0 0 8px;
	outline:2px solid rgb(255 255 255 / 1);
}/* ページトップボタン　ホバー時設定 */

.footer_pagetop a::before {
	content: '\f138';
	font-family: 'Font Awesome 7 Free';
	font-weight: 700;
	font-size:2.3rem;
    position: absolute;
    top: -4px;
	left: 4px;
	transition:0.3s;
}/* ページトップボタン矢印設定 */

.footer_pagetop a:hover::before {
	transform: rotate(-90deg);
}/* ページトップボタン矢印ホバー時設定 */

/* ------------- コピーライツ ------------------- */
.copy-rights {
	background:#00305C;
	color:#fff;
	font-size:clamp( 0.4rem, calc( -0.18666666666666665rem + 2.3466666666666667vw ), 1.28rem );
	text-align:right;
	padding:10px 20px 5px;
}/* コピーライツ */
@media screen and (max-width:768px) {
.copy-rights {
	text-align: center;
}}/* 各リスト枠設定 */



/* ------------- スクロールバナー ------------------- */
.scroll-list {
	width:100%;
	margin-top:30px;
  	display: flex;
  	list-style: none;
  	padding-inline: 0;
  	margin-inline: 0;
  	gap: 0;
  	background: none;
  	overflow: hidden;
}/* スクロール枠設定 */

.scroll-list li {
  	color: #337DBD;
	font-family: "Impact", "Noto Sans JP", "Arial", "Helvetica", sans-serif;
  	font-size: 8rem;
	font-weight: 500;
	line-height: 1.1;
  	white-space: nowrap;
  	padding: 0 1em 0 0;
 	margin: 10px 0 0;
  	animation: marquee-left 40s linear infinite;
}
@media screen and (max-width:768px) {
.scroll-list li {
    font-size: 5rem;
}}/* スクロール文字設定 */

@keyframes marquee-left {
  	100% {transform: translateX(-100%);}
}/* アニメーション設定 */



/*---------------ツールチップ---------------------------ツールチップ--------------*/
.tooltip {
	position: relative;
	cursor: pointer;
	color:#003;
	border-bottom: 1px dashed #003;
	text-decoration: none;
	font-weight: bold;
	}/*ポップアップ元設定*/

.tooltip .tooltip_text {
	opacity: 0; 
	visibility: hidden; 
	position: absolute; 
	left: 5%; 
	transform: translateX(-5%); 
	top: -45px; 
	display: inline-block;
	padding: 10px; 
	white-space: nowrap; 
	font-size: 1.4rem;
	line-height: 1.4;
	border:1px solid #fff;
	background: #4b4b4b; 
	color: #fff;
	border-radius: 3px;
	transition: 0.3s ease-in;
	text-indent: 0;
	}/*ポップアップ表示設定*/

.tooltip:hover .tooltip_text {
	opacity: 1;
	visibility: visible;
	}/*マウスオーバー時に表示する設定*/