@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');

@font-face {
  font-family: "kaimin";
  src: url("../font/kaimin.woff2") format("woff2"),
       url("../font/kaimin.woff") format("woff");
}

@font-face {
  font-family: "ryum";
  src: url("../font/ryum.woff2") format("woff2"),
       url("../font/ryum.woff") format("woff");
}
@font-face {
  font-family: 'ryum';
  src: url("../font/ryumkana.woff2") format("woff2"),
       url("../font/ryumkana.woff") format("woff");
  unicode-range: U+3040-309F, U+30A0-30FF;
}


/*-------------- 試験中フォント  ------------*/
@font-face {
	font-family: 'a1-m';
	src: url("../font/a1-m.woff2") format("woff2"),
		 url("../font/a1-m.woff") format("woff");
  }

  @font-face {
	font-family: 'koburi3';
	src: url("../font/koburi3.woff2") format("woff2"),
		 url("../font/koburi3.woff") format("woff");
  }


/*-------------- 試験中フォント  ------------*/



html,
body { margin: 0; padding: 0;
       width: 100%;}

body {
	background: #F7F6EB;
	font-size: 16px;
    color: #555;
	line-height: 220%;
    letter-spacing: 0.1em;
	font-family: "ryum",'Noto Sans JP', Meiryo, メイリオ, sans-serif;
	font-weight: 600;
}

html { font-size: 100%;}

header,footer {
  display: block;
}

::selection {
    background: #333;
	color: #DEC6A0;
}

::-webkit-scrollbar{
	width: 16px;
}
::-webkit-scrollbar-track{
	background-color: rgba(255,255,255,0);
	border-left: solid 2px #fff;
}
::-webkit-scrollbar-thumb{
	background: #DEC6A0;
	box-shadow: inset 0 0 0 2px #fff;
}

/*------------------------------------------------------------
汎用
------------------------------------------------------------*/

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #555;
}

a:hover{
    cursor: pointer;
}

a:hover::after {
    width: 100%;
}

.flex {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content : space-between;
}



/*------------------------------------------------------------
ヘッダー
------------------------------------------------------------*/


header{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 50px 0 70px;
}

h1{
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	border-bottom : solid 1px  #333;
	font-size: 36px;
	font-family: "a1-m", "Hannari", 'Alegreya Sans', 'メイリオ', sans-serif;
	font-weight: 600;
	color: #555;
	text-align: center;
}



/*------------------------------------------------------------
メイン
------------------------------------------------------------*/

main{
	width : 730px;
	margin: 0 auto;
	padding: 0;
	font-size: 18px;
}

.novel {
}



/*-------------- 試験中フォント  ------------*/

.test_h1{
	font-family: "a1-m", "Hannari", 'Alegreya Sans', 'メイリオ', sans-serif;
}

.novel2 {
	font-family: "koburi3", "Hannari", 'Alegreya Sans', 'メイリオ', sans-serif;
}

/*-------------- 試験中フォント  ------------*/



p {
	margin-bottom: 4em;
}

/* § */
.section {
	height: 2em;
	line-height: 2em;
	text-align: center;
}

.img {
	margin: auto;
	margin-bottom: 50px;
}
.img img {
	width : 730px;
	height: auto;
}

.history {
	margin: 60px 0;
}
.history ol {
	list-style: none;
}

footer {
	background: #DEC6A0;
}

footer ul {
	margin: 0 auto;
	padding: 10px 0;
	width : 730px;
	list-style: none;
	font-weight: 900;
	color: #39455E;
}


/*------------------------------------------------------------
MediaQuery
------------------------------------------------------------*/

/*-----------------------------------------
SP SMALL(~319px)
------------------------------------------*/
@media screen and (max-width: 319px) { 




}/*-------SP SMALL--------*/

/*-----------------------------------------
SP(320~599px)
------------------------------------------*/
@media screen and (max-width: 599px) { 

/*---------
ヘッダー
-----------*/

	header{
		width: 100%;
		height: 50px;
		margin: 0;
		padding: 50px 0 70px;
	}


	h1{
		width: 100%;
		padding: 0 20px 20px;
		font-size: 26px;
	}



/*---------
メイン
-----------*/
	
	main{
		width : 100%;
		margin: 0 auto;
		padding: 0;
		font-size: 16px;
	}

	.novel, .novel2 {
		margin: auto;
		padding: 0 20px;
	}
	
	p {
		margin-bottom: 4em;
	}


	.img {
		margin-bottom: 50px;
	}
	.img img {
		width : 100%;
	}

	.history {
		margin: 60px 0;
	}

	footer {
		width : 100%;
	}

	footer ul {
		padding: 10px 20px;
		width: 85%;
	}




}/*-------SP--------*/

/*-----------------------------------------
TABLET SMALL(600~900)
------------------------------------------*/
@media screen and (max-width: 800px) { 
}