@charset "UTF-8";

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

body{
	font-family			: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
	font-size			: 100%;
	background-color	: #FFFEF7;
	color				: #131313;
	line-height			: 1.6;/* ←行間指定 */ 
	/* 以下は魔法の指定。これも入れてね。 */ 
	-webkit-text-size-adjust: 100%; 
	-moz-text-size-adjust	: 100%; 
	-ms-text-size-adjust	: 100%; 
	-o-text-size-adjust		: 100%; 
	text-size-adjust		: 100%; 
} 

h1{
	border			: solid;
	border-width	: 0px 0px 0px 10px;
	padding			: 5px;
	border-color	: #313131;
	font-size		: 120% ;
}

h2{
	border			: solid;
	border-width	: 0px 0px 0px 5px;
	padding			: 5px;
	border-color	: #777777;
	font-size		: 110% ;
	margin-left: 5px;
}

img{
	max-width	: 100%;
	height		: auto;
	width		: auto;
}

.box2 {
/*	background-color : #7cbac1; */
	background-color : #aaaaaa;
}
.menu ul {
		margin : 0;
		padding : 0;
		list-style : none;
}
.menu li a {
		display : block;
		padding : 5px;
		color : #000000;
		font-size : 90%;
		text-decolation : none;
}
.menu li a:hover {
	background-color : #eeeeee;
}
.menu ul:after {
	content : "";
	display : block;
	clear : both;
}
.menu li {
	float : left;
	width : auto;
}
.copyright p {
	margin : 0;
	color : #666666;
	font-size : 50%;
}
.copyright {
	border-top : solid 1px #dddddd;
}
.font90 {font-size : 90%;}
.font80 {font-size : 80%;}
.font70 {font-size : 70%;}
.font60 {font-size : 60%;}
.font50 {font-size : 50%;}
.font40 {font-size : 40%;}
.font30 {font-size : 30%;}

textarea {
	width:80%;
}

div.yohaku{
    border:1px #000000 solid;
	margin:10px 10px 10px 10px;/*上、右、下、左*/
	padding:10px 10px 10px 10px;/*上、右、下、左*/
}

@media screen and (min-width:500px){
	div.col1{
		width : 30%;
		float : left;
		border			: solid;
		border-width	: 0px 0px 0px 0px;
	}
	div.col2{
		width : 45%;
		float : left;
		border			: solid;
		border-width	: 1px 0px 0px 0px;
	}
	div.col3{
		width : 60%;
		float : left;
		border			: solid;
		border-width	: 0px 0px 0px 0px;
	}
}
@media screen and (max-width:499px){
	div.col1,div.col3{
		width : 100%;
		border			: solid;
		border-width	: 0px 0px 0px 0px;
	}
	div.col2{
		width : 100%;
		border			: solid;
		border-width	: 1px 0px 0px 0px;
	}
}

a#input {
	display:block;
	border:solid 1px #999999;
	border-radius : 2px;
	padding:10px;
	margin:0px;
	list-style : none;
	background-color	: whitesmoke;
	text-decoration: none;
	box-shadow : 0px 1px 0px 0px #000000;
	color : #000000;
}

div.blk{
	float : left;
	width : 100%;
}

.menuTabLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color:#6D6D6D;
	border-style:solid;
	background:#CCCCCC;
	color:#494949;
	line-height:140%;
	font-weight:bold;
}

textarea{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   padding:0 3px;
}
.YoutubeWrapper{
  position: relative ;
  margin-top: 1.2em ;
  margin-bottom: 1.2em ;
  padding-top: 69px ;
  padding-bottom: 50% ;
  overflow: hidden ;
}
.YoutubeWrapper iframe {
   position: absolute ;
   top: 0 ;
   left: 0 ;
   height: 100% ;
   width: 100% ;
}