@charset "utf-8";
/* -- STYLE 20250627 ver.5.4 -- */
/* @group HTML */
html {
font-family : verdana, sans-serif;
font-size:100%;
line-height:1.5;}
body{
 background-image:url("image/logo_mouhitu.jpg");
height:100%;}
/* @end */

/* @group Fluid-img */
img { vertical-align : top; max-width : 100%}
/* @end */

/* @group Heading */
h1,h2{ margin-bottom : 16px;
}
h1 { text-shadow:0px 2px 4px #191919;font-size:28px; line-height:0.5;margin-top: 1px;} /* 28px */
h2 { text-align:center; font-size:20px; color:#1d1f62;  text-shadow: 1px 2px #abd; line-height:1;margin-top: 1px;
} /* 20px */
h3 { text-align:left; font-size:16px; line-height:1; color:white; background-color: #abf; 
    padding: 3px; text-shadow: 1px 2px #555;
}/* 16px */
h3 a{ color:rgb(239, 241, 233);}
h4 { color: #145; text-shadow: 1px 2px #ddd; margin-left: 5px;
} 
h4 a{ color: #147; }
h5{ color: #27a; font-weight: bold; margin-left: 1rem; 
}
h6{ font-size:10px; text-align:left; line-height:1.4; margin-top : 10px;
} /* 10px */
/* @end */

/* @group Header */
header { text-align:center; padding-top : 16px; margin-bottom: 16px;}
header h1 a { color: #ffffff;}
/* @end */

/* @group Reset */
*{ margin: 0;padding: 0;}
a { text-decoration : none; color: #015f;}
a:hover{color:#cc0000; font-size: larger;}

p#guide{display: flex; 
  font-size:small; font-family: sans-serif;
}

/* @group dl 基本 */
dt{font-weight: bold; margin-left: 1.5rem;}
dd{margin-left: 2rem;}

dl.small{font-size: small; }

/* @group ol 基本スタイル */
ol.deci li{ margin-left: 2em; list-style: decimal inside; font-size: small; }
ol.num li{ margin-left: 1em; list-style: decimal-leading-zero inside; }
ol.alp li{ margin-left: 2em; list-style: lower-alpha inside;}
ol.squ li{ margin-left: 2em; list-style: square inside; font-size: small;}
ol.non li{ margin-left: 1em; list-style: none inside; font-size: small;}
/* @end */

/* @group ul 基本 */
ul{ text-align: left;}
li{ margin-left: 1em; list-style-position: inside; }

/* @group ul flow 横並び */
ul.fl01{ overflow: hidden; justify-content: space-around; }
ul.fl01 li{ float: left; list-style-type: none; margin-left:1em;
 }

/* @group ul flex 横並び */
ul.si01 { display: flex; justify-content: space-around;
  }
  ul.si01 li{ list-style: none; 
  }
  
/* @group divで括り ul 右に寄せて横並び（タイトルとメニュー） */
div.si02{
  width: 700px;
  background-color: white;
  display: flex;
  justify-content: space-around;
}
div.si02 ul{
  width: 60%;
 display: flex;
 justify-content: space-around;
}
div.si02 ul li{
  list-style: none;
}
/* @end */


/* @group Nav */
nav {
background-color: #bababa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bababa), color-stop(1.00, #474747)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#bababa, #474747); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(#bababa, #474747); /* FF3.6+ */
background: -o-linear-gradient(#bababa, #474747); /* Opera 11.10+ */
background: -ms-linear-gradient(#bababa, #474747); /* IE10+ */
background: linear-gradient(#bababa, #474747); /* W3C */
}
nav ul { overflow : hidden; justify-content: space-around;
}
nav ul li {  float: left; list-style-type: none;
   margin-left:20px;}
nav ul li a {
font-size: 13px;
color : white;
}
nav ul li a:hover {
color : red;
}
/* @end */

/* @group Section */
section{margin-bottom: 10px; 
}
/* @end */

/* @group Aside */
aside{font-size: 13px; 
}
/* @end */


/* @group Contents */
#contents {
width : 95%;
margin : 0 auto;
}
/* @end */

/* @group Footer font */
footer {font-size: 12px; 
padding : 14px 0;
color : #444;
text-align : center;
text-shadow: 0px 2px 4px #191919;
}
/* @end */




/*768px*/
@media screen and (min-width : 768px){
#contents{ text-align : left;}
}

/*1024px*/
@media screen and (min-width : 1024px) {
/* @group Nav */
nav ul {
width :93.75%;/* 960/1024 */
margin : 0 auto}
/* @end */
/* @group Contents */
#contents {
overflow : hidden;
width : 93.75%}/* 960/1024 */
#contents #main,
#contents #sub { 
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/
/* @end */
/* @group Footer */
footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto;}
/* @end */
}