@charset "UTF-8";

/* all setting */

body{
	margin:0;
	font-family:"M PLUS Rounded 1c",sans-serif;

	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* header */
header{
	padding:5px 15px;
	font-family: 'Quicksand', sans-serif;
	font-size:24px;
	line-height:1;
	color:rgb(25,10,0);
	font-weight:300;
	display:block;
	position:fixed;
	top:0px;
	background-color: rgba(255,255,255,0.9);
	width:100%;
	height:55px;
	margin:0;
	border-bottom: solid 1px rgba(150,150,150,0.6);
	z-index:40;
}

a{
	color:inherit;
	text-decoration:none;
}
span.sub01{
	font-family:"M PLUS Rounded 1c",sans-serif;
	font-size:13px;
}
span.sub02{
	font-family:"M PLUS Rounded 1c",sans-serif;
	font-size:13px;
}
header > div > a:hover{
	opacity:0.5;
	color:rgb(100,10,0);
}

	/* menu button */
button{
	border: none;
	background-color: transparent;
	font-size: 28px;
	color: rgb(150,150,150);
	display: block;
	position: fixed;
	right: 15px;
	top: 15px;
	z-index: 200;
	padding:0;
	margin:0;
}
button:hover{
	color: rgb(250,150,150);
}

body:not(.open) .fa-close{
	display: none;
}
body.open .fa-bars{
	display: none;
}
body.open .sr-only{
	display: none;
}
	/* nav menu */
.menu ul {
	margin: 0;
	margin-top: 55px;
	padding: 0;
	list-style: none;
}
.menu a li, .menu li {
	display: block;
	padding: 5px;
	color: rgb(216,205,187);
	font-size: 16px;
	line-height: 30px;
	padding: 12px 16px;
	text-decoration: none;
	width:148px;
}

li.title {
	display: block;
	padding: 5px;
	color: rgb(235,229,221);
	font-size: 14px;
	padding: 10px;
	text-decoration: none;
	width:100%;
}
li.title2 {
	display: block;
	padding: 5px;
	color: rgb(235,229,221);
	font-size: 14px;
	padding: 10px;
	text-decoration: none;
	width:160px;
}
hr.menu2{
	height: 1px;
	border: none;
	background-color: rgb(235,229,221);
	margin: 6px 0px 0px 0px;
	padding: 0;
}
.menu a li:hover, .menu li:not(li.title, li.title2):hover {
	background-color: rgba(255,255,255,0.8);
		color: rgb(255,100,87);
	cursor: pointer;
}

.menu input{
	width:160px;
	font-size:16px;
	border:none;
	margin:0px 0px 15px 0px;
	padding:4px;
	-webkit-appearance: none;
	border-radius: 0;
}
input.menuword{
	width:152px;
	color: rgb(216,205,187);
	background-color:transparent;
	border: solid 1px rgb(216,205,187);
	height:24px;
}
input.menusubmit{
	color: rgb(216,205,187);
	background-color:transparent;
	border: solid 1px rgb(216,205,187);
	height:34px;
}
input.menusubmit:hover{
	background-color: rgba(255,255,255,0.8);
		color: rgb(255,100,87);
	cursor: pointer;
}

.menu{
	background-color: rgba(25,10,0,0.8);
	width: 400px;
	z-index: 100;
	top: 0;
	right: -30px;
	right: -400px;
	height: 100vh;
		overflow: auto;
		overflow-x: hidden;
	position: fixed;
	transition: right 0.2s ease-out;
	opacity:0;
}
body.open .menu {
	right: -30px;
	opacity:1;

}
body.open .pagecover {
	position: fixed;
	padding: 0;
	margin: 0;
	height: 120%;
	width: 120%;
	top: -10%;
	left: -10%;
	background-color: rgba(25,10,0,0.4);
	z-index: 50;
}
body.open{
	height: 100vh;
	overflow:hidden;
}
html{
	overflow-y:scroll;
}
div#extention{
	background-color:transparent;
}

.extention1, .extention2, .extention3, .extention4{
	background-color: rgba(25,10,0,0);
	width: 200px;
	z-index: 100;
	top: 74px;
	right: -10px;
	position: fixed;
	padding:50px 0px 0px 0px;
	display:none;
}
.extention1 li, .extention2 li, .extention3 li, .extention4 li {
	display: block;
	color: rgb(226,215,197);

//	padding: 12px 16px;
	padding: 0px;
	text-decoration: none;
	width:100%;
}

input.submitmenu {
	display: block;
	color: rgb(226,215,197);
	text-decoration: none;
	padding:18px 16px;
	margin:0px;
	text-align:left;
	background-color: transparent;
	width:100%;

}
input.submitmenu:hover{
	background-color: rgba(255,255,255,0.7);
		color: rgb(255,100,87);
	cursor: pointer;
}

div#extention.exopen1 .extention1 {
	display:block;

}
div#extention.exopen2 .extention2 {
	display:block;

}
div#extention.exopen3 .extention3 {
	display:block;

}

div#extention.exopen4 .extention4 {
	display:block;

}

/* contents */
.contents div{
	background-color:rgb(255,255,255);
	padding:15px 15px;
	margin-top:40px;
}

	/* 記事 */
article{
	background-color:rgba(230,235,231,0.0);
	padding:10px 20px 20px 20px;
padding: 0px;
/*	box-shadow:1px 2px 5px rgba(0,0,0,0.2);*/
}

h1{
	font-size:28px;
	font-weight:200;
	line-height:1.1;
	color: rgb(25,10,0);
}
span.h1rubi{
	font-size:14px;
}
p{
	line-height:2;
	font-weight:200;
}

table{
	padding:10px;
	margin: -10px 0px 30px 0px;
	width: 100%;
		background-color: rgba(230,235,231,0.4);
}

td{
	padding:10px 5px;
	font-size:95%;
		font-feature-settings: "palt" 1;
//	background-color: rgba(230,235,231,0.5);
}
td.header{
	width:85px;
	padding-left:10px;
	text-align:center;
	color: rgb(104,63,0);
//	background-color: rgba(230,235,231,0.8);
}

img{
	width:100%;
	height:auto;
}
figure{
	margin:0;
}
figucaption{
	font-size:80%;
	display:inline-block;
	padding-bottom:10px;
	margin-bottom:10px;
}

time{
	color:rgb(150,150,150);
	font-weight:100;
	margin-bottom:15px;
	display:block;
}

img.iconon{
	width: 60px;
	padding:0;
	margin:0;
}
img.iconoff{
	display:none;
}

/* sub contents */
div.sub{
	clear: both;
	padding: 0;
	margin: 0;
}
aside{
	background-color:rgba(230,235,231,0.5);
	padding:20px;
	margin-top:40px;
}
	/* twitter */
aside.aside04{
	padding:0px;
	margin-top:10px;
}

h2{
	font-family: 'Quicksand', sans-serif;
	color:rgb(25,10,0);
	text-align:center;
	font-weight:200;
}
	/* map */
.aside_map{
	padding:10px 10px 40px 10px;
	height: 450px;
	margin-bottom:40px;
}
.aside_map a:hover{
	color: rgb(255,100,100);
}


	/* topics */
.aside02 ul{
	list-style-type:none;
	padding:0;
}
.aside02 li:hover{
	opacity:0.5;
	color:rgb(200,50,50);
}
.aside02 a{
	display:flex;
	align-items:center;
	margin-bottom:10px;
}
.aside02 figure{
	width:100px;
	flex:none;
}
.aside02 img{
	vertical-align:bottom;
}
.aside02 h3{
	font-size:14px;
	font-weight:200;
	margin:0px 0px 0px 10px;
}
	/* gallery */
.aside03{
	text-align:center;
}

.aside03 figure{
	max-width:100%;
	flex:none;
	margin-top:20px;
	text-align:left;
}
.aside03 img{
	vertical-align:bottom;
}


/* footer */
footer{
	background-color:rgb(25,10,0);
	color:rgb(230,230,230);
	padding:25px 35px;
	font-family: 'Quicksand', sans-serif;
	text-align:right;
}

/* =============== pc ================*/
@media (min-width: 600px) {

.container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}


/* header */
header {
	padding-left:45px;
}

div.contents {
	padding:0px 30px;
}

h1 {
	font-size: 30px;
}
p {
	font-size: 16px;
}

.aside03{
	overflow:hidden;
}

.aside03 figure{
	width:calc(50% - 10px);
	margin:0 5px;
	float:left;

}

}
/* =============== pc ================*/


/* =============== pc-large ================*/
@media (min-width: 800px) {
header{
	width: calc(100% - 85px);
}
.container{
	max-width: 1100px;
	overflow-y: hidden;
}

.contents .container {
	display: flex;
	justify-content: space-between;
}

article {
	width:68%;
	box-sizing: border-box;
}

.sub {
	width: 28%;
}
aside{
	margin-top:20px;
}
.aside01{
	margin-top: 0px;
}
.aside03 li{
	max-width:300px;
	margin-top:20px;
	margin-left:20px;
	float:left;
	height: auto;
	display: block;
}

button{
	display:none;
}

	/* nav menu */
.menu{
	background-color: rgba(242,245,243,0.8);
	padding: 20px 0px 0px 0px;
	position: static;
	display: block;
	margin-top: 40px;
	margin-bottom: 20px;
	height: auto;
	width:calc(100% - 0px);
	overflow-x:hidden;
	opacity:1;
}
.pagecover{
	display:none;
}

.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a li, .menu li:not(.title) {
	display: block;
	color: black;
	font-size: 16px;
	padding: 15px 20px 15px 20px;

	text-decoration: none;
	border-bottom: solid 1px rgba(150,150,150,0.5);
	width:90%;
}

li.title {
	color:rgba(25,10,0,0.5);
	text-align:left;
	font-size:18px;
}
hr.menu2{
	display: none;
}
.menu a li:hover {
	background-color: rgba(255,255,255,0);
	color: rgb(255,100,100);
}


input.menuword{

	color: black;
	background-color:transparent;
	border: solid 1px rgba(150,150,150,0.5);

}
input.menusubmit{
	color: rgba(150,150,150,1);
	background-color:transparent;
	border: solid 1px rgba(150,150,150,0.5);
}

.menu li.title2{
	border:none;
	color:rgba(25,10,0,0.5);
	text-align:left;
	font-size:18px;
}

div#extention{
	padding:0;
	margin:0;
	width:0;
	background-color:transparent;
	z-index: 30;
	position:absolute;
	top:0;
}
#extitle{
	display:none;
}

.extention1, .extention2, .extention3, .extention4{
	z-index: 50;
	top: 226px;
	right: 200px;
	position: relative;
	padding:0px 0px 0px 0px;
	display:none;

}

.menu .extention1 li, .menu .extention2 li, .menu .extention3 li, .menu .extention4 li {
	display: block;
	text-decoration: none;
	width:200px;
	padding: 0px;
	margin: 0px;
	text-decoration: none;
	border-bottom: solid 1px rgba(150,150,150,0.5);
	background-color: rgba(242,245,243,0.8);
}

input.submitmenu {
	display: inline;
	color: black;
	text-decoration: none;
	padding: 21px 16px;
	margin: 0px;
	text-align:left;
	background-color: rgba(242,245,243,0.8);
	width:100%;

}
input.submitmenu:hover{
	background-color: rgba(255,255,255,0.7);
		color: rgb(255,100,87);
	cursor: pointer;
}


}
/* =============== pc-large ================*/