/************************/
/*     otomo.css        */
/*     Dec/2020         */
/************************/

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration : none;
}

ul, ol {
	list-style: none;
}

img {
	vertical-align : middle;
	max-width : 100%;
}

html {
	font-family : verdana, sans-serif;
	font-size : 75%;
	line-height : 1.5;
	color: #111;
	background: #fff;
}


h1 {
	font-size : 3em;
	line-height : 1;
	padding-bottom: 0.125em;
	margin-bottom : 0em;
	margin-left : 5%;
	text-align : left; 
}	/* 48px */

#toplogo{
	background : #005555;
}

#toplogo h1 img{
	width : 5em;
}

#otomologo h1 img{
	width : 300px;
}

#kolorojlogo {
	width : 100%;
	background-image: url("kolorojbg.jpg");
	background-size:auto 500%;
	background-position: 40% 40%;
}

#kolorojlogo img{
	width : 200px;
}

h2 {
	font-size : 1.5em;
	line-height : 1;
	margin-bottom : 1em;
	border-bottom : dotted 1px #222; 
}	/* 24px */

h3 {
	font-size : 1.5em;
	line-height : 1;
	margin-bottom : 1em;
	color : #222;
}	/* 24px */

h4,h5,h6 {
	font-size : 1.25em;
	line-height : 1.5;
	margin-bottom : 1.5em;
}	/* 24px */
em {
	font-style : normal;
	font-weight : bold;
}

em.koloroj{
	font-size : 1.25em;
	color : #ff8800;
}

em.ko_name{
	font-size : 1.5em;
	font-weight: bold;
	color: rgb(233,77,77); 
}

header {
	text-align : center;
	padding-top : 0em;;
	background-color : #ffffff;
}

nav {
	margin-bottom : 1.5em;
	background : #897;
	background: -moz-linear-gradient(top, rgba(128,146,112,0.15) 0%, rgba(250,250,250,0) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(128,146,112,0.15)), color-stop(88%,rgba(250,250,250,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* W3C */
}

nav ul {
	overflow : hidden;
}

nav ul li {
	width : 33.3333%;
	float : left;
}

nav ul li a {
	display : block;
	padding : 0.75em 0px;
	color : #675;
}

nav ul li a:hover {
	color : white;
	background-color : #bca; 
}

#intro{
	text-align : center; 
}

#intro img{
	width : 100%;
}

dl.menu{
	margin-bottom : 3em; 
	border-radius: 10px;
}

dl.menu dt{
	margin-top: 1em;
	padding: 0.5em 1em;
	font-size : 1.5em;	
	color: #FFF;
    background-color : #5a9;
    border-radius : 10px 10px 0 0 ;
}

/*dl.menu dt:first-of-type{
	margin-top: 1em;
	padding: 0.5em 1em;
	font-size : 1.5em;	
	color: #f60;
    background-color : #fff;
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: #5a9;
    border-radius : 10px 10px 0 0 ;
}*/

dl.menu dt a{
	color : #ffffff;
}

dl.menu dd{
	padding: 0.5em 1.5em;
  margin-left: 0;
  border-width: 0 1px 1px;
  border-style: none solid solid;
  border-color: #5a9;
    border-radius : 0 0 10px 10px ;
}

/*dl.menu dd:first-of-type a{
	color : #5a9;
}*/

dl.menu dd a{
	color : #111;
}

.thumb{
	width:300px;
}

#contents {
	width : 90%;
	margin: 0 auto;
}

#contents p {
	margin-bottom : 1.5em;
	text-align : left;
	line-height : 1.75em;
	padding-left : 2em;
}

#contents p small{
	font-size: 0.85em;
}

#koloroj_list{
	background-color : #fff;
	margin-bottom : 2em; 
	border : 1px solid #000;
	padding : 1em;
	width: 100%
}

#koloroj_list td{
	border-bottom : 1px solid #000;
	padding-bottom : 0.25em;
}

#koloroj_list td:first-child,th:first-child {
	 /*text-align : right;*/
	 /*padding-right : 1em;*/
	 width: 10%;
}

#koloroj_list th:nth-child(n+3),td:nth-child(n+3){
	/*width : 10%;*/
	text-align: center;
}

#koloroj_list tr:nth-child(2n) td{
	border-bottom : none;
	padding-bottom : 0;
	padding-top : 0.25em;
}
#koloroj_list tr:last-child td{
    border-bottom : none;
}

#koloroj_list td p{
    font-size : 0.75em;
	background-color : #fff;
	margin-bottom : 0;
	margin-top: 1em;
	padding-left : 10%;
	display: none;
}

#koloroj_list audio{
	width : 90%;
	margin-left : 10%;
	display : none;
}

iframe {
	border: none;
	width: 100%;
	height: 18em;
}

.calendar td{
	width : 30px;
}

img.fig1{
	width: 49%;
	float: left;
}

img.fig2{
	width: 49%; padding-left:2%;
}

.item{
    width : 90%;
    padding : 5%;
    background-color : #ffb;
    margin-bottom : 2em ;
    border-radius: 10px;
}

.item_doremi{
    width : 90%;
    padding : 5%;
    background-color : #cdb;
    margin-bottom : 1.5em;
    border-radius: 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .3);
}

.item_doremi ul li{
	margin-bottom : 0.5em;
}

.item_koloroj{
    width : 90%;
    padding : 5%;
    color : #fff;
    background-color : rgb(35,63,101);	
    margin-bottom : 1.5em;
    border-radius: 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .3);
}

.item_koloroj ul li{
	margin-bottom : 0.5em;
}

.item_koloroj img{
	margin-top : 0.5em;
}

ul.dscr{
	margin : 0 5% 3em 5%;
}

ul.dscr li{
	list-style-type : square;
	margin-bottom : 0.5em;
}

ul.lineup {
}

ul.lineup li{
	list-style-type : none;
	font-size: 1.25em;
}

ul.lineup li:first-child{
	font-size: 1em;
	margin-bottom : 0.5em;
	padding-bottom : 0.5em;
	border-bottom : 1px solid #fff;
}

ul.lineup li:before{
	content:"♪　"
}

ul.lineup li:first-child:before{
	content:""
}

ul.lineup li a{
	color: #000;
}

ol.songlist{
	margin : 0 5% 3em 5%;	
}

ol.songlist li{
	list-style-type : decimal;
	margin-bottom : 0.5em;
}

em#sanjo{
	color : #f60;
	font-size : 1.2em;
}

#sub{
	color : #065;
}

.youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
	border: 2px solid #ccc;
}

.youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

footer {
	color : #111;
	text-align : center;
	padding : 1.5em 0;
	background : #897;
	background: -moz-linear-gradient(top, rgba(128,146,112,0.15) 0%, rgba(250,250,250,0) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(128,146,112,0.15)), color-stop(88%,rgba(250,250,250,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(128,146,112,0.15) 0%,rgba(250,250,250,0) 88%); /* W3C */

}

/*768px*/
@media screen and (min-width : 768px){
html { font-size : 87.5%}
#contents { text-align : left}
/* @group Nav */

nav ul {
    	padding : 0 10%;
}

/* @end */

/* @group Contents */

#contents {
overflow : hidden;
width : 90%}/* */
#contents #main,
#contents #sub { 
/*float : left;*/
/*margin : 0 1.0416667% }*/
/*#contents #main { width : 64.5833333%} */
#contents #sub {
/*	width : 31.25%;*/
	font-size : 87.5%;
}/* 300/960 */




/* @end */


/* @group Footer */

footer {
    margin : 0 auto
}

/* @end */


}


/*960px*/
@media screen and (min-width : 960px) {
html {
    font-size : 100%
}
nav ul {
    	padding : 0 20%;
}


}