@charset "utf-8";

/* ----------- キャンパス周辺地図 ---------------------------------------------------------------------------------------------------------- */
.map {
	width:100%;
	margin:30px auto;
}
@media (max-width: 768px) {
.map {
	margin:15px auto;
}}/* マップ枠設定(横幅指定用) */

.google_map {
	position:relative;
	overflow: hidden;
	height: 0;
	padding-top: 56.25%;
	}
@media (max-width: 900px) {
.google_map {
	padding-top: 100%;
}}/* マップ枠設定(比率指定用4：3・・・75%，16：9・・56.25%) */

.google_map iframe {
	width:100%;
	height: 100%;
	padding:3px;
	position: absolute;
	top:0;
	left:0;
	border:1px solid #036;
}/* マップ設定 */
	
.map_caption {
	width:100%;
	text-align: center;
	margin:5px auto;
}/* 地図のキャプション */

/*-----------アクセス情報---------*/
.paragraph {
	margin:0 auto 30px;
	padding:0 15px;
	width:100%;
}/* 段落設定 */

.paragraph p {
	text-indent:1.8rem;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
}/* 段落内文章基本設定 */
@media (max-width: 768px) {
.paragraph p {
	font-size: 1.7rem;
	line-height: 1.6;
}}/* 段落内文章基本設定 */

.process {
	margin:15px auto;
	font-size:1.8rem;
	font-weight: bold;
	text-align: left;
	border-bottom:#036 2px solid;
}/* アクセス工程の見出し */

/* ----------- 駅情報 ------------ */
.info_station {
	max-width: 90%;
	margin:30px auto 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}/* 駅情報大枠 */

.JR_himeji, .Sanyo_himeji {
	width:40%;
	border:2px solid #fff;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-indent: 0;
	position: relative;
}/* 駅情報枠設定 */

.JR_himeji:hover, .Sanyo_himeji:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}/* 駅情報枠ホバー設定 */

.JR_himeji {
	padding-top:15px;
}/* 位置調整設定（JR）*/

.JR_himeji a, .Sanyo_himeji a {
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}/* 駅情報リンク設定　リンクの対象を枠全体に設定 */

.JR_himeji > p:first-child, .Sanyo_himeji > p:first-child {
	width:100%;
	padding-top:3px;
	text-align: center;
	font-size:3rem;
	font-weight: bold;
	position: relative;
}/* 駅名設定（姫路 ひめじ）*/

.JR_himeji > p:first-child span {
	font-size:2rem;
	color:#004FB2;
	position: absolute;
	top:5px;
	left:22%;
}/* 駅名設定（JR）*/

.JR_himeji > p:nth-child(2) {
	width:100%;
	margin-top:-10px;
	padding-left:5px;
	font-weight: bold;
	text-align: center;
	font-size:1.5rem;
}/* 駅名設定（ひめじ-Himeji）*/

.JR_himeji div {
	width:100%;
	font-size: 1.0rem;
	color:#fff;
	background-color:#004FB2;
	padding:10px 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width:1550px) {
.JR_himeji div {
	font-size: 0.8rem;
}}/* 前後の駅名設定(姫路) */

.JR_himeji div p {
	text-indent: 0;
}/* 前後の駅名設定(姫路) インデント設定*/

.Sanyo_himeji p:first-child {
	letter-spacing: 1rem;
	padding-left:25%;
}/* 駅名設定（ひめじ）*/

.Sanyo_himeji p:first-child span {
	font-size:1.7rem;
	position: absolute;
	top:8px;
	left:10%;
}/* 駅名設定（さんよう）*/

.Sanyo_himeji p:nth-child(2) {
	width:100%;
	margin-bottom:5px;
	text-align: center;
	padding-left:10%;
	align-items: center;
	font-size: 1.8rem;
	font-weight: bold;
	position: relative;
}/* 駅名設定（姫路）*/

.Sanyo_himeji p:nth-child(2) span {
	font-size: 1.1rem;
	position: absolute;
	top:3px;
	left:35%;
}/* 駅名設定（山陽）*/

.Sanyo_himeji p:nth-child(3) {
	width:100%;
	background-color: #E31B13;
	color:#fff;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.25rem;
	position: relative;
	top:-5px;
}/* 駅名設定（Sanyo-Himeji）*/

.Sanyo_himeji p:nth-child(4) {
	width:100%;
	text-align: right;
	padding-right:20px;
	letter-spacing: 2rem;
	position: relative;
	top:-4px;
}/* 前後の駅名設定(山陽) */

.Sanyo_himeji p:nth-child(4)::before, .Sanyo_himeji p:nth-child(4)::after {
	content:"";
	width:20px;
	height:15px;
	background-color:#D0101A;
}/* 前後の駅名矢印設定(山陽) */

.Sanyo_himeji p:nth-child(4)::before {
	clip-path: polygon(50% 0, 100% 25%, 50% 50%);
	position: absolute;
	top:7px;
	left:calc(50% - 20px);
}/* 前後の駅名▶印設定(山陽) */

.Sanyo_himeji p:nth-child(4)::after {
	clip-path: polygon(50% 0, 0 25%, 50% 50%);
	position: absolute;
	top:14px;
	left:calc(50% - 20px);
}/* 前後の駅名◀印設定(山陽) */

.Sanyo_himeji p.sy43_1, .Sanyo_himeji p.sy43_2 {
	width:30px;
	height:30px;
	border-radius:50%;
	border:1px solid #fff;
	box-shadow: 0 0 0 1px #E31B13;
	font-size:1.3rem;
	line-height: 1.3rem;
	text-indent: 0;
	text-align: center;
	background-color:#E31B13;
	color:#fff;
	position: absolute;
}/* 駅番号設定(山陽) */

.Sanyo_himeji p.sy43_1 {
	top:15px;
	right:10%;
}/* 駅番号設定上(山陽) */

.Sanyo_himeji p.sy43_2 {
	width:25px;
	height:25px;
	font-size:1.1rem;
	line-height: 1.1rem;
	bottom:3px;
	left:20px;
}/* 駅番号設定下(山陽) */

@media screen and (max-width:960px) {
.JR_himeji, .Sanyo_himeji {width:48%;height:90px;padding:10px 0 0 0}/*駅情報枠設定*/
.JR_himeji > div, .Sanyo_himeji p:not(:nth-child(2)):not(:nth-child(3)) {display: none;}/*駅情報非表示設定*/
.JR_himeji > p:first-child, .Sanyo_himeji p:nth-child(2) {
	font-size:1.8rem;
	line-height: 1.8;
	letter-spacing:normal;
	padding:0;
	position: relative;
	top:10px;
}/* 駅名設定 */
.JR_himeji > p:first-child span, .Sanyo_himeji p:nth-child(2) span {
	font-size:1.4rem;
	line-height: 1.5;
	padding: 0;
	letter-spacing:normal;
	position: absolute;
	top:-12px;
	left:10%;
}/* 駅名設定（<山陽>姫路）*/
.JR_himeji > p:nth-child(2) {
	background-color:#004FB2;
	color:#fff;
	font-size:1.2rem;
	padding: 2px 0;
}/* 駅名設定（ひめじHimeji）*/
.Sanyo_himeji p:nth-child(3) {top:0;font-size:1.2rem;padding: 2px 0;}/*駅名調整（Sanyo-Himeji*/
.Sanyo_himeji p:nth-child(2) span {color:#D0101A;}/*駅名調整（<山陽>姫路*/
}/* スマホ用表示 */

/* -----------写真挿入------------ */
.photo_space {
	max-width: 90%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin:20px auto 10px;
}/* 写真挿入大枠設定 */

.photo_space img {
	width:48%;
	background-color:#fff;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}/* 写真の設定 */

/* ----------- キャンパスマップ ------------ */
figure.himeji_campus {
	margin: 20px auto;
	width:100%;
}/* キャンパスマップ枠 */
	
figure.himeji_campus > div {
	width:90%;
	margin:0 auto 25px;
}/* キャンパスマップ枠 */

figure.himeji_campus > div img {
	width:100%;
	border-radius: 10px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}/* キャンパスマップ */

figure.himeji_campus img:hover {
	transform:scale(1.05);
}/* キャンパスマップ：マウスオーバーで写真拡大 */

figure.himeji_campus figcaption, .west_gate figure figcaption, .text_and_img figure figcaption {
	text-align:center;
	margin-top:10px;
}/* 各キャプション設定 */

/*-----------アクセス　西門------------*/
.text_and_img {
	width:95%;
	margin:0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
@media screen and (max-width:850px) {
.text_and_img {
	flex-direction: column;
}}/* テキスト+写真枠設定(横並び→縦並び) */	

.text_and_img div {
	width:47%;
	text-indent:1.6rem;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
}
@media screen and (max-width:850px) {
.text_and_img div {
	width:100%;
	margin-bottom: 15px;
}}/* 説明枠設定 */	

.text_and_img figure {
	width:51%;
}
@media screen and (max-width:850px) {
.text_and_img figure {
	width:90%;
	margin:0 auto;
}}/* 写真枠設定 */

.text_and_img figure img {
	width:100%;
	background-color:#fff;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}/* 西門の写真 */


/* ----------- スライダー設定 ------------ */
.wrap_slider {
	overflow: hidden;
	width:calc(100vw - 450px);
	margin:50px auto 80px;
}/* sticky設定のメニューがあるとうまく枠内に収まらないようだ */
@media screen and (max-width: 1400px) {
.wrap_slider {
	width:100%;
	margin:20px 0;
}}/* スライダー枠設定 */

.slick-slide {
	height: auto!important;
}/* ガタツキ防止 */

.slider {
	width: 100%;
}/* スライダー枠設定 */
	  
.slider div {
	margin-right: 2px;
	margin-left: 2px;
}/* スライダー画像間マージン設定 */
	  
.slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}/* スライダー画像設定 */

/* ----------- アクセス　スライダー ------------ */
.access_slider .slider p {
	text-align: center;
	line-height: 2;
	text-indent: 0;
	margin: 0;
	padding: 0;
	color:#fff;
	background-color: #1e5799;
	}
@media screen and (max-width:768px) {
.access_slider .slider p {
	font-size:1.3rem;
}}/* スライダー説明文 */	




/* ----------- 更新履歴 ----------------------------------------------------- 更新履歴 ------ */
.log {
	width:100%;
	background:#fcfcfc;
	border:1px solid #ccc;
	box-shadow: 1px 1px 3px #333;
	border-radius: 5px;
	margin-bottom: 30px;
	padding-bottom: 30px;
	overflow: hidden;
}/* 更新履歴枠の設定 */

.log div {
	width:100%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}/* 更新履歴（年単位）の大枠設定 */
 
.log div p, .log details summary {
	width: 200px;
	margin:10px 0 0 20px;
	padding:3px 0;
	text-align: center;
	color:#036;
	font-weight: 900;
	letter-spacing: 0.2em;
	border:1px solid #999;
	border-radius: 10px;
	background: linear-gradient(#FEFEFE, #F3F5F5);
	text-shadow: 1px 3px 3px rgba(0,0,0,0.2), 0px -2px 9px rgba(255,255,255,0.3);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
@media screen and (max-width:768px) {
.log div p {
	width:100%;
	margin:0;
	text-align: left;
	padding-left:1em;
	border:none;
	border-radius: 0;
}}/* 更新年の枠と書式設定 */

.log dl {
	border-left: 2px solid #deecff ;
	width:calc(100% - 100px - 20px - 3px);/* 余白から幅を指定 */
	margin:5px 0 0 auto;
	padding:10px 25px 10px 25px;
}
@media screen and (max-width:768px) {
.log dl {
	width:95%;
	padding:10px 10px 10px 16px;
}}/* 更新内容枠設定 */

.log dt {
	width: 100%;
	display: flex;
	align-items: center;
	font-weight: 500;
	gap:7px;
	position: relative;
}
@media screen and (max-width:768px) {
.log dt {
	font-size:1.7rem;
}}/* 更新年月日設定 */

.log time::before {
	content: '\f2f1';
	font-weight: 900;
	font-family: 'Font Awesome 7 Free';
	margin-right:0.7em;
}/* 更新マーク設定 */
	
.log dt::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #3992ea;
	border:1px solid #3992ea;
	position: absolute;
	left: -31px;
	top: calc(50% - 5px);
	border-radius: 100%;
}
@media screen and (max-width:768px) {
.log dt::before {
	left: -22px;
}}/* 更新月日の左の丸印 */
	
.log dt.recent::before {
	background: #ffffff;
}/* 更新月日の左の丸印 .recent */

.log dt.new::after {
	content:"NEW";
	font-size: 1rem;
	padding:0 5px;
	color:red;
	font-weight:bold;
	animation:NEW_blink 1s ease-in-out infinite alternate;
	position: relative;
	top:-8px;
}/* NEWアイコン設定 */
	
@keyframes NEW_blink {
	0% { background-color:#fff; color: red; }
  100% { background-color:red;  color: #fff; }
}/* 点滅設定 */

.log span.design, .log span.info_scheduled, .log span.fix, .log span.info_labo, .log span.info_school, .log span.info_work, .log span.info_etc {
	height:20px;
	color:#fff;
	font-size:1.4rem;
	line-height: 20px;
	font-weight: normal;
	border-radius: 3px;
	padding:0 5px;
	position: relative;
}/* 更新内容表示 */

.design, .info_labo {
	background:#004789;
}/* デザイン・研究室背景色 */

.info_scheduled {
	background:orange;
}/* 内容更新・予定背景色 */

.fix, .info_school {
	background:#2c991e;
}/* 不具合修正・工学研究科背景色 */

.info_work {
	background:red;
}/* 研究成果背景色 */

.info_etc {
	background:black;
}/*その他背景色*/

.log dd {
	width:100%;
	font-size: 1.7rem;
	text-align: justify;
	text-justify: inter-character;
	position: relative;
	padding:5px;
	margin-bottom: 25px;
	}
@media screen and (max-width:768px) {
.log dd {
	font-size:1.6rem;
	line-height: 1.6;
}}/* 更新内容書式 */

/* ------------- 過去logの折り畳み.details ----------- */
.log details summary {
	display: block;
	width: 200px;
	margin:10px auto 0 20px;
	padding:3px 0;
	text-align: center;
	color:#036;
	font-weight: 900;
	letter-spacing: 0.2em;
	border:1px solid #999;
	border-radius: 10px;
	background: linear-gradient(#FEFEFE, #F3F5F5);
	text-shadow: 1px 3px 3px rgba(0,0,0,0.2), 0px -2px 9px rgba(255,255,255,0.3);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	position: relative;
}/* 折り畳み表示 */

.log details summary::-webkit-details-marker {
	display: none; 
}/* 折り畳み表示 summaryの三角印を消す（Chrome_Safari) */

.log details summary::after {
	content: '\f107';
	font-weight: 600;
	font-size:1.4rem;
	font-family: 'Font Awesome 7 Free';
	position: absolute;
	top:8px;
	right:5px;
}/* 折り畳み表示アイコン */

.log details[open] summary::after {
	content: '\f106';
}/* 折り畳み表示アイコンopen時 */

.log details summary:hover {
	background: linear-gradient(#F3F5F5, #FEFEFE);
	cursor: pointer;
	}/*折り畳みマウスホバー時設定*/

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

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



/* ----------- サイトポリシー・お知らせ ---------------------------------- */
.introduction {
	width:85%;
	padding:20px 50px;
	text-indent:1em;
	font-size:1.9rem;
	margin:30px auto 80px;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
	background: #fff;
	border-radius: 8px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
@media screen and (max-width: 768px) {
.introduction {
	width:95%;
	font-size:1.6rem;
	line-height: 1.6;
	padding:10px;
	margin:10px auto 30px;
}}/* 序文設定 */

.introduction ul, .description ul {
	margin-left:80px;
	text-indent: 0;
}
@media screen and (max-width: 768px) {
.introduction ul, .description ul {
	width:95%;
	font-size:1.6rem;
	line-height: 1.6;
	padding:10px;
	margin-left:20px;
}}/* 序文中リスト設定 */

.description {
	width:95%;
	margin:15px auto;
	font-size:1.9rem;
	text-indent: 1em;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
}
@media screen and (max-width: 768px) {
.description {
	width:100%;
	font-size:1.6rem;
	line-height: 1.6;
}}/* 記述欄設定 */

.description img {
	width:auto;
	height:auto;
}/* 記述欄画像（別窓アイコン）設定 */

.insert_icon {
	float:right;
	margin:5px 0 5px 20px;
}/* QRコード・Get pfdアイコン */

.uh_emblem {
	width:100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:30px;
	}
@media screen and (max-width:768px) {
.uh_emblem {
	display:block;
}}/* スマホではflex解除（.img_emblemのfloatで表示）*/

.img_emblem {
	width:20%;
	min-width:200px;
	text-indent: 0;
	float:left;
}
@media screen and (max-width:768px) {
.img_emblem {
	width:15%;
	min-width:125px;
	margin-right:15px;
}}/* 学章枠設定 */

.img_emblem img {
	width:100%;
}/* 学章画像設定 */



/* ----------- サイトマップ ---------------------------------- */
/* ----------- サイトマップ枠設定 ----------- */
.sitemap {
	width:100%;
	background:#fcfcfc;
	box-shadow: 1px 1px 3px #333;
	border-radius: 8px;
	padding: 30px;
}
@media screen and (max-width:768px) {
.sitemap {
	padding: 10px;
}}/* サイトマップ大枠設定 */

.sitemap_category {
	width: 100%;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap:10px;
	background:#fefefe;
	border:2px solid #036;
	margin-bottom: 80px;
}
@media screen and (max-width:768px) {
.sitemap_category {
	flex-direction: column;
	gap:0;
	margin-bottom: 30px;
}}/* サイトマップ カテゴリー大枠設定 */

.sitemap_img {
	flex:1;
	position: relative;
}/* サイトマップ 画像枠設定 */

.sitemap_list {
	width:400px;
	display: flex;
	align-items: center;
}
@media screen and (max-width:768px) {
.sitemap_list {
	width:100%;
}}/* サイトマップリスト枠設定 */

/* ----------- サイトマップ画像側設定 ----------- */
.sitemap_img p {
	position: absolute;
  	top: 50%;
  	left: 50%;
	width:100%;
	transform: translate(-50%, -50%);
	color:#fff;
	font-size: 2.5rem;
  	font-weight: bold;
	letter-spacing: 0.2em;
	text-shadow: 1px 1px 1px #000;
	font-family: "Noto Serif JP", sans-serif;
	text-align: center;
	background:rgba(0, 0, 0, 0.3);
	border:1px solid #fff;
	border-left:none;
	border-right:none;
	padding:5px 20px;
}
@media screen and (max-width:768px) {
.sitemap_img p {
	font-size: 1.8rem;
}}/* オーバーラップ文字設定 */

.sitemap_img img {
	width:100%;
	height:100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
	object-position: center center;
}/* サイトマップ画像枠の画像 */

.sitemap .sitemap_category:last-child img {
	object-position: center -50px;
}/* サイトマップ画像：ご案内用の写真位置調整 */

/* -------- サイトマップメニュー側設定 ---------- */
.sitemap_list div {
	width:100%;
	margin:10px 0;
	padding-left:30px;	
}/* サイトマップメニュー枠 */
@media screen and (max-width:768px) {
.sitemap_list div {
	width:80%;
	margin:10px auto;
}}/* サイトマップリスト枠設定 */

.sitemap_list a {
	display: block;
	color:#333;
	font-size: 2rem;
	line-height: 2;
	padding-left:30px;
	padding-right:30px;
}
@media screen and (max-width:768px) {
.sitemap_list a {
	font-size: 1.6rem;
	line-height: 1.6;
}}/* サイトマップメニュー書式 */

.sitemap_list a:hover {
	font-weight:500;
	background: #F3F5F5;
}/* サイトマップメニュー マウスホバー時設定 */

.sitemap_list a.pagelink {
	font-weight: 500;
	position: relative;
}/* ページリンクの場合 */

.sitemap_list a.pagelink::before {
	font-family: "Font Awesome 7 Free";
	content:"\f07c";
	font-weight: 500;
	position: absolute;
	top:1px;
	left:1px;
}/* ページリンクの場合　アイコン表示 */

/*.sitemap_list a.pagelink:hover::before {
	content:"\f07c";
}/* ページリンクの場合アイコン表示 マウスホバー時設定 */

.sitemap_list .sub {
	margin-left:1.5rem;
	position: relative;
}/* サイトマップサブメニュー位置設定 */

.sitemap_list .sub::before {
	font-family: "Font Awesome 7 Free";
	content:"\f0da";
	font-weight: 700;
	position: absolute;
	top:-5px;
	left:-15px;
}/* サイトマップサブメニュー設定 */

.sitemap_list .sub_sub {
	margin-left:3rem;
	position: relative;
}/* サイトマップサブメニュー位置設定 */

.sitemap_list .sub_sub::before {
	font-family: "Font Awesome 7 Free";
	content:"\f0da";
	font-weight: 700;
	position: absolute;
	top:-5px;
	left:-15px;
}/* サイトマップサブメニュー設定 */