@font-face { 
  /* �@ ������font-family�Ŏw�肵�������O������*/
  font-family: "HGRSKP"; 

  /* �t�H���g���u�������p�X������ */ 
  src: url("../font/HGRSKP.TTF") format("truetype") }



@charset "Shift_JIS";


img,div,a{
	line-height: 1;
	margin: 0px;
	padding: 0px;
	border:none;
}

#wrappar{
  display: flex;
  flex-direction: row;
  height: 100vh; /* �S��ʕ\�� */
  width: 100vw;
  overflow: hidden; /* ���b�p�[�S�̂ł̃I�[�o�[�t���[���B�� */}

.title{
	margin: 3%;
	float: left;
	background: url("front-01.gif") repeat-y top #ffffff;
	height: 10%;

}

.top_img_logo{
	display:none;
}

iframe{
width:100%;
}

.fl3l{
float:left;
max-width:750px;
width: 100%;
background: url("../start/takuann.png");

}

.fl3l p{
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.3em/500% Georgia, serif;
}

.fl3r{
float:left;
max-width:400px;
width: 100%;
max-height: 550px;
height: 100%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align:left;
font: 1.3em/500% Georgia, serif;
}

.fl3r p{
line-height: 1.7;
  margin-left: 5%
  font: 100%/150% Georgia,serif;
padding-top:5%;

}

.fl3r h1{
  font-size: 30px;
  margin-left: 1%;
  font: 200%/200% Georgia, serif;

}


.fl3b{
float:left;
max-width:1250px;
width: 100%;
}

.menu {
  width: 20%;
  height: 100%;
  position: relative;
  z-index: 10;
  overflow-y: auto; /* �c�X�N���[����L���� */
  background-color: #ffffff;
}


.prof1{
float:left;
padding-top: 1%;
padding-bottom: 1%;
}

.profcontents{
width:100%;
text-align:left;
max-width:1200px;
margin:0 auto;
}

pre {
white-space: pre-wrap ;
text-align:left;
}

.otk{
background-image: url(../tsukemono/tsukemono.jpg);
background-repeat: no-repeat;
width: 100%;
max-width: 1500px;
margin: 0 auto;
background-size:cover;
}

.otk pre{
white-space: pre-wrap;
text-align: left;
width: 100%;
max-width: 608px;
margin: 0 auto;
padding-top: 5%;
text-align: left;
font: 1.0em/100% Georgia, serif;
text-decoration-color: blue;color:black;
text-shadow:2px 2px 3px white;
}

.proftop{
max-width:520px;
width:100%;
margin:0 auto;
}


.profcontents pre{
max-width: 500px;
float: left;
width: 100%;
}

.prof2{
float:left;
width: 100%;
max-width: 300px;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
}

.prof3{
float:left;
width: 100%;
max-width: 334px;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
}


.senn1{
clear:both;
max-width: 1200px;
width: 100%;
margin-top: 2%;
}

.topics{


}

p.tpi{
position: absolute;
left: 25%;

}


.contents {

/* �摜�t�@�C���̎w�� */
  background-image: url(../main1.png);
   
  /* �摜����ɓV�n���E�̒����ɔz�u */
  background-position: center center;
   
  /* �摜���^�C����ɌJ��Ԃ��\�����Ȃ� */
  background-repeat: no-repeat;
   
  /* �R���e���c�̍������摜�̍������傫�����A�����Ȃ��悤�ɌŒ� */
  background-attachment: fixed;
   
  /* �\������R���e�i�̑傫���Ɋ�Â��āA�w�i�摜�𒲐� */
  background-size: cover;
   
  /* �w�i�摜���ǂݍ��܂��O�ɕ\�������w�i�̃J���[ */
  background-color: #464646;

  width: 80%;
  height: 100%;
  position: relative;
  z-index: 5;
  overflow-y: auto; /* �c�X�N���[����L���� */
  margin-top:50px;
}

.top{
	max-width: 100%;
	padding-top: 5%;
}

.top2{
	max-width: 100%;
}

.top3{
	max-width: 100%;
}

.notice-bar {
  width: 80%;              /* �E�G���A�̕��ɍ��킹�� */
  margin-left: 20%;        /* �����j���[�̕������炷 */
  background: #fff;
 /* border-bottom: 2px solid #ff0000;*/
  padding: 10px;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  z-index: 5;
  position: absolute;       /* ��ɏd�˂� */
  top: 0;
  left: 0;
  height: 3%;
  text-emphasis:filled;
}