/*スマホとPC分ける用の定義文*/
.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width : 767px){
	.for-pc { display:none; }
	.for-sp { display:block; }
}

*{
	margin: 0;
	padding: 0;
}

body {
	background-color: #f6fff6;/*#f2f8f2*/
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 30px;
}

header{
	background-color: #4d4d4f;
}

h1{
	padding:30px 10px 20px 10px;
	text-align: center;
}

h1 a {
	color: #f5f5f5;
	text-decoration: none;
}

h1 a:hover{
	color: #ffffff;
}

nav{
	margin-top: 10px;
}

nav ul{
	display:flex;
	justify-content: center;
}

nav ul li{
	list-style: none;
}

nav ul li .ul_li_index{
	border-right: 2px solid #f6fff6;
	padding-left: 25px;
	padding-right: 25px;
}

nav ul li .ul_li_diagram{
	border-right: 2px solid #f6fff6;
	padding-left: 25px;
	padding-right: 25px;
}

nav ul li .ul_li_introduction{
	padding-left: 25px;
	padding-right: 25px;
}
nav a{
	/*float: right;*/
	color: #f5f5f5;
	text-decoration: none;
	padding: 15px 8px;
	display: block;
}

header p a{
	float: right;
	color: #f5f5f5;
	text-decoration: none;
	padding: 15px;
	display: block;
}

@media only screen and (max-width : 767px){
	main{}
}

@media only screen and (min-width: 767px){
	main{
		margin-left: auto;
		margin-right: auto;
		width: 1000px;
	}
}

.inside{
	/*margin: 50px 180px;*/
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 40px;
	background-color: #fcf2e3;
	border-radius: 20px;
}

@media only screen and (max-width : 767px){
	.inside{
		padding: 25px;
	}
}

.saitonoshoukai s{
	font-size: 11px;
}

.saitonoshoukai{

}

h2{
	font-size: 30px;
	margin-bottom: 25px;
}

@media only screen and (min-width : 767px){
	.gallery{
		margin-top: 15px;
		width: 520px;
		/*overflow: hidden;*/
	}
	.diagramkoukai{
		margin-left: 40px;
	}
}

@media only screen and (max-width : 767px){
	.gallery{
		margin-top: 15px;
		width: auto;
		/*overflow: hidden;*/
	}
	.diagramkoukai{
		margin-left: auto;
		margin-right: auto;
	}
}

.diagramkoukai a{
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #444;
	background-color: #ffffff;
	padding-bottom: 9px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.23);
}

.diagramkoukai h3{
	text-align: center;
}

.diagramkoukai p{
	text-align: center;
}

@media only screen and (max-width : 767px){
	.diagramkoukai img{
		width: 100%;
	}	
}

@media only screen and (min-width : 767px){
	.diagramkoukai img{
		width: 400px;
	}
}

.otoiawase{
	margin-top: 30px;
}

.otoiawase p {
	margin-left: 5px;
	margin-right: 5px;
	display: inline;/*改行なし*/
	color: #0000ee;
	text-decoration: underline;/*下線追加*/
	cursor: pointer;/*ポインタープロパティ*/
	user-select: none;/*選択禁止*/
}

.otoiawase a span{
	font-size: 13px;
}


@media only screen and (min-width : 767px){
	.change-log_and_yukemuri{
		margin-left: 40px;
		display: flex;
	}

	.change-log{
		width: 440px;
	}	
}



@media only screen and (max-width : 767px){
	.change-log_and_yukemuri{
		padding: 25px;
	}

	.change-log{
		width: 100%;
	}	
}

.change-log h3{
	padding-left: 30px;
}

.change-log dl{
	color: #2d3a46;
	margin-top: 5px;
	background-color: #eee;
	height: 120px;
	overflow-y: scroll;
}

.change-log dt{
	text-align: right;
	width: 80px;
	margin-right: 20px;
	float: left;
}

.change-log span{
	margin-left: 120px;
}

.yukemuri{
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}

.yukemuri img{
	margin-top: 15px;
	margin-bottom: 5px;
	margin-left: 23px;
}

.admin-access{
	color: #b8b8b8;
}

footer{
	margin-top: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #4d4d4f;
	color: #f5f5f5;
	list-style: none;
	overflow: hidden;
}

.container{
	margin-right: auto;
}

@media only screen and (min-width : 767px){
	.container{
		margin-left: auto;
		width: 1000px;
	}
}

@media only screen and (max-width : 767px){
	.container{
		margin-left: 7%;
		width: 100%;
	}	
}

.container a{
	color: #f5f5f5;
	text-decoration: none;
}

.container dl{
	/*float: left;*/
	display: inline-block;
	vertical-align: top;
	padding-right: 45px;
}

.container dd{
	font-size: 14px;
	line-height: 20px;
}

.container dd span{
	font-size: 11px;
}

.container-links{
	margin-left: 14px;
}

.twitter-X{
	font-size: 10px;
}

.hatena{
	text-decoration:none;
	float: right;
	cursor: help;
	color: #fcf2e3;
}

.hatena::selection{
	color: #000000;
	background-color: #fcf2e3;
}