/*　======================================================
スマートフォン縦(～768px)を基本設計とする。
　-　481px～ : スマートフォン横・タブレット縦
　-　769px～ : タブレット横・デスクトップ
======================================================　*/

/*　全デバイス共通
------------------------------------------------------　*/
html{
	/* フォントの設定 */
	font-size: 100%; 
	font-family: "Hiragino Kaku Gothic ProN W3", "Yu Gothic UI", "Meiryo UI", "AXIS Basic", "メイリオ", "MS UI Gothic", Verdana, sans-serif;
	color: #333; 
	cursor: default; 

}
	/* 600px以降100pxごとに1px大きくなる */
	@media (min-width: 600px) {
		html{
			font-size: calc(112.5% + 2 * (100vw - 600px) / 400); 
		}
	}

	/* 1000px以上は20pxに、画面を縮小固定表示 */
	@media (min-width: 1000px) {
		html{
			font-size: calc(125%); 
			width: 1000px; 
			margin-left: auto; 
			margin-right: auto; 
		}
	}

a{	font-weight: bold; text-decoration: none; cursor: pointer; }
a:link{	color: #00afcc; text-decoration: none; }
a:visited{	color: #00afcc; text-decoration: none; }
a:hover{	color: #ccc; text-decoration: underline; }
a:active{	color: #ccc; text-decoration: underline; }

br{	letter-spacing: normal; }

img{
	/* 画像の自動縮尺 */
	width: auto; 
	max-width: 100%; 
	height: auto; 
	border: 0px; 
}

table{
	/* テーブルの設定 */
	border-collapse: collapse; 
	width: 100%; 
	margin-bottom: 1em; 
}

	th,td{
		/* 各セルのデザイン */
		padding: 0.5rem 1rem; 
		text-align: center; 
		border-bottom: 1px solid #ccc; 
	}

	th{
		/* 見出しのデザイン */
		font-weight: bold; 
		background: #ffff99; 
		position: sticky; 
		top: 0; 
	}

ol{
	/* 順序付きリストの設定 */
	list-style-type: decimal; 
	line-height: 1.8em; 
	margin: 0; 
	padding: 0 0 0.5em 1.5em; 
}

	ol li{
		/* URLの禁則処理対応 */
		overflow-wrap: break-word; 
		word-wrap: break-word; 
	}

/*　ページ全体の設定
------------------------------------------------------　*/
#all{
	/* ページ全体の設定 */
	background: #fff; 
	width: 100%; 
	height: 100%; 
}

#header{
	/* ヘッダーの設定 */
	background: #fff; 
	width: 100%; 
	height: auto; 
	margin: 0; 
	padding: 0 0 0.5em 0; 
	position: relative; 
}

.title{
	/* タイトルバーのグラデーション */
	background: linear-gradient(to right, #70e1f5, #ffd194); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	width: 100%; 
	height: 5em; 
	margin-bottom: 0.5em; 
	padding: 0; 
	display: flex; 
	flex-flow: column wrap; 
	align-items: center; 
	justify-content: center; 
	color: #fff; 
	top: 0; 
}

	.title a:link{	color: #fff; text-decoration: none; }
	.title a:hover{	color: #fff; text-decoration: none; }
	.title a:visited{	color: #fff; text-decoration: none; }

.ja{
	/* 「M-Portマニュアル(教員版)」、「M-Port/UNIPA マニュアル(学生版)」の文字設定 */
	font-size: 137.5%; 
	letter-spacing: 0.4em; 
	text-align: center; 
}

.cont_title{
	/* 各コンテンツのタイトル */
	font-size: 112.5%; 
	color: #000; 
	font-weight: bold; 
	width: 100%; 
	border-bottom: 1px #333 solid; 
	margin: 1em 0 1em 0; 
	padding: 0; 
	text-align: left; 
}

#footer{
	/* フッターの設定 */
	width: 100%; 
	height: auto; 
	margin: 0; 
	padding: 2em 0 2em 0; 
}

td.tbl-r02{
	/* 縦並びの設定 */
	display: block; 
	border: 0; 
	text-align: left; 
}

/*プリンター表組レスポンシブ設定*/
@media screen and (max-width: 640px) {
  .tbl-r02 td{
    width: auto;
  }
  .tbl-r02 td {
    text-align: center;
    border-bottom: none;
    display: block;
    width: auto;
  }

	/* デスクトップ向けに横並びの設定 */
	@media screen and (min-width: 769px){
		.juden_box{
			width: 100%; 
			height: auto; 
			margin-bottom: 0.5em; 
			padding: 0; 
			display: flex; 
			flex-flow: row wrap; 
			justify-content: space-between; 
			align-items: stretch; 
			align-content: stretch; 
		}
	}	
}

	/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;
}

	/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

	/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

	/*タブのスタイル*/
.tab_item3 {
  width: calc(100%/2);
  height: 100px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: auto;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item3:hover {
  opacity: 0.75;
}

	/*ラジオボタンを全て消す*/
input[name="tab_item3"] {
  display: none;
}




	/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


	/*選択されているタブのコンテンツのみを表示*/

#first:checked ~ #first_content,
#classprofile:checked ~ #classprofile_content,
#basic:checked ~ #basic_content,
#other:checked ~ #other_content,
#cp_pc:checked ~ #cp_pc_content,
#cp_mobile:checked ~ #cp_mobile_content,
#basic2:checked ~ #basic2_content

{
  display: block;
}


	/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item2 {
  background-color: #5ab4bd;
  color: #fff;
}

.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  margin-bottom: -1px;
  padding: 10px .5em;
  border: 1px solid rgba(0,0,0,.2);
  cursor: pointer;
  display: block;
}
.tab-label:before {
  content: '▼';
  margin-right: .2em;
  display:inline-block;
  transform:rotate(-90deg);
}
.tab-switch:checked+.tab-label:before {
  transform:rotate(0);
}
.tab-content {
  height: 0;
  padding: 0 15px;
  overflow: hidden;
  opacity: 0;
}
	/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  margin-bottom: -1px;
  padding: 15px;
  opacity: 1;
  transition: .5s;
  border: 1px solid LightGray;
}
	/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

.scroll {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 3s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  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: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}