@charset "utf-8";

* {
border: 0px solid;
}

body {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust:     100%;
color:#FFFFFF;
font-size:85%;
background-color: #0a5794;
}

#wrapper {  
width: 800px; 
margin: 0 auto;
text-align: left; 
} 

*.f-right {
float: right;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 1em;
}
*.f-left {
float: left;
margin-right: 2em;
margin-left: 2em;
margin-bottom: 1em;
}
*.f-clear {
clear: both;
}

.center{
text-align: center;
}

.right{
text-align: right;
}

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

hr {
clear:both;
height: 1px;
background-color: #FFFFFF;
margin-bottom: 1.5em;
border: none;
}

.asterisk {
	font-size: 88%;
}

h1 {
	position: relative;
	padding: 1em 0.5em;
}
h1::before,
h1::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
h1::before {
	top: 0;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
}
h1::after {
	bottom: 0;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #ccc;
}

h2 {
	position: relative;
	padding: 0 0 .5em .5em;
	border-bottom: 1px solid #ccc;
	margin-top: 2.5em;
}
h2::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 3px;
	background-color: #000066;
}



.menu-fix {
	margin:3px 0;
	width: 100%;
	max-width: 800px;
}

.menu {
    display: block;
	width: 100%;
ss}

.menu01 a {
    width: 264px;
    height: 264px;
    background: url("../img/utahime.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 3px 2px 10px 0;
}
.menu01 a:hover {
    background-position: 0 -264px;
}
.menu02 a {
    width: 264px;
    height: 264px;
    background: url("../img/mtms.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 3px 2px 10px 0;
}
.menu02 a:hover {
    background-position: 0 -264px;
}
.menu03 a {
    width: 264px;
    height: 264px;
    background: url("../img/tmusic.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 3px 2px 10px 0;
}
.menu03 a:hover {
    background-position: 0 -264px;
}

.menu_lt {
	clear: both;
	padding: 1em 0;
	border-top: 1px solid #ccc;
}

.menu_lt ul{
position: relative;
padding:0;
margin:0;
list-style: none; 
}
.menu_lt li{
font-size : 85% ;
padding: 0px 3px 10px 3px;
margin: 0 7px;
float: left;
}
.menu_lt li a{
display: block;
text-decoration: none;
color: #FFFFFF;
text-align: left;
}
.menu_lt li a:hover{
color: #000066;
}

#copyright {
clear: both;
padding: 1em 0;
border-top: 1px solid #ccc;
font-size: 75%;
text-align: center; 
}


@media only screen and (max-width: 780px) {
#wrapper {  
width: 100%; 
} 
.menu {
    display: block;
}
.menu01 a {
    width: 264px;
    height: 264px;
    background: url("../img/utahime.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 10px 10px 10px 10px;
}
.menu01 a:hover {
    background-position: 0 -264px;
}
.menu02 a {
    width: 264px;
    height: 264px;
    background: url("../img/mtms.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 10px 10px 10px 10px;
}
.menu02 a:hover {
    background-position: 0 -264px;
}
.menu03 a {
    width: 264px;
    height: 264px;
    background: url("../img/tmusic.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:left;
	margin: 10px 10px 10px 10px;
}
.menu03 a:hover {
    background-position: 0 -264px;
}
}


@media only screen and (max-width: 480px) {
#wrapper {  
width: 100%; 
} 
.menu {
	width: 280px;
}
.menu01 a {
    width: 264px;
    height: 264px;
    background: url("../img/utahime.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:none;
	margin: 5px 10px;
}
.menu01 a:hover {
    background-position: 0 -264px;
}
.menu02 a {
    width: 264px;
    height: 264px;
    background: url("../img/mtms.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:none;
	margin: 5px 10px;
}
.menu02 a:hover {
    background-position: 0 -264px;
}
.menu03 a {
    width: 264px;
    height: 264px;
    background: url("../img/tmusic.png") no-repeat;
    display: block;
    text-indent: -9999px;
    float:none;
	margin: 5px 10px;
}
.menu03 a:hover {
    background-position: 0 -264px;
}
}