@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
@import url(http://fonts.googleapis.com/css?family=Henny+Penny);

:root {
	--web-backgraund-color: white;			/* ページ全体のバックグラウンドの色指定 */
	--header-background-color: white;		/* ヘッダーのバックグラウンドの色指定 */
	--main-background-color: #f0f0f0;		/* メインコンテンツのバックグラウンドの色指定 */
	--content-box-color: #fefefe;			/* メインコンテンツの箱のバックグラウンドの色指定 */

	--Sankyo-blue: #0068b7;					/* 三共社の青 */
	--Sankyo-lightblue: #b3d2ea;			/* 三共社の薄青 */

	--PC-width: 1200px;						/* ページの最大幅の指定 */
	--Content-fontsize: 0.5rem;
	--Content-BoxMargin: 5px;				/* メインコンテンツのボックス間マージン設定　*/

}

html {
	scroll-behavior: smooth;
}


body {
	display: -ms-flexbox; 
	display: flex;

	background: var(--web-background-color);	/*  ページ全体のバックの色指定*/
	margin: 8px 0px 0px 0px;
	font-size: 85%;								/* 基本のフォントサイズ：ブラウザデフォルトに対する割合 */

	flex-direction: column;						/* 子要素を縦に並べる */
	justify-content: center;					/* 子要素を左右中央に揃える */

}

#header		{order: 1;}
#main-menu	{order: 2;}
.breadcrumbs	{order: 3;}
.title		{order: 4;}
.content-area	{order: 5;}
.footer		{order: 6;}


/*---------- header ----------*/
#header {
	display: -ms-flexbox; 
	display: flex;								/* Flexbox */

	height: 50px;								/* ヘッダーの高さ指定 */
	background: var(--header-background-color);	/* ヘッダーのバックの色指定  */

	justify-content: center;					/* 子要素　左右センターぞろえ */
	align-items: flex-start;					/* 子要素　上詰め */

}


.logo-area {
	display: -ms-flexbox; 
	display: flex;								/* Flexbox */

	justify-content: space-between;				/* */
	align-content: space-between;				
	height: 50px;								/* */
	flex: 0 1 var(--PC-width);					/*  */
	background: var(--header-background-color); /* */
}


.logo-item {
	display: -ms-flexbox; 
	display: flex;
/*	background: #fff;							/*  */
	justify-content: flex-start;				/*  */
	align-items: center;						/*  */
	height: 40px;								/*  */
	margin: 10px 15px;							/*  */
	align-self: baseline;						/*  */

/*	font-size: 1.2rem;							/* フォントのサイズ */
/*	font-weight: 400;							/* フォントの太さ */
/*	color: var(--Sankyo-blue);					/* TEXTを書くときのフォントの色 */
	font-size: 1rem;							/* フォントのサイズ */
	font-weight: 200;							/* フォントの太さ */
	color: Black;					/* TEXTを書くときのフォントの色 */
}

.logo-item img {
	max-height: 30px;							/* ロゴのサイズ */
}



/*---------- Menu-bar ----------*/
#main-menu {
	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
	justify-content: center;	/*  */
	background: white;	/* */
	margin: 0px 0px;
	font-size: 0.8rem;	
}

.menu-area {
	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
	background: var(--Sankyo-blue);        /* sankyo-blue */
	flex: 0 1 1200px;
	border-radius: 15px;

	justify-content: space-between;   /* */
/*	justify-content: flex-start;   /* */

}


.pulldown {
	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
	justify-content: flex-start;		/* */
	
	margin: 0 15px;
}

.pulldown > ul{
	display: -ms-flexbox; 
	display: flex;
	flex-wrap: wrap;
	box-sizing:border-box; 
	justify-content: flex-start;		/* */
    margin: 0px  ; /*auto;*/
	list-style-type: none;			/* */
	padding: 0;	    
}
 
.pulldown > ul > li{
	flex-grow:1;
/*	margin:0 1px;		/*  */
	position: relative;
	border-right: 1px solid white;
	border-left: 1px solid white;
    
}

.pulldown > ul a{
	display:block;
	padding:0px 20px;
    background: var(--Sankyo-blue);
	height: 20px;
	justify-content: center;
	
    }
/*
.pulldown > ul :first-child a {
    border-radius: 15px 0 0 15px;

}
*/
.pulldown > ul > li a:hover{background:#b3d2ea;}

/** Pulldown **/
.pulldown > ul > li > ul{
	display: -ms-flexbox; 
    display: flex;
	flex-direction: column;
	position: absolute;
    list-style-type: none;
	border-radius: 0px 0 0 0px;
  
}
 
.pulldown  > ul > li:hover > ul{
	display: -ms-flexbox; 
	display: flex;
	z-index:2;
	width: 300px; /* 100%; */ 
	margin:0 auto;
}
 
.pulldown  > ul > li > ul > li{
	overflow: hidden;
	height: 0;
	transition: 0.2s;
	
}

/* 親メニューをHoverしたときの子メニューの設定*/
.pulldown   > ul > li:hover > ul li{
	overflow: visible;
	height: auto; /*38px;*/
/*	border-bottom:1px solid #ccc; /* */
    border: double 10px solid black;

	padding:5px 0px;
	background:#345;
}

/* 親メニューをHoverしたときの最初の子メニューの設定*/
.pulldown  > ul > li:hover > ul li:first-child{
	border-top:1px solid #fff;
	}

/* 子メニューのリンクタグのバックグラウンドの設定 */
.pulldown  > ul > li > ul > li a{
	background:#345;
	

}


.menu-right {
	display: -ms-flexbox; 
    display: flex;				/* Flexbox */
    flex-wrap: wrap;			/* 子要素折り返す */
	justify-content: center;    /* 子要素左右中央*/
    align-items: center;
	background: var(--Sankyo-blue);        /* sankyo-blue */
	margin: 0 15px;
}
.menu-item {
	display: -ms-flexbox; 
	display: flex;
	width: 100px;         /*  */
	height: 20px;
	justify-content: center; /*  */
	align-items: center;
	border-right: 1px solid white;
	border-left: 1px solid white;		/*  */
	box-sizing:border-box; 
/*	font-size: 0.8rem;		/*  */

}


.menu-area a {
	color: white;
	text-decoration: none;
}
.menu-area a:hover{
	color: var(--Sankyo-blue);           /*  */
	background: var(--Sankyo-lightblue);      /*  */
}

/*---------- Bread Crumbs ----------*/
.breadcrumbs {
	display: -ms-flexbox; 

	display: flex;
	flex-wrap: wrap;
	justify-content: center;	/*子要素を左右中央に揃える */
	background: #fff;
}


.breadcrumbs-area {
	display: -ms-flexbox; 
	display: flex;					/* Flexbox */
	flex-wrap: wrap;				/* 子要素がはみ出たら折り返す */
	align-items: center;			/* */
	flex: 0 1 var(--PC-width);		/*  */
}

.breadcrumbs-item {

    line-height:20px;
    font-size: 0.8rem;  /* */
    margin: 0px 0px;
	padding: 0 15px;

}

.breadcrumbs-area ol li {
        display: inline;
    list-style-type: none;
	padding: 0;

}

.breadcrumbs-area ol li:before {
    content: '>';
}

.breadcrumbs-area ol li:first-child:before {
    content: none;
}

.breadcrumbs-area a{
    color: black;
    text-decoration: none;
}

.breadcrumbs-area a:hover{
    color: cyan;
    text-decoration: underline;
}



/*---------- Title-bar ----------*/
.title {

	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
    flex-direction: column;
	height: 140px;				/* ?w?b?_?[???????70px */
	justify-items: top;	/* ?q?v?f?????E??????z?u */
	align-items: center;	/* ?q?v?f????l???z?u */
	background-image: url("img/BookShelf-02.png");
/*	background-image: url("img/seminar-page.png");*/
    opacity: 0.8;
}

.main-title {

	font-family: "Archivo Black";
	font-weight: 900;
	font-size: 4rem;
/*	color: rgb(34, 241, 197);                                    /*  */
	text-shadow: black 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */
/*	color: #b3d2ea;                                    /*  */
/*	color: #ffffff;                                    /*  */
	color: #eeffff;                                    /*  */
/*	color: #0068b7;                                    /*  */
/*	text-shadow: #0068b7 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */
/*	text-shadow: #b3d2ea 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */

}

.sub-title {

	font-family: "Archivo Black";
	font-weight: 300;
	font-size: 2.5rem;
/*	color: rgb(34, 241, 197);                                    /*  */
	text-shadow: black 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */
/*	color: #b3d2ea;                                    /*  */
/*	color: #ffffff;                                    /*  */
	color: #eeffff;                                    /*  */
/*	color: #0068b7;                                    /*  */
/*	text-shadow: #0068b7 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */
/*	text-shadow: #b3d2ea 7px 7px 5px, 0 0 0.3em rgb(41, 48, 53);  /*  */

}

/*---------- Main Contents ----------*/
.content-area {

	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
	justify-content: center;	/* ?q?v?f?????E??????z?u */
	align-items: flex-start;	/* ?q?v?f????l???z?u */
/*	background: #dfd;            /*  */
	background: var(--main-background-color); /* */ 
/*	background-image: url("img/back-image01-top.png");*/
	background-repeat: no-repeat;
	background-size: 50%;
}


.main-content {
	display: -ms-flexbox; 
	display: flex;				/* Flexbox */
	flex-wrap: wrap;			/* ?q?v?f????? */
	justify-content: center; /* */
	flex-direction: column;
	flex: 0 1 1170px;            /*  */
/*	background: whitesmoke; /* */ 
/*	background: var(--main-background-color); /* */ 
	margin: 25px;
}

.main-content p{
    line-height: 1.5;
    margin: 0.5em 0;                    /* Default 1em 0; */
	font-size: ver(--Content-fontsize);		/* */
}


.main-content div {
	/*	text-align:right;			/*  */
		margin: 5px 15px;			/*  */
	/*	padding: 10px;				/*  */
	/*   border-radius: 10px 10px 10px 10px;	/*  */
	
		font-size:large;
	
	
	/*	background: #faa;		/*   */
	}
	
	.main-content div.right {
		text-align:right;
	}
	.main-content div.center {
		text-align:center;
	}
	.main-content div.left {
		text-align:left;
	}
	
	.main-content div.xlarge {
		font-size:x-large;
		text-align:center;
	}
	.main-content div.sub {
		font-size:large;
	/*	text-align:center;			/*  */
		flex: 0 2 300px;
	}
	
	.main-content p {
		text-align:center;
		margin: 10px 15px;			/*  */
	}
	
	

	
/*---------- hooter ----------*/

.flex-body > footer {
	display: -ms-flexbox; 

	display: flex;				/* Flexbox */
	flex-direction: column;		/* ?q?v?f???c?????? */
	justify-content: space-between;	/* ?q?v?f?????E??????z?u */
/*	align-content: flex-start;	/* ?q?v?f????l???z?u */
	background: #0068b7; ;
}


.footer-item {
	display: -ms-flexbox; 
	display: flex;
	background: #0068b7;
/*	width: 100px;             /*  */
	height: 50px;
	justify-content: center;
    color: #ffffff;
/*    align-items: center;              /*  */
/*    border-right: 1px solid #ffffff;      /*  */
/*    border-left: 1px solid #ffffff;       /*  */
}

.footer-item a {
    color: #ffffff;
    text-decoration: none;
}

/*---------- to page top ----------*/
.pagetop {

    
    position: fixed;
    bottom: 0px;
    right: 16px;
    }
 
.pagetop a
    {
    display: block;
    text-decoration: none;
    }
 
.pagetop:hover
{
    opacity: 0.85 ;
}